javascript 使用 Prism JS 未显示标记
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18391425/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Markup Not Showing Up Using Prism JS
提问by Xarcell
I'm trying to use PrismJS as my syntax highlighter for my blogspot blog. After having troubles with Syntax Highlighter, I thought I would give prism a try.
我正在尝试使用 PrismJS 作为我的 blogspot 博客的语法荧光笔。在使用 Syntax Highlighter 遇到麻烦之后，我想我会尝试一下棱镜。
My code look like this:
我的代码如下所示：
<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>
I have included the prismjs file before the </head>tag.
我在</head>标签之前包含了prismjs文件。
The CSS works, there are no errors in my Chrome console, yet the script shows no markup.
CSS 有效，我的 Chrome 控制台中没有错误，但脚本没有显示任何标记。
I have a jsFiddle with the exact same code on my site, and it also doesn't show the line numbers, even though my site does. http://jsfiddle.net/fyqnz/
我的网站上有一个 jsFiddle 的代码完全相同，但它也没有显示行号，即使我的网站显示了。http://jsfiddle.net/fyqnz/
Site example: http://www.xarpixels.com/2013/05/bloggers-conditional-statements-legacy.html
网站示例：http: //www.xarpixels.com/2013/05/bloggers-conditional-statements-legacy.html
Any idea why this isn't working?
知道为什么这不起作用吗？
采纳答案by Chris Ferdinandi
The class="language-*"needs to go on the <code>element, not the <pre>element. I was making this mistake at first, too.
在class="language-*"需要去的<code>元素，而不是<pre>元素。一开始我也犯了这个错误。
Updated with correct info
更新了正确的信息
It appears the JS Fiddle doesn't like Prism. Working fine on CodePen and locally on my machine: http://codepen.io/anon/pen/xmwji. Prism uses Regex to identify the sections to highlight. Make sure you escape your code properly. Opening tags (the <symbol) should be written as <, and closing tags (the >symbol) as >.
JS Fiddle 似乎不喜欢 Prism。在 CodePen 和我的机器上本地工作正常：http://codepen.io/anon/pen/xmwji 。Prism 使用 Regex 来识别要突出显示的部分。确保正确转义代码。打开（标记<符号）应写为<，和结束标记（与>符号）作为>。
回答by Chris B
Did a little playing around with this plugin and found that replacing < and > with > and < was kind of a pain. For what its worth if you wrap your html with a script tag, everything highlights. Because html inside of an untyped script tag doesn't play nice with Visual Studio, I gave it a type of prism-html-markup.
稍微玩了一下这个插件，发现用 > 和 < 替换 < 和 > 有点痛苦。如果你用脚本标签包装你的 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>
Hope this helps!
希望这可以帮助！
回答by Adam
You can use the unescaped-markup plugin
您可以使用未转义的标记插件
This is how it works:
这是它的工作原理：
<script type="text/plain" class="language-markup">
<p>Example</p>
</script>
To ignore first and last returns I would recommend using the normalize whitespace plugin.
要忽略第一个和最后一个返回，我建议使用normalize whitespace 插件。
回答by martin_borman
Add extra 'xmp' tags between 'code' and put your html code inside 'xmp' tags. Worked for me.
在“代码”之间添加额外的“xmp”标签，并将您的 html 代码放在“xmp”标签内。对我来说有效。
<pre class="language-markup line-numbers">
<code>
<xmp>
<h1>Test</h1>
</xmp>
</code>
</pre>