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兼容代码，可以用语法着色表示水平对齐的代码块？

像这样： enter image description here

或者这个：

          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，因为它没有任何列的概念。正如rules：

中所述

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

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

实际上，最好的方法是将每个代码块包含在<div>中，并为每个div分配适当的类。但是，大多数Markdown解析器不会在原始HTML块中解析Markdown。因此，您可能还需要在原始HTML中定义代码块。检查解析器的功能列表以查找。如果您无法将自己的CSS定义为与Markdown分开使用（以设置HTML样式），则还需要在HTML中定义内联样式。 This question包含了一个很好的样本。只需用适当的代码块替换注释即可。如果必须在原始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。

Answer 2

虽然这不适用于所有Markdown，但我可以将其与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>

Answer 3

这是一个古老的问题，但是如果有人来自Google，以上答案对于纯正的Markdown是正确的，但是如果您希望通过实施kramdown的方法或通过实现PHP Markdown Extra的方法来执行此操作，请kramdown < em>确实通过使用here的来支持HTML和Markdown混合语法，如kramdown文档中所述。 kramdown只需要在打算使用上述HTML的markdown页面中，将属性添加到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 height="600px" class="center-block" src="../img/folder/blah.jpg">
  </div>
</div>

提防缩进。我特别没有在上述代码中缩进多个级别。我相信默认情况下，kramdown会将双缩进代码解释为引号块（如果我没记错的话，这通常是Markdown的标准）。

还要注意，我选择使用html img标签而不是markdown图片链接。您可以选择执行相同的操作，因为您可以获得更多的控制权。

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

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

Markdown中的两列代码

3 个答案: