Question

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

现在，prism.js手册指出：

如果要防止任何元素被自动突出显示，可以在用于棱镜的元素上使用属性data-manual并使用API。例如：

<script src="prism.js" data-manual></script>

但就是这样。没有其他例子。 API的链接仅显示一些JavaScript函数，但data-manual上没有进一步说明。 Als if if Google site:prismjs.com "data-manual"，没有任何有用的出现。

任何人都可以帮助我了解如何使用虚幻的data-manual - 属性吗？

Answer 1

我认为，here就是一个很好的例子。归功于Gregory Schier。

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

我也不明白如何使用文档中的数据手册 - 我必须查看源代码。如果要直接调用prism的api来添加语法高亮，请使用'data-manual'。查看api reference。

如果你没有设置数据手册，prism会设置超时或监听器来调用highlightAll（这里是相关的source）。这将突出显示以下选择器匹配的每个元素：'code[class*="language-"], [class*="language-"] code, code[class*="lang-"], [class*="lang-"] code'

如果您希望更精细地控制时序，或者可能不希望prism添加额外的类，请将data-manual添加到包含prismjs的脚本的脚本标记中，然后自己调用highlight。这是一个基本的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;

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

2 个答案: