La coloration syntaxique dans <pre> balises

Y a des bibliothèques qui va me permettre d'afficher du code dans <pre> balises et mettre en évidence la syntaxe en fonction de la langue? Je suis d'imaginer quelque chose comme ceci:

<pre class="python">
class MyClass:
    """A simple example class"""
    i = 12345
    def f(self):
        return 'hello world'
</pre>

...où le CSS pour pre.python en surbrillance le code Python de façon appropriée.

Fait quelque chose comme ça existent?

InformationsquelleAutor Joe Mornin | 2012-05-09
  1. 13

    Il y a SyntaxHighlighter:

    <pre class="brush: python">
   # python code here
</pre>

    Il y a aussi highlight.js qui a la possibilité de détecter automatiquement la syntaxe et la mettre en avant de façon appropriée; cependant, vous devez utiliser à la fois <pre><code> balises pour envelopper votre code.

    Si vous êtes à la recherche d'un serveur-côté exemple, il y a GeSHi ou Pygments pour Python.

    • Vous n'avez pas besoin d'utiliser <pre><code> avec highlight.js vous pouvez utiliser n'importe quelle balise que vous voulez. <pre><code> est juste un défaut (et une recommandation HTML5, FWIW)
    InformationsquelleAutor Gio Borje
  2. 3

    Je préfère highlight.js. Il prend en charge 112 langues.

    Un aperçu de votre page avec cette injection de code à partir du navigateur de la console:

    // Highlight 22 popular code types. TODO: Inline for speed and security.
function loadjscssfile(filename, filetype){  // http://www.javascriptkit.com/javatutors/loadjavascriptcss.shtml
    if(filetype=="js"){
        var fileref=document.createElement('script')
        fileref.setAttribute("type","text/javascript")
        fileref.setAttribute("src", filename)
    }
    else if(filetype=="css"){
        var fileref=document.createElement("link")
        fileref.setAttribute("rel", "stylesheet")
        fileref.setAttribute("type", "text/css")
        fileref.setAttribute("href", filename)
    }
    if(typeof fileref!="undefined") document.getElementsByTagName("head")[0].appendChild(fileref)
}
loadjscssfile("//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.4/styles/vs.min.css", "css")
loadjscssfile("//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.4/highlight.min.js", "js")
setTimeout("var a = document.querySelectorAll('.code'); for(var i=0; i < a.length; ++i) hljs.highlightBlock(a[i])", 600)
    InformationsquelleAutor Cees Timmerman
  3. 0

    Oui. Vous pouvez utiliser SyntaxHighlighter. Il est facile à utiliser exactement de la façon dont vous avez besoin. Il suffit d'ajouter le code de la classe seulement.

    Il met en évidence important en 23 langues, y compris Python.

    Pour le télécharger directement à partir d'ici

    Espère que cela aidera.

    InformationsquelleAutor Libin
  4. 0

    Ne sais pas si c'est ce que vous êtes après, mais quand je veux syntaxe en surbrillance les blocs de code dans un document, j'écris le document dans Pandoc-Markdown, puis utilisez Pandoc pour traiter la doc en html.

    Vous obtenez le code surligné bloc à l'aide d'pandoc-syntaxe markdown comme ceci:

    ~~~{.python}
class MyClass:
    """A simple example class"""
    i = 12345
    def f(self):
        return 'hello world'
~~~
    InformationsquelleAutor uvtc