Are there short-codes in Jekyll?

#1

Is there a way to style a portion of the markdown file differently? Let say I want to style a part of the text like a speech bubble. Is there a way to custom style part of the text this way? In Hugo there are short-codes that can do that. Is there something like this in Jekyll?

#2

includes sort of work similarly, and you can pass info to the include if needed.

1 Like
#3

There are several ways to achieve this:

Use Jekyll _includes along with parameters. Simple example would be to style an alert block.

<!-- /_includes/alert.html -->

<div class="alert alert-info" role="alert">
  {{ include.content }}
</div>

And you’d use it in your content like so:


Some content here.

{% include alert.html content="Your alert text" %}

Some more content.

Write a custom Jekyll tag (aka a plugin). This would be similar to the include method above but you you’d have something like:

{% alert %}
Your alert content here.
{% endalert %}

Or you can Augment Kramdown written Markdown with selectors to apply CSS classes to a block of text styling it however you need.

Your alert text
{: .alert .alert-info}
1 Like
#4

Would you be able to somehow pass a couple of content blocks to the alert.html
for example:

<!-- /_includes/alert.html -->

<div class="alert alert-info" role="alert">
  {{ include.content }}
</div>
<div class="link" role="link">
  {{ include.link }}
</div>

In the markdown file:

Some content here.

{% include alert.html content="Your alert text" link="link.com" %}

Some more content.
#5

yes - pretty good docs here: