highlightjs avec du code html

StackOverflow https://stackoverflow.com//questions/22076190

Question

Comment mettre mon code HTML pour que highlight.js l'embellisse ?

J'ai essayé

<pre>
    <code>
        <!-- HTML Prettify -->
        <div>
            <pre class="pre-code-ception"><code> haha </code></pre>
        </div>
    </code>
</pre>

J'ai mis à la fin de mon fichier :

<script type="text/javascript">
    hljs.initHighlightingOnLoad();
</script>

Mais tout est affiché en HTML simple.

Était-ce utile?

La solution

Oh, je pense que je comprends le problème.Vous devez échapper au HTML dans le <code> élément, sinon il sera interprété comme du HTML au lieu du texte (vous voulez que le HTML soit affiché littéralement, et non interprété comme faisant partie de la structure de la page Web).

Changez tous les < à &lt; et > à &gt;, ainsi que tout autre caractère HTML spécial dans votre exemple de code.(Si vous générez la page à la volée, la plupart des langages disposent d'une fonction utilitaire permettant d'échapper au HTML pour vous.)

Autres conseils

user2932428 solution sans jQuery: 

document.querySelectorAll("code").forEach(function(element) {
    element.innerHTML = element.innerHTML.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#039;");
});

Pour ajouter à la réponse de @Cameron sur l'échappement de votre code HTML :

Si vous souhaitez mettre en évidence une grande quantité de code et que vous ne souhaitez pas tout échapper manuellement, une option consiste à l'enregistrer en tant que variable en utilisant hérdoc syntaxe et utiliser une variante de htmlspecialchars() (PHP) pour y échapper.Heredoc vous permet d'enregistrer une chaîne multiligne en tant que variable sans avoir à utiliser d'opérateurs de concaténation.

Ensuite, c'est juste une question de echole mettre dans votre <pre><code>...</code></pre> bloc.

L'avantage d'utiliser cette méthode est que le code reste lisible dans votre document.

Exemple:

<?php

$code = <<< EOT

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
    </head>

    <body>

        <img src="image.png" />

    </body>
</html>

EOT;

?>

<pre>
    <code class="html">
        <?php echo htmlspecialchars( $code ); ?>
    </code>
</pre>

Une chose à noter concernant l'utilisation d'Heredoc est que votre conclusion EOT doit être complètement aligné à gauche.

Vous devez échapper au contenu de <code class="html"> 

$('code').each(function() {
  var that = $(this);
  // cache the content of 'code'
  var html = that.html().trim();
  that.empty();
  // escape the content
  that.text(html);
});
hljs.initHighlightingOnLoad();

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top