css 标记中的语法高亮显示< pre>

fumotvh3 于 2023-05-08 发布在其他

关注(0)|答案(5)|浏览(357)

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

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

...其中pre.python的CSS将适当地突出显示Python代码。
这样的东西存在吗？

css

来源：https://stackoverflow.com/questions/10520714/syntax-highlighting-in-pre-tags

5条答案

按热度按时间

wsxa1bj11#

SyntaxHighlighter：

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

还有highlight.js，它可以自动检测语法并适当地突出显示它;但是，您需要同时使用两个<pre><code>标记来 Package 代码。
如果你正在寻找一个服务器端的例子，有GeSHi或Pygments的Python。

赞(0）回复(0）举报 2023-05-08

4ktjp1zp2#

我更喜欢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)

赞(0）回复(0）举报 2023-05-08

9rnv2umw3#

我不确定这是否是你想要的，但是当我想在文档中使用语法突出显示的代码块时，我用Pandoc-Markdown编写文档，然后使用Pandoc将文档处理成html。
使用pandoc-markdown语法可以得到高亮显示的代码块，如下所示：

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

赞(0）回复(0）举报 2023-05-08

8i9zcol24#

是的。您可以使用SyntaxHighlighter。它很容易使用，正是你需要的东西。只需在pre块中添加code标记。
它突出了包括Python在内的23种语言。

赞(0）回复(0）举报 2023-05-08

kmbjn2e35#

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

<script type="text/plain" class="language-markup">
<!DOCTYPE html>
<html>
  <head>
    <title>Hello World!</title>
  </head>
  <body>
    <p>This text should be syntax highlighted.</p>
    <p>Lorem ipsum dolor sit amet.</p>
  </body>
</html>
</script>

任何

<code class="language-css">
   p { color: red }
</code>

赞(0）回复(0）举报 2023-05-08

我来回答

css 标记中的语法高亮显示< pre>

5条答案

相关问题

热门标签

最新问答