logo标签列表

Github Markdown - 渲染XML和HTML代码块 - kramdown vs redcarpet

githubmarkdownjekyllredcarpetkramdown
4
我在我的Git网站上遇到了一些不寻常的错误。
注意：我正在使用Kramdown + highlight.js来突出显示代码。
以下是我正在处理的教程。在这个教程中，我需要在代码块中呈现类似于XML的EML。我正在使用kramdown。 我还想在代码块中呈现HTML - 例如，我需要一个代码块来解释如何添加包含文件:
{% include _toc.html %}

以下是需要翻译的内容：

以下是一个例子 - 下面这个教程： http://neoninc.github.io/NEON-DataSkills-Lesson-Development/R/EML/

Git网址 https://github.com/NEONInc/NEON-DataSkills-Lesson-Development/blob/gh-pages/_posts/EML/2015-12-12-Intro-to-EML.md

很奇怪，JEKYLL构建页面时会运行包含XML和HTML的代码块。

我已经尝试过：

<code>
<creator>
      <individualName>
        <givenName>Emery</givenName>
        <surName>Boose</surName>
      </individualName>
</creator>
</code>

这会在页面上呈现出奇怪的闭合标签</code>。如果我不使用代码标签，那么Jekyll会尝试解析XML。
<pre><code class="xml">
<creator>
          <individualName>
            <givenName>Emery</givenName>
            <surName>Boose</surName>
          </individualName>
</creator>
</code></pre>

这仍然尝试将<code>和</code>解析为HTML标签。

我已经尝试切换到redcarpet。然而，redcarpet会破坏我的突破框，我按以下方式进行编码：{: .notice }来对div应用样式。

<i class="fa fa-star"></i> **Data Tip:**  To figure out the full slot string, 
in `RStudio` we can use Tab Complete as we type.

最终 -- 我的工作流程是从RMD到md进行编织，因此在每个代码块（pre和code）中添加自定义代码时会出现问题。

简而言之 - 我很难找到一个解决方案，它：

  1. 允许使用HTML/XML的代码块
  2. 允许我对我的拆分div应用class/id。 {: .notice }

非常感谢您对此问题的任何反馈/指导。 Leah

这是我对Jekyll的一个烦恼。通过在Markdown文档上运行模板，您无法在文档中包含模板示例。您尝试过转义模板示例吗？我相信您可以通过在raw标签中包装相关部分来实现。 - Waylan
我有 - 我刚刚添加了更多的细节@Waylan。我还使用highlights.js进行高亮显示。如果我能弄清如何将类应用于段落，我也可以考虑切换到redcarpet！ - Leah Wasser
难道你不只需要删除 code 标签并缩进 creator 标签吗？ - matt
嗨@matt，我希望能够做到这一点。当我这样做时，Jekyll会尝试将创建者标签呈现为HTML，例如有和没有代码标记的示例：http://neoninc.github.io/NEON-DataSkills-Lesson-Development/R/EML/。 - Leah Wasser
如果该链接对应于https://raw.githubusercontent.com/NEONInc/NEON-DataSkills-Lesson-Development/3f95094ee2cd8845dce5262f2e7638b26027b33e/_posts/EML/2015-12-12-Intro-to-EML.md，则它不会缩进。它应该看起来像https://gist.githubusercontent.com/mattwildig/884cdaa8244dffa10135/raw/fa127dee2d0bfac611321a08c74d74f51c7dd0ef/foo.md（请参见https://gist.github.com/mattwildig/884cdaa8244dffa10135以查看呈现效果）。 - matt
3个回答
12

如果您想在代码块中表示XML/HTML，有几种方法可以做到。

第一种最基本的方法（简单易行，并且适用于所有实现）是将代码块至少缩进四个空格：

    <creator>
        <individualName>
            <givenName>Emery</givenName>
            <surName>Boose</surName>
        </individualName>
    </creator>

请注意，未使用任何<pre>或<code>标记。 在大多数实现中，它将被渲染为：

<pre><code>&lt;creator&gt;
    &lt;individualName&gt;
        &lt;givenName&gt;Emery&lt;/givenName&gt;
        &lt;surName&gt;Boose&lt;/surName&gt;
    &lt;/individualName&gt;
&lt;/creator&gt;
</code></pre>

注意XML已经被转义（尖括号被替换为HTML实体），这样浏览器就不会将其解释为HTML。但是，它将正确地显示给读者。

由于Highligh.js具有自动语言检测功能，这对大多数代码块应该足够了。如果您担心Highlight.js会被转义的XML所困扰，请不要担心，Highlight.js实际上希望获得像这样的转义代码。如果使用未转义的XML，则更可能被混淆。但是，如果您想显式定义语言，则仍然有几个选项。

要使用原始HTML创建自己的代码块（例如为语法高亮分配类），则需要手动转义XML。直接将以下文本插入到Markdown文档中：

<pre><code class="xml">&lt;creator&gt;
    &lt;individualName&gt;
        &lt;givenName&gt;Emery&lt;/givenName&gt;
        &lt;surName&gt;Boose&lt;/surName&gt;
    &lt;/individualName&gt;
&lt;/creator&gt;
</code></pre>

注意，在这种情况下，代码块没有缩进，因为它是原始HTML并应按原样解释。当然，每次手动转义XML并不是很方便。

作为替代方案，一些Markdown实现包括了一个称为“围栏代码块”的附加组件，它们不需要缩进，但允许对代码块进行类的分配，并提供自动转义。事实证明，Kramdown 支持此功能。要使用它，请执行以下操作：

~~~ xml
<creator>
    <individualName>
        <givenName>Emery</givenName>
        <surName>Boose</surName>
    </individualName>
</creator>
~~~

而Kramdown将输出这个:

<pre><code class="language-xml">&lt;creator&gt;
    &lt;individualName&gt;
        &lt;givenName&gt;Emery&lt;/givenName&gt;
        &lt;surName&gt;Boose&lt;/surName&gt;
    &lt;/individualName&gt;
&lt;/creator&gt;
</code></pre>

请注意，XML已经被适当地转义，并分配了一个标识语言的类。虽然Kramdown将language-附加到类名中，但Highlight.js也可以很好地理解这一点（事实上，这是HTML5规范推荐的格式）。正如其文档所述：

类名称还可以以language-或lang-为前缀。

顺便提一句，起初我认为Krandown不支持“栅栏式代码块”，但那是因为我尝试了GitHub流行的三个反引号语法（```而不是~~~）。但是，Kramdown只支持旧的、最初在Markdown邮件列表中讨论并由Python Markdown和PHP Markdown Extra同时引入的波浪号语法。据我所知，Kramdown是唯一仍然只使用旧的波浪线语法的实现（例如，现代版本的Python和PHP实现都支持波浪线和反引号）。

5

只需要添加代码块关键字(xml,cpp等)即可完成此操作：

```xml
<creator>
      <individualName>
        <givenName>Emery</givenName>
        <surName>Boose</surName>
      </individualName>
</creator>
```
0
你好 @waylan 和 @David Jacquel。我正在使用 highlights.js 进行代码高亮。我尝试添加： <pre><code class="xml"> 来包装我的代码。它有点起作用，但仍然将标签解析为 HTML 而不是像示例中一样呈现为代码块。我还从 Rmd 格式编写这些 .md 文件以将其转换为 knitr SO，手动添加代码以确保其呈现为代码块是有问题的。还有其他想法吗？ - Leah Wasser
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接