CODEWITHSUNDEEP
markdownjekyll
Marius
Marius

Reputation: 1759

How to create custom liquid/markdown tags in Jekyll?

This Jekyll markdown + HTML code works fine:

<div class="row">
<div class="col-md-8"  markdown="1">

**Lorem** ipsum dolor sit amet, consectetur adipiscing elit. Donec nec eros eget nisl fringilla commodo. Maecenas ornare, augue ut ultricies tristique, enim lectus pretium quam, quis bibendum metus tellus sed magna. Donec eu dolor augue ut ultricies tristique, enim lectus pretium quam, quis bibendum metus tellus sed magna.

</div><div class="col-md-4" markdown="1">
![](images/exercise.jpg)
</div></div>

But I'd like to avoid HTML in markdown, to control styling & grid system only in 1 place (eg upgrade to bootstrap 4 or change entire template)

How could something like this work instead? 

{% grid %} 
{% col:8 %}

**Lorem** ipsum dolor sit amet, consectetur adipiscing elit. Donec nec eros eget nisl fringilla commodo. Maecenas ornare, augue ut ultricies tristique, enim lectus pretium quam, quis bibendum metus tellus sed magna. Donec eu dolor augue ut ultricies tristique, enim lectus pretium quam, quis bibendum metus tellus sed magna.    

{% col:4 %}
![](images/exercise.jpg)
{% endgrid %}

Any syntax without HTML is welcome, this is just an example.

Upvotes: 1

Views: 907

Answers (1)

Kevin Workman
Kevin Workman

Reputation: 42176

You could use an include. This lets you add content from another file to your HTML.

So you would have something like a file named grid-start.html in your _includes directory that contained the <div class="row"> HTML. Similar for the <div class="col-md-8" markdown="1"> content, as well as closing tags. Also note that you can pass in parameters to an include file.

Then in your markdown, you would do something like this: 

{% include grid-start.html %}
   {% include col-start col="8" %}
      **Lorem** ipsum dolor sit amet...
   {% include col-end %}  
   {% include col-start col="4" %}
      ![](images/exercise.jpg)
   {% include col-end %}  
{% grid-end %}

Honestly this seems like a lot of rigmarole just to avoid using some basic html tags though.

Upvotes: 1

Related Questions