如何使用CSS设置代码清单的样式？
我想在使用CSS的HTML文档中显示编程语言代码和HTML代码的片段.我希望它缩进并使用固定宽度的字体...我想的是:
<blockquote style="some_style">
my code here
my code here also
</blockquote>
并且它以一种格式很好的方式出现(如果是彩色编码,则奖励,但不一定是.
我怎样才能使用CSS实现这一目标？
may*_*ʎɐɯ 51
分享我在网站上使用的一个例子,我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;
}
这给出了以下结果:
- @JivkoJelev 当时间允许时我会让它响应:) (2认同)
Dan*_*l C 38
这个javascript库看起来很棒:
更新:我也在我的基于Tumblr的博客上使用它,因为它最容易部署:
https://github.com/google/code-prettify
我也使用过这个(一些额外的功能):
http://alexgorbatchev.com/SyntaxHighlighter/
sho*_*ger 19
<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使用它来为代码片段着色.它有自己的样式表,它根据它认为代码的语言自动导入,并相应地为代码着色.您可以通过附加类来提示代码是什么语言.
好吧,你可以尝试在你的blockquote中使用<pre>标签来保留格式,然后使用等宽字体,比如css样式的courier.
像这样的东西可以在css中工作:
pre {
font-family: "Courier New"
Courier
monospace;
}
您可以查看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>