在 Markdown 中有两列

Question

我想用 good 和 bad 编码示例编写编码标准规范文档。每条规则都应该有编号、说明和示例。

例如这里是规则 1：

# Rule 1
Description for rule 1.

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

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

根据每个规则，我想生成一个 PDF 或一个包含全局 table 内容的 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

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

Answer 1

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

The idea for Markdown is to make it easy to read, write, and edit prose. HTML is a publishing format; Markdown is a writing format. Thus, Markdown’s formatting syntax only addresses issues that can be conveyed in plain text.

For any markup that is not covered by Markdown’s syntax, you simply use HTML itself.

事实上，最好的方法是将每个代码块包裹在一个 <div> 中，并为每个 div 分配适当的 class。但是，大多数 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 中定义列的多种不同方式之一。不同的方法在不同的浏览器中可能有效，也可能无效。 YMMV.

Answer 2

这是一个老问题，但如果人们从 Google 来到这里，上面的答案对于真正的 Markdown 是正确的，但是如果你想用或通过实现 kramdown, kramdown does support mixed HTML and Markdown syntaxes by its usage of PHP Markdown Extra as noted in kramdown docs here。 kramdown 只需要在你打算使用 said 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 标签而不是降价图片 link。你可以选择做同样的事情，因为你获得了一些额外的控制权。

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

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

Answer 3

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

基本上，您通过 HTML 创建 table。 Markdown 和 HTML 不能很好地混合，但是如果你 用白色-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 4

更新了答案，供正在寻找的人参考。您可以使用以下格式创建 multi-column 布局。比嵌入 HTML 等简单得多..

列上没有填充，因此为此创建一个空列可能会有所帮助。

示例：

```{r, fig.height=4, fig.width=5, warning=FALSE, message=FALSE}
library(ggthemes)
library(kableExtra)
library(ggplot2)
library(dplyr)
data("mtcars")
```
:::::::::::::: {.columns}
::: {.column width="30%"}

```{r}
mtcars %>% 
    select(disp, mpg) %>% 
    sample_n(10) %>% 
    kbl() %>% 
    kable_styling()
```

:::
::: {.column width="5%"}

\

:::
::: {.column width="65%"}


\

```{r, fig.height=4, fig.width=7}
mtcars %>% 
    ggplot(aes(x=disp, y=mpg)) +
    geom_point() +
    theme_excel_new()
```

:::
::::::::::::::

给出以下输出：

Answer 5

使用 HTML 和 ```，您可以同时使用列和语法着色的强大功能：

<div style="text-align: center; display: grid; grid-template-columns: 1fr 1fr;">
  <div>parent

```html
<component>content</component>
`` `

  </div>
  <div>
child

```html
<slot>fallback content</slot>
`` `

  </div>
</div>

Answer 6

使用 Latex multicol 的非 HTML 方法如下（受 this answer 启发）


    ---
    header-includes:
        - \usepackage{multicol}
        - \newcommand{\hideFromPandoc}[1]{#1}
        - \hideFromPandoc{
            \let\Begin\begin
            \let\End\end
          }
    ---
    
    # Rule 1
    Description for rule 1.
    
    \Begin{multicols}{2}
    ## Good
    ```c
    int foo (void) 
    {
        int i;
    }
    ```
    
    ## Bad
    ```c
    int foo (void) {
        int i;
    }
    ```
    \End{multicols}

使用 pandoc

正确导出

此外，如果您 multicols 没有正确划分列（如果有嵌套子标题，则可能会发生），您可能需要使用 \Begin{minipage} 和 \End{minipage}

在 Markdown 中有两列

Have two columns in Markdown

markdown

multiple-columns