我想创建一个网页，将显示我在一个代码块内的表中的数据就像它在这里一样，即使有复制功能。我已经可以在页面上显示数据了，我只是喜欢把它格式化成一个漂亮的框，甚至可能有语法高亮，我看了pyents，但我不能让它工作。
下面是我想在我的Django应用程序中重新创建的示例代码块。请不要注意实际代码，这只是一个示例。如果您能告诉我具体如何实施，我将不胜感激。
# Python Program to find the area of triangle
a = 5
b = 6
c = 7
# Uncomment below to take inputs from the user
# a = float(input('Enter first side: '))
# b = float(input('Enter second side: '))
# c = float(input('Enter third side: '))
# calculate the semi-perimeter
s = (a + b + c) / 2
# calculate the area
area = (s*(s-a)*(s-b)*(s-c)) ** 0.5
print('The area of the triangle is %0.2f' %area)
老实说，你的问题更多地与CSS和Javascript有关，而不是Python / Django。
这花了我一段时间…根据你所说的，我假设你了解Django的基本知识。
models.py
from django.db import models
class Codeblock(models.Model):
text = models.TextField()
...
views.py
from .models import Codeblock
def codes(request):
codeblocks = Codeblock.objects.all()
return render(request, 'list_codes.html', {'codeblocks': codeblocks})
要格式化代码块，您可以使用HTML前置和代码标记(Bootstrap 5示例):
<pre><code>{{codeblocks.text}}</code></pre>
棘手的部分是试图找到一种方法来突出显示语法。经过几个死胡同后，我发现highlight.js工作得非常好。它有关于基本用法和各种主题的文档供您使用，您可以使用此CDN库进行测试，也可以编写自己的主题。
还有最后一个关于如何复制文本的问题。虽然将文本复制到剪贴板很容易，但将样式按钮放置在正确的位置却不是一件容易的事情(至少对我来说)。为了不扩展自己，过了一段时间，我发现这个highlightjs-copy项目，不仅复制文本到剪贴板，而且在正确的位置有一个完美的按钮。
话虽如此，最后，这里有一个例子:
list_codes.html
<!DOCTYPE html>
<html>
<head>
<!-- bootstrap -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<!-- highlight.js -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/base16/ashes.min.css" integrity="sha512-KX15mI6Sw0VzQyAOf4MAPS9BZ0tWXyZrGPHKSkqDmy40Jl+79f8ltpj6FvLJ+3obnH56ww0ukclsd6xGAxb5mA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/highlight.min.js"></script>
<script>hljs.highlightAll();</script>
<!-- highlightjs-copy -->
<script src="https://unpkg.com/highlightjs-copy/dist/highlightjs-copy.min.js"></script>
<link
rel="stylesheet"
href="https://unpkg.com/highlightjs-copy/dist/highlightjs-copy.min.css"
/>
<script>hljs.addPlugin(new CopyButtonPlugin());</script>
</head>
<body style="background-color: hsl(0,0%,22.5%);">
{% for codeblock in codeblocks %}
<div class="container">
<!-- Need to be in one line or will not render correctly -->
<pre><code class="language-python">{{codeblock.text}}</code></pre>
</div>
{% endfor %}
</body>
</html>