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

Parse markdown to HTML and highlight code syntax

本文关键字：显示 代码 语法 记为 HTML      更新时间：2023-09-26

我下载了一个Markdown JS库，但我不知道它是否支持语法高亮显示，或者他支持的两种方言(gruber/maruku)中的任何一种，因为这是我第一次尝试在我的网页中添加Markdown支持。所以，我想知道如何集成语法高亮(如Alex Gorbatchev的JS库)来标记。

欢迎使用其他库。基本上，我的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>
带有方言的

或任何其他支持语法高亮显示的技巧(例如手动指定目标语言)。

我已经在我的网站上使用了markdown解析器来显示我创建的repos的README文件。它在<pre><code> code goes here </code></pre>

中包装代码块

它不使用高亮显示，但是您可以在调用

之后使用您提到的其他库:
$("code").addClass("brush: js") // assuming you want to highlight javascript

最后我使用了highlightjs

@A。OzanEkici解决方案有(小)的缺点，我失去了我的文本编辑器的markdown高亮显示(emacs的markdown-mode)，因为<pre>标签内的内容必须是反缩进的，在渲染页面中看不到缩进，@JaredBeach也不起作用，因为Alex Gorbatchev的库只工作在<pre>标签上，而不是在<pre><code>标签上，这是由markdown语法取代的。

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

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

这样做的好处是语言是自动检测的。

我使用Alex Gorbatchev的JS库来做这个，它工作得很好。

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

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

data是指你的contents, __yourFileType__可以是其中之一。

示例:class="brush: xml" , class="brush: txt"

之后你只需简单地调用它;

SyntaxHighlighter.highlight();

相关文章：