使用 xhtml/css 在我的网站上创建“编程代码框”？

Question

如何使用 xhtml 或 css 在我的网站上制作编程语言的代码框？

http://www.cplusplus.com/doc/tutorial/functions2/

我正在尝试做类似于那些的盒子？

E：好的，既然有人问，我不是很擅长 css/html，但我真的很喜欢学习它，就像我在评论中提到的那样，我只设法用浅灰色 bg 颜色做了一个有序列表和深灰色虚线 1（或 2）像素边框，然后边距为 2 像素左右。然后我会得到行号和一个很酷的盒子，但它没有 cplusplus.com 上的东西先进，这就是我想学习的东西 :>

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

Answer 1

老实说，您很难在 CplusPlus.com 上复制这样的代码框。

虽然做基本的事情（字体样式、编码框的样式）很容易，但创建一个像样的语法高亮脚本（通常用 JavaScript 完成，但有时用服务器端语言，如 PHP）确实具有挑战性。

所以在下面我发布了一些代码，这些代码将创建一个像样的“代码框”，其中包含纯代码（没有语法突出显示，也没有行号）。虽然它很简单，但我认为这将是让您继续前进的良好开端。

---

快速说明： 如果您想要文本突出显示功能，我建议您使用预制的代码突出显示脚本（例如我强烈推荐的 SyntaxHighlighter ）或预制的格式化代码编辑脚本（例如 CodePress ）。

     .codebox {
        /* Below are styles for the codebox (not the code itself) */
        border:1px solid black;
        background-color:#EEEEFF;
        width:300px;
        overflow:auto;
        padding:10px;
    }
    .codebox code {
        /* Styles in here affect the text of the codebox */
        font-size:0.9em;
        /* You could also put all sorts of styling here, like different font, color, underline, etc. for the code. */
    }

     <div class="codebox">
        <code>
            var message = "hello world!";
            alert(message);
        </code>
    </div>

就是这样！一个简单的“代码框”，其中包含一些示例 JavaScript 代码。你可以从那里扩大你的视野 :)

祝你好运！

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

Answer 2

缩短了 https://stackoverflow.com/a/5794241/4829915 中的代码并使其具有自动宽度：

 .codebox {
        border:1px solid black;
        background-color:#EEEEFF;
        white-space: pre-line;
        padding:10px;
        font-size:0.9em;
        display: inline-block;
}

     <code class="codebox">
        var message = "hello world!";
        alert(message);
    </code>

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