将 markdown 解析为 HTML 并突出显示代码语法答案

【问题标题】：Parse markdown to HTML and highlight code syntax将 markdown 解析为 HTML 并突出显示代码语法
【发布时间】：2017-03-28 04:09:23
【问题描述】：

我已经下载了Markdown JS library，但我不知道它是否支持语法高亮，或者他支持的两种方言（gruber/maruku）中的任何一种，因为这是我第一次尝试在我的网页中添加降价支持.所以，我想知道如何将语法荧光笔（如Alex Gorbatchev's JS library）集成到markdown。

欢迎任何其他库。基本上，我的 Markdown sn-ps 是在 .md 以这种方式加载的文件中：

<div class="markdown-f">
   <?= file_get_contents("file.md"); ?>
</div>

它包含代码 sn-ps 以及常见的 Markdown 文本。我需要一个 JS 库才能执行以下操作：

<script>
   $('.markdown-f').each(function() {
        var contents = $(this).text();
        $(this).empty();
        contents = markdown.toHTML(contents);
        $(this).text(contents);
   });
</script>

使用方言或任何其他支持语法突出显示的hacktrick（例如，手动指定目标语言）。

【问题讨论】：

标签： javascript jquery markdown syntax-highlighting

【解决方案1】：

我使用Alex Gorbatchev's JS library 来执行此操作，效果很好。

首先你应该像这样创建一个<pre> 元素；

<pre class="brush: __yourFileType__"> + data + </pre>

data 指的是你的contents，__yourFileType__ 可以是one of these。

例如：class="brush: xml" , class="brush: txt"

之后你只需调用它；

SyntaxHighlighter.highlight();

【讨论】：

但是我可以在 Markdown 文本中插入 html 元素吗？在那种情况下，我不能使用缩进语法来指定代码块，不是吗？
当然可以插入html元素。 @Peregring-lk
@Peregring-lk 你可以看到一个例子here。

【解决方案2】：

我在my website 上使用了markdown 解析器来显示我创建的repos 的README 文件。它将代码块包装在<pre><code> code goes here </code></pre>

它不使用突出显示，但您可以使用调用后提到的其他库：

$("code").addClass("brush: js") // assuming you want to highlight javascript

【讨论】：

如果我有不同语言的不同sn-ps怎么办？
那么添加类的javascript必须根据不同的markdown文件进行定制。
例如：$($("code")[0]).addClass("brush: js"); $($("code")[1]).addClass("brush: py");

【解决方案3】：

最后我使用了highlightjs。

@A.OzanEkici 解决方案有一个（小）缺点，我失去了我的文本编辑器（emacs 的markdown-mode）的降价高亮显示，因为<pre> 标记内的内容必须不缩进'看不到渲染页面中的缩进，@JaredBeach 也不起作用，因为 Alex Gorbatchev 的库仅适用于 <pre> 标记，而不适用于 <pre><code> 标记，后者被降价语法所取代。

所以，我的解决方案很简单：

<script>
   $('.markdown-f').each(function(){
      $(this).html(markdown.toHTML($(this).text()));
   });

   hljs.initHighlightingOnLoad();
</script>

这具有自动检测语言的优点。

【讨论】：