如何使用 CSS 设置代码列表的样式？

Question

我想使用 CSS 在 HTML 文档中显示编程语言代码片段以及 HTML 代码。我希望它缩进并使用固定宽度的字体……我在想这样的事情：

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

并以格式良好的方式显示它（如果它是颜色编码的，则奖励，但不一定是。

我如何使用 CSS 完成此操作？

原文由 user248237 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

这给出了以下结果：

免责声明： 在我的闲暇时间，我花了几个小时来更新这个 CSS，增加一些额外的功能，比如代码行和代码复制按钮，使用 CSS 和 JavaScript 供我个人使用，我喜欢分享。请随意使用 github 源代码。要查看现实世界中的代码示例，请查看我博客中的这篇 文章，其中展示了我如何使用代码示例。

原文由 Maytham Fahmi 发布，翻译遵循 CC BY-SA 4.0 许可协议