我正在尝试使用PrismJS作为我的blogspot博客的语法高亮。在遇到语法荧光笔的问题后，我想我应该试试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>

我已经在& lt/head & gt；标签。

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

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

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

知道为什么这不管用吗？

对这个插件做了一点测试，发现替换& lt和>与>一起；并且& 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>

希望这有所帮助！

class="language-* "需要在&lt。代码& gt元素，而不是& ltpre & gt元素。一开始我也在犯这个错误。

用正确的信息更新

看来JS小提琴不喜欢棱镜。在CodePen和我的本地机器上运行良好:http://codepen.io/anon/pen/ xmwji。Prism使用正则表达式来标识要突出显示的部分。确保正确地对代码进行转义。开始标记(& lt符号)应该写成& amplt；、和结束标记(& gt符号)作为& ampgt；。

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

它是这样工作的:

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

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

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

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

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

我的Gatsby模板有一个名为. babelrc的文件。babblerc，所有东西都装好了。

{
  "presets": ["babel-preset-gatsby"],
  "plugins": [
    [
   "prismjs",
   {
      //add languages here
     "languages":  ["javascript", "css", "markup", "php", "python", "bash", "csharp", "powershell"],
     "plugins": ["show-language"],
     "theme": "twilight",
     "css": true
     }
    ]
]
}