Question

我正在尝试将PrismJS用作我的blogspot博客的语法高亮显示器。在使用Syntax Highlighter遇到麻烦之后，我想我会尝试一下棱镜。

我的代码如下：

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

我在</head>标记之前添加了prismjs文件。

CSS有效，我的Chrome控制台没有错误，但脚本没有显示标记。

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

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

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

Answer 1

有点玩这个插件并发现替换＆lt;和＆gt;用＆gt;和＆lt;有点痛苦。如果你用一个脚本标签包装你的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>

希望这有帮助！

Answer 2

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

更新了正确的信息

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

Answer 3

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

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

Answer 4

您可以使用unescaped-markup plugin

这是它的工作原理：

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

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

Answer 5

我发现 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';

标记没有出现使用棱镜JS

5 个答案: