13

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

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

...其中的 CSSpre.python将适当地突出显示 Python 代码。

这样的事情存在吗？

4

5 回答 5

17

有SyntaxHighlighter：

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

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

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

于 2012-05-09T17:05:05.077 回答
5

我更喜欢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)
于 2015-03-23T14:44:50.950 回答
0

不确定这是否是您所追求的，但是当我想要文档中的语法高亮代码块时，我在Pandoc-Markdown中编写文档，然后使用Pandoc将文档处理为 html。

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

~~~{.python}
class MyClass:
    """A simple example class"""
    i = 12345
    def f(self):
        return 'hello world'
~~~
于 2012-05-09T17:36:09.893 回答
0

是的。您可以使用SyntaxHighlighter。它易于使用，正是您需要的东西。只需在您的块中添加code标签。pre

它突出显示了包括 Python 在内的大约 23 种语言。

于 2012-05-09T17:47:17.090 回答
0

首先下载或使用 CDN强调文本

    <link rel="stylesheet" href="{{asset("assets/css/prism.css")}}">
    <link rel="stylesheet" href="{{asset("assets/css/prism-unescaped-markup.min.css")}}">

<script src="{{asset("assets/js/prism.js")}}"></script>
<script src="{{asset("assets/js/prism-unescaped-markup.min.js")}}"></script>

使用 HTML（仅 HTML）

<script type="text/plain" class="language-markup">
<!DOCTYPE html>
<html>
  <head>
    <title>Hello World</title>
  </head>
  <body>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec viverra nec nulla vitae mollis.</p>
  </body>
</html>
</script>

与任何

    <code class="language-css">
       p { color: red }
    </code>
于 2022-01-02T10:53:48.820 回答