Html 如何使用 CSS 设置代码列表的样式？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4000792/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How can I style code listings using CSS?
提问by maytham-???????
I'd like to display snippets of programming language code, and also HTML code, inside an HTML document using CSS. I want it to be indented and in fixed-width font... I'm thinking of something like:
我想在使用 CSS 的 HTML 文档中显示编程语言代码片段以及 HTML 代码。我希望它缩进并使用固定宽度的字体......我在想这样的事情：
<blockquote style="some_style">
my code here
my code here also
</blockquote>
and have it appear in a nicely formatted way (bonus if it's color coded, but doesn't have to be.
并使其以格式良好的方式出现（如果它是彩色编码的，则奖励，但不一定是。
How can I accomplish this using CSS?
如何使用 CSS 完成此操作？
回答by maytham-???????
Sharing an example I use in website, I do use following prein my stylesheet:
分享一个我在网站上使用的例子，我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;
}
This gives the following results:
这给出了以下结果：
Disclaimer:In my leisure time, I have spend few hours to update this CSS with a bit extra features like code lines and code Copy button using CSS with JavaScript to my personal use that I like to share. Please use as you like githubsource code.
免责声明：在我的闲暇时间，我花了几个小时来更新这个 CSS 的一些额外功能，比如代码行和代码复制按钮，使用 CSS 和 JavaScript 到我喜欢分享的个人使用。请随意使用github源代码。
回答by Daniel C
This javascript library seems excellent:
这个 javascript 库看起来很棒：
UPDATE: I also used this on my Tumblr-based blog because it was easiest to deploy:
更新：我也在我的基于 Tumblr 的博客上使用了它，因为它最容易部署：
https://github.com/google/code-prettify
https://github.com/google/code-prettify
and I have used this one also (some extra features):
我也用过这个（一些额外的功能）：
回答by sholsinger
<pre>would automatically retain your tabs and line-breaks within the bounding pretags. Most browsers automatically default to a monospaced font inside prebut if you want to force it, (which is a good idea) you can use the following CSS:
<pre>将自动在边界pre标签内保留您的制表符和换行符。大多数浏览器会自动默认使用等宽字体，pre但如果您想强制使用它（这是个好主意），您可以使用以下 CSS：
pre { font-family: monospace; }
I would recommend that you notplace code directly into a <blockquote>element. It is semantically incorrect.
我建议您不要将代码直接放入<blockquote>元素中。它在语义上是不正确的。
If you want your code to be semantically correct, you should mark it up like this:
如果你希望你的代码在语义上是正确的，你应该像这样标记它：
<pre><code>
My pre-formatted code
here.
</code></pre>
If you are actually "quoting" a block of code, then the markup would be:
如果您实际上是在“引用”一段代码，那么标记将是：
<blockquote><pre><code>
My pre-formatted "quoted" code here.
</code></pre></blockquote>
If you want even better-looking code, you can employ Google Code's Prettifywhich is used by StackOverflowto color code-snippets. It has it's own stylesheets that it automatically imports based on what language it thinks the code is and colors the code accordingly. You can give it a hint as to what language the code is by appending a class.
如果您想要更好看的代码，您可以使用 Google Code 的Prettify，StackOverflow 使用它来为代码片段着色。它有自己的样式表，它会根据它认为代码是什么语言自动导入这些样式表，并相应地为代码着色。您可以通过附加一个类来提示代码是什么语言。
回答by Gopherkhan
Well, you could try using a <pre> tag in your blockquote to preserve the formatting first, and then use a monospaced font, like courier for the css style.
好吧，您可以尝试在块引用中使用 <pre> 标记来首先保留格式，然后使用等宽字体，例如 courier 的 css 样式。
Something like this would work in the css:
像这样的东西可以在 css 中工作：
pre {
font-family: "Courier New"
Courier
monospace;
}
回答by Rishikesh Darandale
You can take a look at the prismjsto highlight the code.
您可以查看prismjs以突出显示代码。
You can customise the package as your wish from hereand the footprint of this package will be still minimal.
您可以从这里按照您的意愿自定义包，并且该包的占用空间仍然很小。
Once you have a package, then you can use it as below:
一旦你有了一个包，你就可以使用它，如下所示：
<!DOCTYPE html>
<html>
<head>
...
<link href="themes/prism.css" rel="stylesheet" />
</head>
<body>
...
<script src="prism.js"></script>
</body>
</html>
Once the above setup is done, then you can use it like below:
完成上述设置后，您可以像下面这样使用它：
<pre><code class="language-css">p { color: red }</code></pre>
回答by FatherStorm
First, I would show the code in a <pre> </pre>element give the pre element a nice style in your css and call it a day.
首先，我会在一个<pre> </pre>元素中显示代码，在你的 css 中给 pre 元素一个漂亮的样式，并称它为一天。
