如何使用CSS对代码清单进行样式设置？

Question

如何使用CSS对代码清单进行样式设置？

80

我希望使用CSS在HTML文档中展示编程语言代码和HTML代码片段。我想让它们具有固定宽度字体并且缩进，我的想法是：

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

我该如何使用CSS实现这个要求：让它以漂亮的格式显示出来（如果能够进行颜色编码就更好了，但这不是必需的）。

- user248237

着色需要使用可用的各种语法高亮器之一。如果您无法访问PHP，则有纯JavaScript解决方案。 - drudge

6个回答

51

这个 JavaScript 库看起来非常不错：

https://highlightjs.org/

更新：我也在我的基于 Tumblr 的博客上使用了它，因为最容易部署的是：

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

- Daniel C

25

<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，这也是StackOverflow用来对代码片段进行着色的工具。它具有自己的样式表，基于它认为的代码语言自动导入并对代码进行着色。你可以通过添加一个类来提示它代码使用的语言。

- sholsinger

（FYI）Tumblr不再支持<pre>标签。 - user302761

12

您可以使用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>

- Rishikesh Darandale

12

你可以先使用 <pre> 标签来保留格式，然后使用类似 Courier 的等宽字体来设置 CSS 样式。

在 CSS 中设置类似这样的样式：

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

- Gopherkhan

6

首先，我会在一个<pre> </pre>元素中展示代码，然后在你的CSS中为pre元素设置漂亮的样式，就可以结束了。

- FatherStorm

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Maytham Fahmi · Accepted Answer

分享一个我在网站上使用的示例，我在样式表中使用以下的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和JavaScript更新了这个CSS，并添加了一些额外的功能，如代码行和代码复制按钮，我想分享给大家。请随意使用GitHub源代码。要查看实际应用的代码示例，请查看我博客中的文章。