在Markdown中有两列

我想写一个编码标准规范文档，包括好的和坏的编码示例。每个规则都应该有一个数字、一个描述和一个示例

例如，规则1：

# Rule 1
Description for rule 1.

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

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

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

根据每个规则，我想生成一个带有全局目录的PDF或HTML页面

如何编写与标记兼容的代码，用语法着色表示水平对齐的代码块

像这样（这是一张图片）：

我知道我可以在我的降价文档中使用HTML，因此我可以编写如下内容：

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

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

---

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

你不能，至少不能使用纯标记，因为它没有任何列的概念。正如报告中所述：

降价的想法是使阅读、写作和编辑散文变得容易。HTML是一种发布格式；Markdown是一种书写格式。因此，Markdown的格式语法只解决可以用纯文本表达的问题

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

事实上，最好的方法是将每个代码块包装在

中，并为每个div分配适当的类。但是，大多数标记解析器不会在原始HTML块内解析标记。因此，您可能还需要在原始HTML中定义代码块。检查您的解析器的特性列表以了解。如果您无法定义自己的CSS以与标记分开使用（为HTML设置样式），则还需要在HTML中内联定义样式。包括一个很好的示例，它可能看起来像什么。只需用适当的代码块替换注释即可。如果必须在原始HTML中定义代码块，它们将如下所示：

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

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

intfoo（无效）
{
int i；
}

因此，在所有（大多数？）标记解析器中都能正常工作的最终文档如下所示：

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

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

#规则1
规则1的说明。
好
int-foo（无效）
{
int i；
}

坏的 int-foo（无效）{ int i； }

---

请注意，这使用了CSS中定义列的多种不同方法之一。不同的方法可能在不同的浏览器中工作，也可能不工作。YMMV.

这是一个老问题，但如果有人从谷歌来到这里，上面的答案对于纯真正的标记是正确的，但是如果你想通过正在实施的东西来实现这一点，kramdown确实支持混合HTML和标记语法，正如kramdown文档中提到的那样。kramdown只要求在您打算使用上述HTML的标记页面中，向

markdown=“1”

的包装HTML元素添加一个属性

例如（和两列标记的直接解决方案），这将导致两列内容。我使用Bootstrap来处理列宽和图像居中，但是对于这些主题，您可以采取任何方法

一些文本。

小心缩进。在上面的代码中，我特别没有缩进多个级别。我相信kramdown在默认情况下会将双缩进代码解释为引号块（如果我没记错的话，这是一般降价的标准）

还要注意，我选择使用html

img

标记，而不是标记图像链接。你可以选择做同样的事情，因为你获得了一点额外的控制

而且，如果您是新手或不熟悉引导，您可以通过更改上面代码中显示的

8

和/或

4

来更改相对列宽，只需确保这两个数字的总和始终为12即可

---

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

虽然这不适用于所有的降价，但我还是通过GitLab、Github和mdBook实现了这一点。我想我会分享这个答案

基本上，您可以通过HTML创建表。标记和HTML不能很好地混合，但是如果用空格包围标记，有时可以识别标记

好
坏的
```c++
int foo（）{
int结果=4；
返回结果；
}
```
```c++
int foo（）{
int x=4；
返回x；
}
```

可能相关：-但仅适用于SO文档页…此技巧非常巧妙！谢谢