如何在prism.js中使用数据手册

Question

我正在使用prism.js作为我的网站的语法高亮笔，但我希望某些项目不能被渲染，比如操作符和标点符号。

现在，prism.js手册指出：

如果要防止任何元素被自动高亮显示，可以使用属性数据手册对用于棱镜的元素使用，并使用API。示例： <script src="prism.js" data-manual></script>

但仅此而已。没有更多的例子。指向API的链接只显示了一些JavaScript函数，但在data-manual上没有进一步显示。如果我谷歌site:prismjs.com "data-manual"，没有任何有用的事件出现。

有人能帮助我如何使用虚幻的data-manual-attribute吗？

Answer 1

我认为，这里是一个很好的例子。功劳归格雷戈里·谢尔所有。

HTML：

<script src="prism.js" data-manual></script>
<pre>
<code id="some-code" class="language-javascript">
  // This is some random code
  var foo = "bar";
</code>
</pre>

JavaScript：

var block = document.getElementById('some-code');
Prism.highlightElement(block);

Answer 2

我也不知道如何使用数据--文档中的手册--我必须查看源代码。当你想直接调用棱镜的api添加语法高亮显示时，使用‘数据手册’。检查一下api参考。

如果您不设置数据手册，棱镜将设置一个超时或侦听器来调用highlightAll (以下是相关的来源)。这将突出显示由以下选择器匹配的每个元素：'code[class*="language-"], [class*="language-"] code, code[class*="lang-"], [class*="lang-"] code'

如果您希望对时间进行更细粒度的控制，或者不希望棱镜添加额外的类，请将数据手册添加到包含prismjs的脚本标记中，然后自己调用突出显示。下面是一个基本的ES6示例，说明如何在手动模式下使用Prism：

import {highlight} from 'prismjs';
import 'prismjs/components/prism-python';

const pythonCode = 'myString = "Some String"';
const highlightedCode = highlight(pythonCode, Prism.languages.python);
const highlightedHTML = `<pre><code class="language-python">${highlightedCode}</code></pre>`;
document.getElementById('myID').innerHTML=highlightedHTML;