prism.jsのdata-manualの使い方

Question

私は私のウェブサイトのシンタックスハイライターとしてprism.jsを使用していますが、オペレータや句読点のような特定のアイテムはレンダリングできません。

さて、prism.jsのマニュアルでは述べて：あなたは自動的に強調表示されてから任意の要素を防ぎたい場合は

は、あなたがプリズムのために使用される要素に属性データ・マニュアルを使用して使用することができますAPI。例：

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

しかし、それはそれです。さらなる例はありません。 APIへのリンクにはJavaScriptの機能がいくつか表示されていますが、data-manualには何も表示されません。もし私がGoogle site:prismjs.com "data-manual"なら、役に立つ出現は現れません。

幻想的なdata-manual属性をどのように使用する必要がありますか？

Answer 1

ドキュメントからデータマニュアルを使用する方法もわかりませんでした。私はソースを見なければなりませんでした。構文ハイライトを追加するためにプリズムのAPIを直接呼びたい場合は、 'data-manual'を使用してください。 api referenceをチェックアウトします。

data-manualを設定しない場合、prismはhighlightAllを呼び出すタイムアウトまたはリスナーを設定します（ここでは該当するsourceです）。 'code[class*="language-"], [class*="language-"] code, code[class*="lang-"], [class*="lang-"] code'

タイミングを細かく制御したい場合、またはプリズムに余分なクラスを追加したくない場合は、含まれているスクリプトのscriptタグにdata-manualを追加します。あなた自身をハイライトしてください。ここでは、手動モードでプリズムを使用する方法の基本的なES6の例です：

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; 

Answer 2

私が思うに、hereが良い例です。クレジットはグレゴリー・シエールに行く。

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);