是否可以像 html 的 markdown 中那样制作代码块？

Question

Markdown 支持非常有用的代码块。通过指定我们想要的语言（如 ```cpp），我们也可以自动高亮颜色语法。示例如下。

#include <iostream>
int main(){
    printf("hello");
}

所以，我的问题是如何在 html 文件上执行此操作？

我已经知道你可以制作代码块，用这个 -> <pre><code> write here </code></pre>，但我想要语法高亮功能。

如有任何指导，我们将不胜感激。谢谢

Answer 1

您可能希望使用像 highlight.js

这样的库

否则，您必须将每个关键字、变量、函数名称、运算符等包装在它们自己的 span 标记中并应用类，为每种支持的语言中的每个不同事物创建颜色模式。
除了使用库（或为了好玩而创建自己的库）之外，这相当乏味。

仅供参考：有没有想过右键单击并检查示例的元素？您的示例导致 HTML:

<pre class="lang-cpp s-code-block hljs"><code><span class="hljs-meta">#<span class="hljs-meta-keyword">include</span> <span class="hljs-meta-string">&lt;iostream&gt;</span></span>
<span class="hljs-function"><span class="hljs-keyword">int</span> <span class="hljs-title">main</span><span class="hljs-params">()</span></span>{
    <span class="hljs-built_in">printf</span>(<span class="hljs-string">"hello"</span>);
}
</code></pre>

如您所见，自己创建会非常乏味，因此请为此使用一个库。

是否可以像 html 的 markdown 中那样制作代码块？

Is it possible to make code blocks like those in markdown for html?

html

markdown

syntax-highlighting