Surligneur HTML Prism

Je suis en utilisant Prisme et sa fonctionne bien pour les CSS:

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

mais je ne peux pas le faire fonctionner pour le html:

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

J'ai 2 problèmes:

  1. < et > sont représentés comme des balises, pas de texte, mais je pourrais le remplacer par &lt; et &gt;
  2. Plus important, même remplacé comme indiqué dans le problème 1, le highliter seront pas mis en évidence de code et tout est tout noir. Malgré cela, il travaille pour le CSS, tout le code ressemble à ceci:
<!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>

Merci pour toute aide.

source d'informationauteur kajacx

  1. 36

    Utilisation <code class="language-markup"> de style de code html.

    Aussi, vous avez seulement besoin d'échapper le début de l'tags avec &lt;ne vous inquiétez pas au sujet de la &gt; caractères. Le plus simple est de coller votre code html dans le pré balise, puis effectuez une recherche et un remplacement de toutes < caractères.

    Cela devrait fonctionner:

    <!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>
  2. 1

    J'ai eu le même problème avec le HTML. Je ne voulais pas remplacer les <, > par &lt &gt donc je l'ai mis le code à l'intérieur textarea-éléments à l'intérieur d'un div caché et une fois que la page a été chargée de copier le contenu de tous les textareas à code-éléments. De cette façon, j'ai pu garder le code tel qu'il est et de le rendre sans problèmes.

    L'inconvénient évident est bien sûr que, sans JS il n'y a pas de contenu, mais là encore le surligneur ne fonctionne pas non plus.

  3. 1

    La meilleure solution est d'enregistrer le code html que vous voulez souligné dans un autre fichier. Vous aurez besoin d'inclure le fichier en surbrillance plugin dans votre js.

    La coloration syntaxique sera travaillé à partir de l'extension

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

    Pour résoudre le problème 1):

    Vous pouvez utiliser le unexcaped de balisage plugin

    Voilà comment cela fonctionne:

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

    Ignorer premier et le dernier retourne je vous conseille d'utiliser le normaliser les espaces plugin.

    Pour résoudre le problème 2):

    Il n'existe pas de languages-html voir http://prismjs.com/index.html#languages-list. Le HTML est un HypertexteBalisageLangue afin d'être inclus dans langage de balisage. C'est ce que vous avez à utiliser.