在 Markdown 中有两列

Posted 2023-02-16

【中文标题】在 Markdown 中有两列

【英文标题】：Have two columns in Markdown

【发布时间】：2015-08-11 10:11:29

【问题描述】：

我想用good和bad编码示例编写一个编码标准规范文档。每个规则都应该有一个编号、一个描述和一个示例。

例如这里是规则1：

# Rule 1
Description for rule 1.

## Good
```c
int foo (void) 

    int i;

```

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

```

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

我如何编写一个 Markdown 兼容的代码，可以用语法着色来表示水平对齐的代码块？

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

我知道我可以在我的 Markdown 文档中使用 HTML，所以我可以编写如下内容：

<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 

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

【问题讨论】：

可能相关：***.com/editing-help#tables - 但仅适用于 SO 文档页面...

【参考方案1】：

你不能，至少不能使用纯 Markdown，因为它没有任何列的概念。如rules 中所述：

Markdown 的理念是让散文易于阅读、编写和编辑。 HTML 是一种发布格式； Markdown 是一种写作格式。因此，Markdown 的格式化语法只解决了可以用纯文本表达的问题。

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

事实上，最好的方法是将每个代码块包装在 <div> 中，并为每个 div 分配适当的类。但是，大多数 Markdown 解析器不会在原始 HTML 块中解析 Markdown。因此，您可能还需要在原始 HTML 中定义代码块。检查您的解析器的功能列表以找出答案。如果您无法定义自己的 CSS 以与 Markdown 分开使用（以设置 HTML 样式），您还需要在 HTML 中定义内联样式。 This question 包含一个很好的示例，说明它的外观。只需用适当的代码块替换 cmets。如果您必须在原始 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 中定义列的多种不同方式中的一种。不同的方法在不同的浏览器中可能有效，也可能无效。 YMMV。

【参考方案2】：

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

基本上，您通过 HTML 创建表格。 Markdown 和 HTML 不能很好地混合，但是如果你用空格包围 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>

【讨论】：

在 Typora 中不起作用，记录在案

【参考方案3】：

这是一个老问题，但如果人们从谷歌来到这里，上面的答案对于真正的 Markdown 来说是正确的，但是如果你想通过实现 kramdown 的东西来做到这一点，kramdown 确实支持混合 HTML 和 Markdown 语法，其使用 php Markdown Extra，如 kramdown 文档 here 中所述。 kramdown 只要求在您打算使用上述 HTML 的降价页面中，向markdown="1" 的包装 HTML 元素添加一个属性。

作为示例（以及两列降价的直接解决方案），这会导致两列内容。我使用 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  class="center-block" src="../img/folder/blah.jpg">
  </div>
</div>

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

另外请注意，我选择使用 html img 标签而不是 markdown 图片链接。您可以选择做同样的事情，因为您获得了一些额外的控制权。

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

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