我想用CSS在HTML文档中显示编程语言代码片段和HTML代码。我希望它是缩进的，并且是固定宽度的字体......我在考虑类似这样的东西：
<blockquote style="some_style"> my code here my code here also </blockquote>
并让它以一种很好的格式出现（如果它是彩色编码的话会更好，但不一定是这样。我如何使用CSS来实现这一点？
kq4fsx7k1#
分享一个我在网站中使用的例子，我在我的样式表中使用了以下pre：
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从我的博客，显示我如何使用代码示例。
guz6ccqo2#
这个javascript库看起来很棒：https://highlightjs.org/更新：我也在我基于Tumblr的博客上使用了这个，因为它最容易部署：https://github.com/google/code-prettify
fnatzsnv3#
<pre>会自动保留边界pre标签内的制表符和换行符。大多数浏览器会自动默认pre内的等宽字体，但如果你想强制这样做（这是个好主意），你可以使用下面的CSS：
<pre>
pre { font-family: monospace; }
我建议你不要把代码直接放在<blockquote>元素中，这在语义上是不正确的。如果你想让你的代码语义正确，你应该这样标记它：
<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来给代码段上色。它有自己的样式表，可以根据它认为代码是什么语言自动导入，并相应地给代码上色。你可以通过附加一个类来给予它代码是什么语言。
ki1q1bka4#
好吧，你可以尝试在你的blockquote中使用一个标签来首先保留格式，然后使用等宽字体，比如css风格的courier。下面的代码可以在css中使用：
pre { font-family: "Courier New" Courier monospace; }
puruo6ea5#
您可以查看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>
7bsow1i66#
首先，我将展示<pre> </pre>元素中的代码，在css中为pre元素赋予一个漂亮的样式，然后就到此为止。
<pre> </pre>
6条答案
按热度按时间kq4fsx7k1#
分享一个我在网站中使用的例子，我在我的样式表中使用了以下
pre：这给出了以下结果：
**免责声明：**在我的空闲时间，我花了几个小时来更新这个CSS有点额外的功能，如代码行和代码复制按钮使用CSS与JavaScript到我个人使用，我喜欢分享。请使用你喜欢的github源代码。要查看一个代码示例在真实的世界中，检查这个article从我的博客，显示我如何使用代码示例。
guz6ccqo2#
这个javascript库看起来很棒：
https://highlightjs.org/
更新：我也在我基于Tumblr的博客上使用了这个，因为它最容易部署：
https://github.com/google/code-prettify
fnatzsnv3#
<pre>会自动保留边界pre标签内的制表符和换行符。大多数浏览器会自动默认pre内的等宽字体，但如果你想强制这样做（这是个好主意），你可以使用下面的CSS：我建议你不要把代码直接放在
<blockquote>元素中，这在语义上是不正确的。如果你想让你的代码语义正确，你应该这样标记它：
如果您实际上是在“引用”一段代码，那么标记将是：
如果你想要更好看的代码，你可以使用Google Code的Prettify来给代码段上色。它有自己的样式表，可以根据它认为代码是什么语言自动导入，并相应地给代码上色。你可以通过附加一个类来给予它代码是什么语言。
ki1q1bka4#
好吧，你可以尝试在你的blockquote中使用一个标签来首先保留格式，然后使用等宽字体，比如css风格的courier。
下面的代码可以在css中使用：
puruo6ea5#
您可以查看prismjs以突出显示代码。
您可以根据自己的意愿在here中自定义封装，并且此封装的占用空间仍然很小。
一旦你有了一个软件包，你就可以使用它了：
完成上述设置后，您可以按如下方式使用它：
7bsow1i66#
首先，我将展示
<pre> </pre>元素中的代码，在css中为pre元素赋予一个漂亮的样式，然后就到此为止。