我想使用 CSS 在 HTML 文档中显示编程语言代码片段以及 HTML 代码。我希望它缩进并使用固定宽度的字体...我在想类似的东西:
<blockquote style="some_style">
my code here
my code here also
</blockquote>
并让它以一种很好的格式显示(如果它是颜色编码的奖励，但不一定是。
如何使用 CSS 完成此操作？
最佳答案
分享我在网站中使用的示例，我在样式表中使用了以下 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;
}
结果如下:
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 github source code. To see a code example in real world, check this article from my blog that show how I use the code sample.
关于html - 如何使用 CSS 设置代码列表的样式？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/4000792/