我想在使用 CSS 的 HTML 文档中显示编程语言代码的 sn-ps 以及 HTML 代码。我希望它缩进并采用固定宽度的字体......我正在考虑类似的东西：
<blockquote style="some_style">
my code here
my code here also
</blockquote>
并让它以一种很好的格式显示（如果它是彩色编码的，则奖励，但不必如此。
我如何使用 CSS 来完成这项工作？
【问题讨论】：
这个 javascript 库看起来很棒：
更新：我也在基于 Tumblr 的博客上使用了它，因为它最容易部署：
https://github.com/google/code-prettify
我也用过这个（一些额外的功能）：
【讨论】：
分享一个我在网站上使用的例子，我确实在我的样式表中使用了pre：
pre {
background: #f4f4f4;
border: 1px solid #ddd;
border-left: 3px solid #f36d33;
color: #666;
page-break-inside: avoid;
font-family: monospace;
font-size: 15px;
line-height: 1.6;
margin-bottom: 1.6em;
max-width: 100%;
overflow: auto;
padding: 1em 1.5em;
display: block;
word-wrap: break-word;
}
这给出了以下结果：
免责声明：在我的闲暇时间，我花了几个小时来更新这个 CSS 并添加一些额外的功能，比如代码行和代码复制按钮，使用 CSS 和 JavaScript 到我喜欢的个人用途分享。请随意使用github源代码。要查看现实世界中的代码示例，请查看我博客中的 article，它展示了我如何使用代码示例。
【讨论】：
<pre> 会自动在pre 标签内保留制表符和换行符。大多数浏览器会自动默认使用 pre 内的等宽字体，但如果您想强制使用（这是个好主意），您可以使用以下 CSS：
pre { font-family: monospace; }
我建议您不要将代码直接放入<blockquote> 元素中。它在语义上是不正确的。
如果你希望你的代码在语义上是正确的，你应该这样标记它：
<pre><code>
My pre-formatted code
here.
</code></pre>
如果您实际上是在“引用”一段代码，那么标记将是：
<blockquote><pre><code>
My pre-formatted "quoted" code here.
</code></pre></blockquote>
如果您想要更好看的代码，您可以使用 Google Code 的 Prettify 即 used by StackOverflow 来为 code-sn-ps 着色。它有自己的样式表，它会根据它认为代码的语言自动导入，并相应地为代码着色。您可以通过appending a class 提示代码是什么语言。
【讨论】：
您可以查看prismjs 以突出显示代码。
您可以根据自己的意愿从here 自定义包，并且此包的占用空间仍然很小。
一旦你有了一个包，你就可以像下面这样使用它：
<!DOCTYPE html>
<html>
<head>
...
<link href="themes/prism.css" rel="stylesheet" />
</head>
<body>
...
<script src="prism.js"></script>
</body>
</html>
完成上述设置后，您可以像下面这样使用它：
<pre><code class="language-css">p { color: red }</code></pre>
【讨论】：
好吧，你可以尝试在你的块引用中使用
标签来首先保留格式，然后使用等宽字体，例如 css 样式的 courier。这样的东西可以在 css 中工作：
前{ font-family: "新快递" 导游 等宽； }
【讨论】：
首先，我将在 <pre> </pre> 元素中显示代码，为您的 CSS 中的 pre 元素提供一个漂亮的样式，然后就结束了。
【讨论】：