Question

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

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

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

这样的事情是否存在？

Answer 1

有SyntaxHighlighter：

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

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

如果您正在寻找服务器端示例，那么Python就有GeSHi或Pygments。

Answer 2

我更喜欢highlight.js。它支持112 languages。

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

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

Answer 3

不确定这是否是您所追求的，但当我想要文档中突出显示语法的代码块时，我会在Pandoc-Markdown中编写文档，然后使用Pandoc将文档处理到HTML

您可以使用pandoc-markdown语法获得突出显示的代码块，如下所示：

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

Answer 4

是。您可以使用SyntaxHighlighter。它易于使用，完全符合您的需要。只需添加代码类。

它突出了重要的23种语言，包括Python。

Download it right from here

希望这会有所帮助。

<pre> tags</pre>中的语法突出显示

4 个答案: