How can I style code listings using CSS?

我希望在使用 CSS 的 HTML 文档中显示编程语言代码片段和 HTML 代码。我希望它是缩进的，并在固定宽度的字体... 我想的是这样的东西:

<blockquote style="some_style">
my code here
my code here also
</blockquote>

并有它出现在一个很好的格式方式(奖金，如果它的颜色编码，但不一定是。

如何使用 CSS 实现这一点？

98003 次浏览
小开

那么，您可以尝试使用一个 < pre > 标记在您的块报价，以保持格式第一，然后使用等宽字体，如快递的 css 样式。

这样的东西可以在 css 中使用:

pre {
font-family:     "Courier New"
Courier
monospace;
}
小开

首先，我将展示 <pre> </pre>元素中的代码，在 css 中为 pre 元素赋予一个漂亮的样式，然后就可以结束了。

小开

<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>

如果你想要更好看的代码，你可以使用谷歌代码的 Prettify，这是 由 StackOverflow 使用颜色代码片段。它拥有自己的样式表，根据它认为代码是什么语言自动导入，并相应地给代码上色。您可以通过 附加一个类给出关于代码是什么语言的提示。

小开

This javascript library seems excellent:

Https://highlightjs.org/

更新: 我还在基于 Tumblr 的博客上使用了这个，因为它最容易部署:

Https://github.com/google/code-prettify

我也使用了这个(一些额外的特性) :

Http://alexgorbatchev.com/syntaxhighlighter/

小开

Sharing an example I use in website, I do use following pre in my stylesheet:

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;
}

结果如下:

enter image description here

免责声明: 在我的闲暇时间，我花了几个小时来更新这个 CSS 的一些额外的功能，如代码行和代码复制按钮使用 CSS 与 JavaScript，以我的个人用途，我喜欢分享。请使用您喜欢的 Github源代码。要查看真实世界中的代码示例，请检查我的博客中的这个 文章，它展示了我如何使用代码示例。

小开

您可以查看 prismjs来突出显示代码。

您可以根据自己的意愿从 给你定制软件包，这个软件包的占用空间仍然是最小的。

一旦你有了一个软件包，你就可以像下面这样使用它:

<!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>

提交答案