如何使用Python Django实现浏览器中带语法高亮的代码展示？

下面是几种实用的实现方式，涵盖前端渲染、后端渲染以及Django专属工具：

一、前端渲染方案（无需后端处理） #

这类方案依赖前端JS库直接在浏览器中完成语法高亮，操作简单，适合大多数场景。

1. Prism.js #

• 步骤：
  1. 下载Prism的CSS和JS文件，放到Django项目的static目录下
  2. 在模板的<head>中引入静态资源：

     <link rel="stylesheet" href="{% static 'prism.css' %}">
     <script src="{% static 'prism.js' %}"></script>
     

  3. 给代码块添加对应语言的类名：

     <pre><code class="language-python">if True:
         print("Hello World")
     </code></pre>
     

• 特点：体积小、支持多种语言、可自定义主题，对动态生成的代码片段也能生效。

2. Highlight.js #

• 步骤：
  1. 下载Highlight.js的CSS和JS文件到static目录
  2. 模板中引入资源并初始化：

     <link rel="stylesheet" href="{% static 'highlight.min.css' %}">
     <script src="{% static 'highlight.min.js' %}"></script>
     <script>hljs.highlightAll();</script>
     

  3. 给代码块添加code标签并指定语言类：

     <pre><code class="python">if True:
         print("Hello World")
     </code></pre>
     

• 特点：自动检测语言（也可手动指定）、主题丰富，上手快。

二、后端渲染方案（Python库处理） #

通过Python库在后端将代码转换为带样式的HTML，再传递给模板渲染，适合需要预渲染或静态化的场景。

1. Pygments（Python语法高亮库） #

• 步骤：
  1. 安装库：pip install pygments
  2. 在视图中处理代码：

     from pygments import highlight
     from pygments.lexers import PythonLexer
     from pygments.formatters import HtmlFormatter
     
     def code_view(request):
         raw_code = """if True:
             print("Hello World")"""
         # 生成带样式的HTML
         formatter = HtmlFormatter(style='monokai')
         highlighted_html = highlight(raw_code, PythonLexer(), formatter)
         # 同时可以获取对应的CSS样式，用于模板引入
         css_style = formatter.get_style_defs('.highlight')
         return render(request, 'code_page.html', {
             'highlighted_code': highlighted_html,
             'highlight_css': css_style
         })
     

  3. 在模板中渲染：

     <style>{{ highlight_css|safe }}</style>
     <div class="highlight">{{ highlighted_code|safe }}</div>
     

• 特点：支持超过500种语言和格式，高度可定制，生成的HTML无需前端JS即可显示高亮。

2. django-pygments（Django封装的Pygments工具） #

• 步骤：
  1. 安装包：pip install django-pygments
  2. 在settings.py的INSTALLED_APPS中添加'pygments'
  3. 在模板中加载标签并使用：

     {% load pygments_tags %}
     
     {# 使用标签渲染代码 #}
     {% highlight "if True:\n    print('Hello World')" using 'python' %}
     
     {# 或者使用过滤器处理变量 #}
     {{ code_variable|pygmentize:'python' }}
     

• 特点：封装了Pygments的常用功能，无需手动编写视图处理逻辑，直接在模板中调用。

方案选择建议 #

• 若代码片段是动态生成（比如用户提交的代码），优先选前端方案，减少后端压力
• 若代码是静态内容或需要预渲染，后端方案更合适，能提升页面加载速度
• 追求极简实现选前端库，追求高度定制选Pygments

内容的提问来源于stack exchange，提问作者Baboucarr Badjie