如何在prism.js中使用data-manual

How to use data-manual in prism.js

本文关键字：data-manual js prism      更新时间：2023-09-26

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

现在，prism.js的手册上写着:

如果你想阻止任何元素被自动突出显示，你可以在你用于prism的元素上使用data-manual属性并使用API。例子:

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

但就是这样。没有更多的例子。API的链接只显示了一些JavaScript函数，但data-manual上没有进一步的内容。如果我搜索site:prismjs.com "data-manual"，没有有用的内容显示。

谁能帮助我如何虚幻的data-manual属性需要使用?

我认为，这里有一个很好的例子。这要归功于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);

我也不明白如何使用文档中的数据手册——我必须查看源代码。当你想直接调用prism的api来添加语法高亮时，使用'data-manual'。查看api参考

如果你没有设置data-manual, prism将设置一个超时或监听器来调用highlightAll(这里是相关的源代码)。这将突出显示与以下选择器匹配的每个元素:'code[class*="language-"], [class*="language-"] code, code[class*="lang-"], [class*="lang-"] code'

如果你想要更细粒度的计时控制，或者不想让prism添加额外的类，可以在包含prismjs的脚本的script标签中添加data-manual，然后自己调用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;
相关文章：