Question

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

欢迎任何其他图书馆。基本上，我的Markdown代码段以.md文件加载：

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

它包含代码片段以及常见的Markdown文本。我需要一个JS库来做类似的事情：

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

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

Answer 1

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

中的代码块

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

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

Answer 2

最后我使用了highlightjs。

由于markdown-mode标签内的内容，@ A.OzanEkici解决方案有（小）缺点，我失去了我的文本编辑器（emacs＆＃39; <pre>）的降价高亮显示。必须是不缩进才能看不到渲染页面中的缩进，而且@JaredBeach也不起作用，因为Alex Gorbatchev的库只适用于<pre>标签，而不是<pre><code>标记，由markdown语法替换。

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

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

   hljs.initHighlightingOnLoad();
</script>

这就是自动检测语言的冒险行为。

Answer 3

我使用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();

解析HTML的标记并突出显示代码语法

3 个答案: