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

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

转载作者：行者123 更新时间：2023-11-27 23:11:15

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

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

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

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

附言。如果相关，我会使用 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>

最佳答案

您的代码段的问题是 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>

关于html - 有人可以解释我在尝试为我的网站创建语法突出显示时做错了什么吗？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58497713/

文章推荐： c++ - std::cin 中的运算符 >> 不匹配

文章推荐： c++ - OpenCV 分水岭 : 4 point connectivity

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

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