在Markdown中有两列 [英] Have two columns in Markdown

问题描述

我想写一个带有 good 和 bad 编码示例的编码标准规范文档.每条规则应有一个数字，一个描述和一个示例.

I would like to write a coding standard specification document with good and bad coding examples. Each rule should have a number, a description and an example.

例如，这是规则1:

# Rule 1
Description for rule 1.

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

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

根据每条规则，我想生成一个包含全局目录的PDF或HTML页面.

From each rule, I would like to generate a PDF or an HTML page with a global table of contents.

如何编写Markdown兼容代码，以句法着色表示水平对齐的代码块?

How can I write a Markdown compatible code that can represent horizontally aligned code blocks with syntactic coloring?

喜欢这个(这是图片):

Like this (this is an image):

我知道我可以在Markdown文档中使用HTML，因此我可以编写如下内容:

I know that I could use HTML inside my Markdown document, so I might be able to write something like this:

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

然后处理数据(我仍然不知道如何处理)

And process the data afterwards (I still don't know how)

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

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

Is there a better way to horizontally align two blocks of code horizontally?

推荐答案

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

You can't, at least not with pure Markdown as it doesn't have any concept of columns. As explained in the rules:

Markdown的想法是使其易于阅读，编写和编辑散文. HTML是一种发布格式； Markdown是一种书写格式.因此，Markdown的格式语法仅解决了可以以纯文本形式传达的问题.

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.

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

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

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

In fact, the best way would be to have each code block wrapped in a <div> with the appropriate class assigned to each div. However, most Markdown parsers do not parse Markdown inside a raw HTML block. Therefore, you may need to also define the code block in raw HTML as well. Check your parser's list of features to find out. In the event you are not able to define your own CSS to use separately from the Markdown (to style the HTML), you will also need to define the styles inline in the HTML. This question includes a nice sample of what that might look like. Just replace the comments with the appropriate code blocks. If you have to define your code blocks in raw HTML, they would look like this:

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

因此，确保在所有(大多数?)Markdown解析器中都可以正常工作的最终文档如下所示:

So, the final document that is sure to work in all (most?) Markdown parsers would look like this:

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

Note that that uses one of many different ways of defining columns in CSS. Differant methods may or may not work in different browsers. YMMV.

这篇关于在Markdown中有两列的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！