web-dev-qa-db-ja.com

PrismHTML蛍光ペン

私は Prism を使用しており、CSSでうまく機能しています：

<pre><code class="language-css">p { color: red }</code></pre>

しかし、私はそれをhtmlで動作させることができません：

<pre><code class="language-html"><p class="red">red text</p></code></pre>

私には2つの問題があります：

  1. <と>はテキストではなくタグとして表されますが、&lt;と&gt;に置き換えることができます。

  2. さらに重要なのは、問題1に示されているように置き換えても、highliterはコードを強調表示せず、すべてが黒だけです。 CSSで機能しているにもかかわらず、コード全体は次のようになります。

<!DOCTYPE html>
<html>
    <head>
        <link href="prism.css" rel="stylesheet" />
    </head>
    <body>
        <script src="prism.js"></script>
        <pre><code class="language-css">p { color: red }</code></pre>
    </body>
</html>

助けてくれてありがとう。

htmlsyntax-highlightingprism.js
17
kajacx

<code class="language-markup">を使用して、htmlコードのスタイルを設定します。

また、タグの先頭を&lt;でエスケープするだけでよく、&gt;文字について心配する必要はありません。最も簡単な方法は、htmlコードをpreタグに貼り付けてから、すべての<文字の検索と置換を実行することです。

これは機能するはずです：

<!DOCTYPE html>
<html>
    <head>
        <link href="prism.css" rel="stylesheet" />
    </head>
    <body>
        <script src="prism.js"></script>
        <pre><code class="language-markup">
            &lt;p class="red">red text &lt;/p>
        </code></pre>
    </body>
</html>
43
Nathan Jones

問題1を解決するには）：

nexcaped-markupプラグイン を使用できます

これがその仕組みです：

<script type="text/plain" class="language-markup">
   <p>Example</p>
</script>

最初と最後の戻り値を無視するには、 空白のプラグインを正規化 を使用することをお勧めします。

問題2を解決するには）：

languages-htmlは存在しません http://prismjs.com/index.html#languages-list を参照してください。 HTMLはハイパーテキストマークアップ言語であるため、言語マークアップに含まれています。それはあなたが使わなければならないものです。

2
Adam

最善の解決策は、強調表示するhtmlを別のファイルに保存することです。ファイルハイライトプラグインをjsに含める必要があります。

構文の強調表示は、拡張機能から実行されます

<pre data-src="assets/partials/picture.html"></pre>
1
steve

HTMLでも同じ問題がありました。 <、>を＆lt＆gtに置き換えたくなかったので、コードを非表示のdiv内のtextarea-elements内に配置し、ページが読み込まれると、すべてのtextareasのコンテンツをcode-elementsにコピーしました。このようにして、コードをそのままにして、問題なくレンダリングすることができました。

もちろん、明らかな欠点は、JSがないとコンテンツがないことですが、蛍光ペンも機能しません。

1
Hardev