Le balisage ne s'affiche pas à l'aide de Prism JS

Je suis en train d'utiliser PrismJS que ma syntaxe surligneur pour mon blogspot blog. Après avoir eu des ennuis avec la coloration Syntaxique, j'ai pensé que je donnerais prisme de l'essayer.

Mon code ressemble à ceci:

<pre class="line-numbers language-markup">
    <code>
        <b:if cond='data:blog.url == "http://domain.com/p/about.html"'>
            <style type="text/css">
                font-size: 22px;
            </style>
        </b:if>
    </code>
</pre>

J'ai inclus le prismjs fichier avant de le </head> tag.

Le CSS fonctionne, il n'y a pas d'erreurs dans mon Chrome console, mais le script ne montre aucun balisage.

J'ai un jsFiddle avec exactement le même code sur mon site, et il également ne pas afficher les numéros de ligne, même si mon site n'. http://jsfiddle.net/fyqnz/

Exemple de Site: http://www.xarpixels.com/2013/05/bloggers-conditional-statements-legacy.html

Une idée de pourquoi cela ne fonctionne pas?

source d'informationauteur Xarcell

  1. 6

    La class="language-*" doit aller sur le <code> élément, de ne pas le <pre> élément. Je faisais cette erreur au début.

    Mis à jour avec la bonne info

    Il semble que le JS Fiddle n'aime pas du Prisme. Fonctionne bien sur CodePen et en local sur ma machine: http://codepen.io/anon/pen/xmwji. Prism utilise les Regex pour identifier les sections à mettre en évidence. Assurez-vous de vous échapper de votre code correctement. Les balises d'ouverture (le < symbole) devrait être écrit comme &lt;et les balises de fermeture (le > symbole)&gt;.

  2. 25

    Fait un peu de jouer avec ce plugin et a constaté que le remplacement de < et > > et < a une sorte de douleur. Pour ce que sa vaut la peine si vous enveloppez de votre code html avec une balise de script, tout ce qui met en évidence. Parce que le html à l'intérieur d'un non balise de script n'est pas jouer gentil avec Visual Studio, je l'ai donné à un type de prisme-html-balise.

    <pre>
    <code class="language-markup">
        <script type="prism-html-markup">
            <h1 class="foo">h1. Heading 1</h1>
            <h2>h2. Heading 2</h2>
            <h3>h3. Heading 3</h3>
            <h4>h4. Heading 4</h4>
            <h5>h5. Heading 5</h5>
            <h6>h6. Heading 6</h6>
        </script>
    </code>
</pre>

    Espérons que cette aide!

  3. 0

    Vous pouvez utiliser le sans échappement 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.