html - 在我的网站上使用 xhtml/css 创建 "Programming Code Box"？

Question

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

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

我正在尝试制作与那些类似的盒子？

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

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 代码。您可以从那里扩展您的视野:)

祝你好运!