<pre> 标签中的语法高亮

Question

是否有任何库允许我在 <pre> 标签中显示代码并根据语言突出显示语法？我在想象这样的事情：

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

…其中 pre.python 的 CSS 会适当地突出显示 Python 代码。

这样的东西存在吗？

原文由 Joe Mornin 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

有 SyntaxHighlighter ：

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

还有 highlight.js 可以选择自动检测语法并适当地突出显示它；但是，您需要同时使用 <pre><code> 标签来包装您的代码。

如果您正在寻找服务器端示例，可以使用 GeSHi 或 Pygments for Python。

原文由 Gio Borje 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

我更喜欢 highlight.js 。它支持 112 种语言。

从浏览器控制台使用此代码注入预览您的页面：

 // 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)

原文由 Cees Timmerman 发布，翻译遵循 CC BY-SA 3.0 许可协议