Markdown中的两列代码

Question

我想写一个文档来解释编码标准的好坏编码示例.每个规则都有一个描述和一个例子.

例如,这里是规则1:

# Rule 1
Description for rule 1.

## Good
```c
int foo (void) 
{
    int i;
}
```

## Bad
```c
int foo (void) {
    int i;
}
```

根据每个单独的规则,我想生成带有全局目录的PDF或HTML页面.

如何编写可以表示具有语法着色的水平对齐代码块的Markdown兼容代码？

像这样:

或这个:

          Good               Not Good
.---------------------+--------------------.
| int foo (void)      | int foo (void) {   |
| {                   |    int i;          |
|    int i;           | }                  |
| }                   |                    |
'---------------------+--------------------'

我知道我可以将诸如HTML标签之类的元数据添加到Markdown文档中.所以我也许可以这样写:

<good>
```c
int foo (void) 
{
    int i;
}
```
</good>
<bad>
```c
int foo (void) {
    int i;
}
```
</bad>

然后处理数据(我还是不知道怎么做)

markdown -> own-tags-processing -> LaTeX -> pdf
markdown -> own-tags-processing -> HTML 

有没有更好的方法水平对齐两个代码块？

Answer 1

你不能,至少不能使用纯Markdown,因为它没有任何列的概念.如规则中所述:

Markdown的想法是让阅读,编写和编辑散文变得容易.HTML是一种发布格式; Markdown是一种写作形式.因此,Markdown的格式化语法仅解决可以用纯文本传达的问题.

对于Markdown语法未涵盖的任何标记,您只需使用HTML本身.

事实上,最好的方法是将每个代码块包含在一个<div>分配给每个div的相应类中.但是,大多数Markdown解析器不会在原始HTML块中解析Markdown.因此,您可能还需要在原始HTML中定义代码块.检查解析器的功能列表以查找.如果您无法将自己的CSS定义为与Markdown分开使用(以设置HTML样式),则还需要在HTML中定义内联样式.这个问题包括一个很好的样本.只需用适当的代码块替换注释即可.如果必须在原始HTML中定义代码块,它们将如下所示:

<pre><code class="language-c">int foo (void) 
{
    int i;
}
</code></pre>

那么,肯定适用于所有(大多数？)Markdown解析器的最终文档看起来像这样:

# Rule 1
Description for rule 1.

<div style="-webkit-column-count: 2; -moz-column-count: 2; column-count: 2; -webkit-column-rule: 1px dotted #e0e0e0; -moz-column-rule: 1px dotted #e0e0e0; column-rule: 1px dotted #e0e0e0;">
    <div style="display: inline-block;">
        <h2>Good</h2>
        <pre><code class="language-c">int foo (void) 
{
    int i;
}
</code></pre>
    </div>
    <div style="display: inline-block;">
        <h2>Bad</h2>
        <pre><code class="language-c">int foo (void) {
    int i;
}
</code></pre>
    </div>
</div>

请注意,它使用CSS中定义列的许多不同方法之一.不同的方法可能会或可能不会在不同的浏览器中工作.因人而异.

Answer 2

虽然这不适用于所有降价，但我让它与 GitLab、Github 和 mdBook 一起使用。我想我会分享这个答案。

基本上，您可以通过 HTML 创建表格。Markdown 和 HTML 不能很好地混合，但如果你用 white-space将 Markdown包围起来，有时可以识别出Markdown 。

https://docs.gitlab.com/ee/user/markdown.html#inline-html

<table>
<tr>
<th> Good </th>
<th> Bad </th>
</tr>
<tr>
<td>

```c++
int foo() {
    int result = 4;
    return result;
}
```

</td>
<td>

```c++
int foo() { 
    int x = 4;
    return x;
}
```

</td>
</tr>
</table>

Answer 3

这是一个老问题，但如果人们从 Google 来到这里，上面的答案对于简单的真正 Markdown 是正确的，但是如果您希望使用或通过实现kramdown 的东西来做到这一点，kramdown确实支持混合 HTML 和 Markdown 语法它的使用PHP降价外，如kramdown文档指出这里。kramdown 只要求在您打算使用所述 HTML 的降价页面中，向 .html 的包装 HTML 元素添加一个属性markdown="1"。

作为一个例子（和两列降价的直接解决方案），这会导致两列内容。我使用 Bootstrap 来处理列宽和图像居中，但您可以对这些主题采取任何方法。

<div class="row">
  <div class="col-md-8" markdown="1">
  Some text.
  </div>
  <div class="col-md-4" markdown="1">
  <!-- ![Alt Text](../img/folder/blah.jpg) -->
  <img height="600px" class="center-block" src="../img/folder/blah.jpg">
  </div>
</div>

小心缩进。我特别没有在上面的代码中缩进超过一级。我相信默认情况下 kramdown 会将双缩进代码解释为引用块（如果我没记错的话，这通常是 Markdown 的标准）。

另请注意，我选择使用 htmlimg标记而不是降价图像链接。您可以选择做同样的事情，因为您获得了一些额外的控制权。

而且，如果您是新手或不熟悉/不熟悉 Bootstrap，您可以通过更改8和/或4上面代码中显示的来更改相对列宽，只需确保这两个数字的总和始终为 12。

如上所述，这仅适用于实现 kramdown 引擎的降价消费者（这对 Jekyll 用户非常有用）。