Home / Programmazione / Javascript - AJAX / SyntaxHighlighter con Javascript e Prism
Mattepuffo

SyntaxHighlighter con Javascript e Prism

SyntaxHighlighter con Javascript e Prism

Ho trovato un semplice syntax highlighter da usare all'interno di qualsiasi blog e CMS: Prism!

E' scritto in Javascript, e non ha dipendenze esterne.

E' composto di due file:

  • un CSS per lo stile
  • un Javascript che si occupa del resto

Li dovete scaricare da qua; come vedete nella pagina dovete decidere quali linguaggi volete.

Qua avete parecchi esempi; comunque qua sotto avete una pagina di esempio per tre linguaggi:

<!DOCTYPE html>
<html>
    <head>
        <title>Prismjs</title>
        <meta charset="UTF-8">
        <link href="prism.css" rel="stylesheet">
    </head>
    <body>
        <pre><code class="language-css">p { color: red; }</code></pre>
        <pre>
            <code class="language-php">
                $ciao = 'HELLO!';
                echo $ciao;
            </code>
        </pre>
        <pre>
            <code class="language-javascript">
                <script>
                    var ciao = 'HELLO';
                    console.log(ciao);
                </script>
            </code>
        </pre>
        <script src="prism.js"></script>
    </body>
</html>

Come vedete, una volta inclusi i due file, basta impostare il codice tra i tag pre e code, e poi impostare il linguaggio giusto nella regola CSS.

Non vi conviene scaricare tutti linguaggi se non ne avete bisogno, in quanto appesantirà un pò il file della libreria.

Enjoy!