我正在嘗試使用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-* "需要在<。代碼& 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
     }
    ]
]
}