如何在Django HTML模板中实现带复制功能的高亮代码块？

方案一：前端基于Highlight.js + 自定义复制按钮（快速实现） #

无需后端复杂处理，直接在模板中引入前端资源即可快速复刻目标效果。

步骤1：引入Highlight.js本地资源 #

1. 从Highlight.js官方下载最新版本，解压后将styles目录下的主题CSS（如github-dark.min.css）、highlight.min.js及languages/python.min.js放到Django项目的static/css和static/js目录中。
2. 在模板中通过{% static %}标签引入：

{% load static %}
<!-- Highlight.js 样式 -->
<link rel="stylesheet" href="{% static 'css/github-dark.min.css' %}">
<!-- Highlight.js 核心脚本 -->
<script src="{% static 'js/highlight.min.js' %}"></script>
<!-- Python语法支持脚本 -->
<script src="{% static 'js/python.min.js' %}"></script>

步骤2：渲染代码块的模板结构 #

假设视图已将表格中的代码数据以code_content变量传递到模板，模板中写：

<div class="code-container">
  <div class="code-header">
    <span class="language-tag">Python</span>
    <button class="copy-btn" onclick="copyCode(this)">复制</button>
  </div>
  <pre><code class="language-python">{{ code_content|escape }}</code></pre>
</div>
- `|escape`过滤器用于避免代码中的HTML字符被解析，保证内容原样输出。

步骤3：添加美化容器的自定义样式 #

在模板的<style>标签或项目CSS文件中添加：

.code-container {
  max-width: 800px;
  margin: 20px 0;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  background-color: #1e1e1e;
}

.code-header {
  padding: 8px 16px;
  background-color: #2d2d2d;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.language-tag {
  color: #ccc;
  font-size: 14px;
}

.copy-btn {
  background-color: #007acc;
  color: white;
  border: none;
  padding: 4px 12px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
}

.copy-btn:hover {
  background-color: #005f99;
}

pre {
  margin: 0;
  padding: 16px;
  overflow-x: auto;
}

code {
  font-family: 'Consolas', 'Monaco', monospace;
}

步骤4：添加复制功能脚本 #

在模板的<script>标签中加入：

function copyCode(btn) {
  const codeBlock = btn.closest('.code-container').querySelector('code');
  const text = codeBlock.textContent;
  navigator.clipboard.writeText(text).then(() => {
    const originalText = btn.textContent;
    btn.textContent = '已复制';
    setTimeout(() => btn.textContent = originalText, 1500);
  }).catch(err => console.error('复制失败:', err));
}

// 页面加载完成后初始化语法高亮
document.addEventListener('DOMContentLoaded', () => hljs.highlightAll());

方案二：Django结合Pygments后端渲染（解决Pygments使用失败问题） #

若需后端完成语法高亮渲染，按以下步骤操作：

步骤1：安装Pygments #

在项目虚拟环境中执行：

pip install pygments

步骤2：创建Django模板过滤器 #

在目标app目录下创建templatetags文件夹（需包含__init__.py空文件），新建pygments_tags.py：

from django import template
from pygments import highlight
from pygments.lexers import get_lexer_by_name
from pygments.formatters import HtmlFormatter

register = template.Library()

@register.filter(name='pygmentize')
def pygmentize(code, language='python'):
    lexer = get_lexer_by_name(language, stripall=True)
    formatter = HtmlFormatter(
        style='github-dark',
        linenos=False,
        noclasses=False,
        cssclass='code-highlight'
    )
    return highlight(code, lexer, formatter)

步骤3：在模板中使用过滤器 #

模板顶部加载过滤器：

{% load pygments_tags %}

然后渲染代码块：

<div class="code-container">
  <div class="code-header">
    <span class="language-tag">Python</span>
    <button class="copy-btn" onclick="copyCode(this)">复制</button>
  </div>
  {{ code_content|pygmentize|safe }}
</div>
- `|safe`过滤器用于让Pygments生成的HTML代码被正确渲染。

步骤4：补充样式与复制功能 #

复用方案一中的.code-container、.code-header等样式，额外添加Pygments代码块样式：

.code-highlight {
  padding: 16px;
  overflow-x: auto;
  margin: 0;
}

复制功能脚本与方案一完全一致。

注意事项 #

• 若代码来自用户输入，需做好XSS防护，上述方案中的|escape过滤器及Pygments处理已提供基础防护。
• 可替换Highlight.js或Pygments的主题样式（如monokai、github等），适配项目视觉风格。

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