如何使用CSS设置代码清单样式？ [英] How can I style code listings using CSS?

问题描述

我想在使用CSS的HTML文档中显示编程语言代码段以及HTML代码。我希望它缩进并使用固定宽度的字体...我在想类似的东西：

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:

<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.

如何使用CSS做到这一点？

How can I accomplish this using CSS?

推荐答案

分享我在网站上使用的示例，我在样式表中确实使用了以下 pre ：

Sharing an example I use in website, I do use following pre in my stylesheet:

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;
}

这将产生以下结果：

免责声明：在闲暇时间，我花了几个小时来更新此CSS具有一些额外的功能，例如代码行和将CSS与JavaScript结合使用的代码复制按钮，供我个人使用，我想与他人分享。请根据需要使用 github 源代码。

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.

这篇关于如何使用CSS设置代码清单样式？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！