0

我正在努力为我的个人网站添加语法突出显示，我会在其中参考我学到的概念。

起初，为了记录我的笔记，我使用 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。

编辑：是的，我在 body: 结束之前也有来自 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 下载的。 ) _

<!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>
4

1 回答 1

0

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

例如：hljs-function语法用于hightlightjsnot in 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>

于 2019-10-22T06:41:39.423 回答