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

问题描述 投票：40回答：6

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

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

让它以一种格式很好的方式显示（如果它是彩色编码的奖金，但不一定是。

我怎样才能使用CSS实现这一目标？

html css
6个回答
36
投票

这个javascript库看起来很棒：

https://highlightjs.org/

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

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

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

http://alexgorbatchev.com/SyntaxHighlighter/

29
投票

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

这给出了以下结果：

enter image description here

18
投票

<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，这是used by StackOverflow颜色代码片段。它有自己的样式表，它根据代码所用的语言自动导入，并相应地为代码着色。您可以通过appending a class给出一个关于代码是什么语言的提示。

9
投票

好吧，你可以尝试在你的blockquote中使用<pre>标签来保留格式，然后使用等宽字体，比如css样式的courier。

像这样的东西可以在css中工作：

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

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

首先，我会在<pre> </pre>元素中显示代码，为你的css提供一个很好的风格，并称之为一天。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.