是否可以制作像markdown for html中的代码块？答案

【问题标题】：Is it possible to make code blocks like those in markdown for html?是否可以制作像markdown for html中的代码块？
【发布时间】：2021-05-20 13:39:44
【问题描述】：

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

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

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

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

任何指导将不胜感激。谢谢。

【问题讨论】：

您是在问如何在 Stack Overflow 问题中格式化代码，还是其他？
HTML 代码 is 如果您不使用内联代码标记，则会突出显示。使用编辑器工具栏中的代码按钮并创建一个完整的块。
@isherwood 是的，我明白你为什么感到困惑了。对不起。我正在尝试用 html 写一篇博客文章，我真的很想拥有 markdown 中的代码块功能。这清楚了我的问题吗？
您需要加载或编写一个 JavaScript 库来执行此操作。不过，您需要修改以提出更具体的问题。这还是很模糊的。见stackoverflow.com/help/how-to-ask。

标签： html markdown syntax-highlighting

【解决方案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>

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

【讨论】：

谢谢！我不知道他们有图书馆。这正是我一直在寻找的:)