Question

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

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

让它以格式化的方式显示（如果是彩色编码，则可以获得奖励，但不一定是。

如何使用CSS完成此操作？

Answer 1

这个javascript库看起来很棒：

https://highlightjs.org/

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

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

我也使用了这个（一些额外的功能）：

http://alexgorbatchev.com/SyntaxHighlighter/

Answer 2

分享我在网站上使用的示例，我在样式表中使用了以下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;
}

这给出了以下结果：

Answer 3

<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的Google代码used by StackOverflow来为代码段设置颜色。它有自己的样式表，它根据代码所用的语言自动导入，并相应地为代码着色。您可以通过appending a class为其提供代码所用语言的提示。

Answer 4

好吧，您可以尝试使用＆lt; pre＆gt;在blockquote中标记以保留格式，然后使用等宽字体，如css样式的courier。

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

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

Answer 5

您可以查看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>

Answer 6

首先，我会在<pre> </pre>元素中显示代码，为你的css提供一个不错的样式，并将其称为一天。

如何使用CSS设置代码清单的样式？

6 个答案: