18

我正在尝试使用 PrismJS 作为我 blogspot 博客的语法荧光笔。在使用 Syntax Highlighter 遇到问题后，我想我会尝试一下 prism。

我的代码如下所示：

<pre class="line-numbers language-markup">
    <code>
        <b:if cond='data:blog.url == "http://domain.com/p/about.html"'>
            <style type="text/css">
                font-size: 22px;
            </style>
        </b:if>
    </code>
</pre>

我在标签之前包含了 prismjs 文件</head>。

CSS 工作正常，我的 Chrome 控制台中没有错误，但脚本没有显示任何标记。

我的网站上有一个带有完全相同代码的 jsFiddle，即使我的网站有，它也没有显示行号。http://jsfiddle.net/fyqnz/

网站示例：http ://www.xarpixels.com/2013/05/bloggers-conditional-statements-legacy.html

知道为什么这不起作用吗？

4

5 回答 5

44

玩了一下这个插件，发现用 > 和 < 替换 < 和 > 有点痛苦。如果你用脚本标签包装你的 html 有什么价值，一切都会突出显示。因为无类型脚本标记中的 html 不能很好地与 Visual Studio 配合使用，所以我给它一种 prism-html-markup。

<pre>
    <code class="language-markup">
        <script type="prism-html-markup">
            <h1 class="foo">h1. Heading 1</h1>
            <h2>h2. Heading 2</h2>
            <h3>h3. Heading 3</h3>
            <h4>h4. Heading 4</h4>
            <h5>h5. Heading 5</h5>
            <h6>h6. Heading 6</h6>
        </script>
    </code>
</pre>

希望这可以帮助！

于 2014-12-16T01:09:25.900 回答
14

class="language-*"需要继续元素，而<code>不是<pre>元素。我一开始也犯了这个错误。

更新了正确的信息

看来 JS Fiddle 不喜欢 Prism。在 CodePen 和我的机器上本地工作正常：http: //codepen.io/anon/pen/xmwji。Prism 使用正则表达式来识别要突出显示的部分。确保正确转义代码。开始标签（<符号）应写为&lt;，结束标签（符号）应写>为&gt;。

于 2013-08-23T01:45:35.290 回答
4

您可以使用未转义标记插件

这是它的工作原理：

<script type="text/plain" class="language-markup">
   <p>Example</p>
</script>

要忽略第一个和最后一个返回，我建议使用normalize whitespace plugin。

于 2018-01-09T22:06:09.577 回答
3

在“代码”之间添加额外的“xmp”标签，并将您的 html 代码放在“xmp”标签内。为我工作。

<pre class="language-markup line-numbers">
<code>
<xmp>
<h1>Test</h1>
</xmp>
</code>
</pre>

于 2016-11-11T09:33:59.167 回答
0

我发现 Prism 仅在您单独导入每种语言时才有效：

import Prism from 'prismjs';

// Languages must be imported individually,
// to support syntax highlighting
import 'prismjs/components/prism-bash';
import 'prismjs/components/prism-css';
import 'prismjs/components/prism-csv';
import 'prismjs/components/prism-docker';
import 'prismjs/components/prism-git';
import 'prismjs/components/prism-json';
import 'prismjs/components/prism-jsx';
import 'prismjs/components/prism-markdown';
import 'prismjs/components/prism-markup';
import 'prismjs/components/prism-mongodb';
import 'prismjs/components/prism-python';
import 'prismjs/components/prism-regex';
import 'prismjs/components/prism-sql';
import 'prismjs/components/prism-typescript';
import 'prismjs/components/prism-yaml';
于 2021-07-02T21:23:30.437 回答