使用pygments.formatters.html在网页中嵌入代码片段并高亮显示

发布时间：2023-12-15 01:44:28

Pygments是一个功能强大的代码语法高亮工具，可以用于在网页中嵌入代码片段并进行高亮显示。

首先，我们需要使用Pygments的HtmlFormatter类来生成高亮显示的HTML代码。HtmlFormatter接受一些可选参数，比如指定颜色主题、是否显示行号等。

以下是一个简单的示例，演示如何使用HtmlFormatter将Python代码高亮显示：

from pygments import highlight
from pygments.lexers import PythonLexer
from pygments.formatters import HtmlFormatter

code = '''
def hello_world():
    print("Hello, World!")

hello_world()
'''

lexer = PythonLexer()
formatter = HtmlFormatter()

highlighted_code = highlight(code, lexer, formatter)

print(highlighted_code)

这个示例首先定义了一个简单的Python代码片段。接下来，创建了一个PythonLexer对象用于对Python代码进行词法分析。然后，创建一个HtmlFormatter对象，该对象使用默认的颜色主题和行号显示。最后，使用highlight函数将代码高亮显示并作为HTML字符串返回。

在终端上运行以上代码，将会输出高亮显示的HTML代码。你可以将此代码复制到一个HTML文件中，并用浏览器打开，就可以看到高亮显示的代码片段了。

在接下来的示例中，我们将演示如何在一个网页中嵌入一个代码片段，并使用Pygments进行高亮显示。

首先，我们需要在HTML文件的<head>标签中添加Pygments的CSS样式：

<head>
    <style>
        {{ pygments_css }}
    </style>
</head>

接下来，在要显示代码的地方，我们可以使用一个<pre>标签来包裹代码片段，并设置class属性为code，以便应用Pygments的样式：

<pre class="code">
    {{ highlighted_code }}
</pre>

在Python代码中，我们需要使用HtmlFormatter的get_style_defs方法来获取Pygments的CSS样式代码，并将它传递给模板引擎，以便在HTML文件中渲染出实际的样式。

以下是一个简单的例子，演示如何使用Pygments在一个网页中嵌入代码片段并进行高亮显示：

from flask import Flask, render_template
from pygments import highlight
from pygments.lexers import PythonLexer
from pygments.formatters import HtmlFormatter

app = Flask(__name__)

code = '''
def hello_world():
    print("Hello, World!")

hello_world()
'''

@app.route('/')
def index():
    lexer = PythonLexer()
    formatter = HtmlFormatter()
    highlighted_code = highlight(code, lexer, formatter)
    pygments_css = formatter.get_style_defs('.highlight')

    return render_template('index.html', highlighted_code=highlighted_code, pygments_css=pygments_css)

if __name__ == '__main__':
    app.run()

在这个例子中，我们使用了Flask框架来创建一个简单的web应用。当用户访问网页的根目录时，index函数会被调用并返回渲染好的HTML页面。

我们使用render_template函数来渲染HTML模板文件，将代码片段和Pygments生成的CSS样式代码传递给模板。

在模板文件中，我们可以使用双花括号的语法来引用Python代码中传递的变量。以下是index.html的内容：

<!DOCTYPE html>
<html>
<head>
    <style>
        {{ pygments_css }}
    </style>
</head>
<body>
    <pre class="code">
        {{ highlighted_code }}
    </pre>
</body>
</html>

当运行Python代码并访问网页时，你将看到一个嵌入的代码片段被高亮显示的效果。

这就是使用Pygments在网页中嵌入代码片段并高亮显示的简单例子。你可以根据需要自定义样式和其他配置，以满足你的特定需求。然而，请记住只在受信任的代码片段上使用Pygments，以防止潜在的安全风险。