标记没有出现使用棱镜JS

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

有点玩这个插件,发现用>和<替换<和>是一种痛苦.如果你用一个脚本标签包装你的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

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

Answer 4

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

它是这样工作的：

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

要忽略第一个和最后一个返回，我建议使用标准化空白插件。