Two column Jekyll layout, separated by tags?

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!

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

If I understand, you want to take side by side, liquid/jekyll code and resulting code. You are using twitter bootstrap as css framework.

In order to instruct kramdown to parse markdown in html block tags, in _config.yml, add :

kramdown:
  # use Github Flavored Markdown
  input: GFM
  # do not replace newlines by <br>s
  hard_wrap: false
  # parse markdown inside block-level HTML tag
  parse_block_html: true

In marwdown files, you can now use the {% raw %}{% endraw %} tag to instruct liquid not to parse, but to print code 'as is'.

<div class="row">
<div class="col-md-6">
``` liquid
{% raw %}
{% if page.title == 'About' %}
page.title = {{ page.title }}
{% endif %}
{% endraw %}
```
</div>
<div class="col-md-6">
{% if page.title == 'About' %}
page.title = {{ page.title }}
{% endif %}
</div>
</div>

Note: There is no indentation. it's because a four space indentation is considered as a code block by kramdown. It wraps you code in code tag. Not cool.

The answer is YES. This is very simple. Add float:left to paragraphs and code blocks. Use clear:left on p's. Make sure there is enough space for two elements next to each other. Add overflow:auto to the container. Like this: http://codepen.io/anon/pen/grqRPr.

Your Markdown file (index.md):

---
layout: default
---

paragraph goes here

```` code goes here ````

paragraph goes here

```` code goes here ````

Your CSS file (style.css):

p, pre {float: left; width: 50%;}
.container {width: 100%;}
p {clear: left;}

Your layout file (default.html):

<html>
<head>
   <link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
  <div class="container">{{ content }}</div>
</body>
</html>

来源：https://stackoverflow.com/questions/37079595/two-column-jekyll-layout-separated-by-tags

标签

ruby

twitter-bootstrap

Jekyll

liquid