Two column Jekyll layout, separated by tags?

Question

I'm currently working on a Jekyll blog at the moment, and I'd like to put my markdown files in this format:

<div class="row">
    <div class="col-md-6">

    </div>
    <div class="col-md-6">

    </div>
</div>

I want my code blocks in one column and everything else (text, headers, etc.) in the other column so that I have side-by-side explanations of my code.

Is there any way to do this? It seems Markdown and the Liquid templating engine is very restrictive in this regard.

Thanks!

Answer 1

You can get desired result by combining Twitter Bootstrap with templating engine:

<div class="row">
    <div class="col-md-6">
        {{ include-code-blocks }}
    </div>
    <div class="col-md-6">
        {{ include-texts }}
        {{ include-headers }}
        {{ include-what-you-want }}
    </div>
</div>

or you write them inline by enabling markdown processing inside html blocks:

# Apply this change to _config.yml file
kramdown:
  # parse markdown inside block-level HTML tag
  parse_block_html: true

And use this in markdown files:

<div class="row">
    <div class="col-md-6">
        **some code block here**
        **another code block here**
    </div>
    <div class="col-md-6">
        **some text here**
        ##some header here
        ###something else here
    </div>
</div>

Info about markdown syntax: https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet Info about Jekyll's markdown processor: http://kramdown.gettalong.org/documentation.html