Question

我目前正在制作一个Jekyll博客，我想把我的降价文件放在这种格式中：

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

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

    </div>
</div>

我希望我的代码块放在另一列中的一列和其他所有内容（文本，标题等）中，以便我对我的代码进行并排解释。

有没有办法做到这一点？在这方面，Markdown和Liquid模板引擎似乎非常严格。

谢谢！

Answer 1

如果我理解，你想并肩，液体/ jekyll代码和结果代码。您使用twitter bootstrap作为css框架。

为了指示kramdown解析html块标记中的markdown，在_config.yml中添加：

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

在marwdown文件中，您现在可以使用{％raw％} {％endraw％}标记来指示不要解析的液体，而是“按原样”打印代码。

<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>

注意：没有缩进。这是因为通过kramdown将四个空格缩进视为代码块。它将代码包装在code标记中。不酷。

Answer 2

通过将Twitter Bootstrap与模板引擎相结合，您可以获得所需的结果：

<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>

或者通过在html块中启用降价处理来内联编写它们：

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

在markdown文件中使用它：

<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>

有关降价语法的信息： https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet 有关杰基尔降价处理器的信息：http://kramdown.gettalong.org/documentation.html

Answer 3

答案是是。这很简单。将float:left添加到段落和代码块中。在p＆＃39;上使用clear:left。确保有足够的空间容纳两个元素彼此相邻。将overflow:auto添加到容器中。像这样：http://codepen.io/anon/pen/grqRPr。

您的Markdown文件（index.md）：

---
layout: default
---

paragraph goes here

```` code goes here ````

paragraph goes here

```` code goes here ````

您的CSS文件（style.css）：

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

您的布局文件（default.html）：

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

两列Jekyll布局，用标签分隔？

3 个答案: