23

私は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>

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

4

7 に答える 7

51

<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>
于 2013-03-25T03:32:41.360 に答える
2

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

もちろん明らかな欠点は、JS がないとコンテンツがないことですが、ハイライターも機能しません。

于 2016-03-24T13:16:29.930 に答える
1

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

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

<pre data-src="assets/partials/picture.html"></pre>
于 2016-07-28T11:10:56.557 に答える
0

私は実際に同じ問題に遭遇しました。プリズム js とプリズム css を html ページに配置しましたが、ハイライトを取得できませんでした。それが他の問題になるかどうかはわかりませんが、私にとっては、すべての「code」、「pre」タグで黒に設定されたグローバル css でした。そこからその色を削除した後、プリズムの強調表示が表示され始めました。それでもうまくいかない場合は、この記事 Code syntax higlighter using Prism jsに従うことができます。大きな違いは見られませんでしたが、ハイライトしたいコードの下にプリズム js を配置すると問題が発生しました。それを上に移動すると、機能し始めました。誰かが問題を抱えている場合は、これを試すことができます。

于 2020-12-12T12:58:16.537 に答える