有人可以解释我在尝试为我的网站创建语法突出显示时做错了什么吗？

Question

我非常努力地为我的个人网站添加语法高亮显示，我会在其中回顾我学到的概念。

起初，为了记录我的笔记，我使用 Markdown，因为它很容易记笔记。但是随着我越来越多地探索，我发现我想要的东西比 Markdown 能做的更多，并且意识到我想做我的网站。

基本上，我使用 pandoc 将我非常大的 .md 文件转换为 .html，我想我或多或少留下了一团糟。当然没有 CSS，有一段时间我真的环顾四周想弄清楚如何使 html 看起来很棒。我想我会从我的代码片段的语法高亮开始，这些代码片段被转换成类似的东西：

<p>Hello World in C</p>
<pre><code class="lang-c"><span class="hljs-meta">#<span class="hljs-meta-keyword">include</span> <span class="hljs-meta-string">&lt;stdio.h&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 World!\n"</span>);
    <span class="hljs-keyword">return</span> <span class="hljs-number">0</span>;
}
</code></pre>

所以至少 pandoc 似乎理解我在 markdown 中编写代码，因为我们有 <code class="lang-c">（虽然它看起来仍然很难看，我不知道发生了什么事的一半）。

然后我看到了这个博客： https://www.taniarascia.com/adding-syntax-highlighting-to-code-snippets/ 并按照以下说明进行操作：

<head>
    <link
    rel="stylesheet"
    href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.5.0/themes/prism.min.css"
    />
    <link rel = "stylesheet"
    type = "text/css"
    href = "new.css" />
</head>

其中 new.css 是：https://github.com/taniarascia/new-moon/blob/master/docs/css/main.css

但现在一切似乎都乱七八糟，不美好。最明显的是，我的代码根本没有突出显示语法：

如何使我的网站更漂亮？老实说，我有点盲目地听从我在互联网上找到的建议，这可能不是最有效的，但我不知道还有什么地方可以学习这种东西。

PS。如果相关，我使用 Vim。

编辑：是的，我还有 prism 的 js 文件，就在正文结尾之前：<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.5.0/prism.min.js"></script>.

编辑 2：如果您想尝试重现问题，这里有一个最小示例（记住 new.css 是我从 https://github.com/taniarascia/new-moon/blob/master/docs/css/main.css 下载的）

<!DOCTYPE html>
<html>

    <head>
        <link
        rel="stylesheet"
        href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.5.0/themes/prism.min.css"
        />
        <link rel = "stylesheet"
        type = "text/css"
        href = "new.css" />
    </head>

    <body>
        <h1 id="hello-world">Hello World</h1>
        <p>Hello World in C</p>
        <pre><code class="lang-c"><span class="hljs-meta">#<span class="hljs-meta-keyword">include</span> <span class="hljs-meta-string">&lt;stdio.h&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 World!\n"</span>);
    <span class="hljs-keyword">return</span> <span class="hljs-number">0</span>;
}
        </code></pre>

        <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.5.0/prism.min.js"></script>
    </body>
</html>

Answer 1

你的代码片段的问题是 HTML 已经符合，语法是 hightlight.js 而不是 prism.js。让 PrismJS 编译您的代码片段，而不是在 .md 文件期间将其转换为 .html 文件。

例如：hljs-function 语法用于 hightlightjs 而不是 prismjs.

code[class*="language-"] > script {
  display: block !important;
}

<!-- Prism theme -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.8.4/themes/prism.min.css">
<!-- Prism main -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.8.4/prism.min.js"></script>
<!-- Prism languages -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.8.4/components/prism-c.min.js"></script>

<pre class="language-c">
<code>
<script type="text/plain">
#include <stdio.h>
int main () {
    printf("Hello World!\n");
    return 0;
}
</script>
</code>
</pre>

有人可以解释我在尝试为我的网站创建语法突出显示时做错了什么吗？

Could someone explain what I am doing wrong in trying to create syntax highlighting for my website?

html

css

highlight.js

prismjs