用这个插件做了一点小游戏，发现< and >用>和<替换是一种痛苦。如果你用脚本标签 Package 你的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-*"需要放在<code>元素上，而不是<pre>元素上。一开始我也犯了这个错误。

更新正确信息

似乎JS Fiddle不喜欢Prism。在CodePen和本地机器上运行良好：http://codepen.io/anon/pen/xmwji。Prism使用Regex来标识要突出显示的部分。确保正确转义代码。开头标记（<符号）应写成<，结尾标记（>符号）应为>。

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

您可以使用unescaped-markup plugin
它是这样工作的：

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

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

在“code”之间添加额外的“xmp”标签，并将HTML代码放在“xmp”标签中。对我很有效

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

我的盖茨比模板有一个名为. 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
     }
    ]
]
}