<pre> 标签中的语法高亮

Posted

技术标签:

【中文标题】<pre> 标签中的语法高亮【英文标题】:Syntax highlighting in <pre> tags 【发布时间】:2012-05-18 05:47:29 【问题描述】:

是否有任何库可以让我在&lt;pre&gt; 标签中显示代码并根据语言突出显示语法?我在想象这样的事情:

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

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

这样的东西存在吗?

【问题讨论】:

【参考方案1】:

有SyntaxHighlighter:

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

还有highlight.js 可以选择自动检测语法并适当地突出显示它;但是,您需要同时使用 &lt;pre&gt;&lt;code&gt; 标记来包装您的代码。

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

【讨论】:

你不需要将
 与 highlight.js 一起使用,你可以使用任何你想要的标记。 <pre> 只是一个默认值(和 html5 推荐,FWIW)
跳到最后一条评论,您可以使用如下代码执行此操作:``` document.addEventListener('DOMContentLoaded', (event) => document.querySelectorAll('pre'). forEach((el) => hljs.highlightElement(el); ); ); ``` 参见highlightjs.org/usage的“自定义用法”【参考方案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)

【讨论】:

试了预览 - 太棒了!我找不到暗模式选项,但这个 dracula.css 做得很好。【参考方案3】:

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

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

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

【讨论】:

【参考方案4】:

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

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

【讨论】:

【参考方案5】:

首先下载或使用 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>

【讨论】:

以上是关于<pre> 标签中的语法高亮的主要内容,如果未能解决你的问题,请参考以下文章

javadoc的语法高亮显示?

.Rnw 文件 (LaTeX) 中的 knitr 语法高亮显示

jekyll 高亮标签打破了降价语法

sunlime vue es6高亮

使Notepad++ 支持smali语法高亮

博客园的代码高亮