Html 在我的网站上使用 xhtml/css 创建“编程代码框”？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5793214/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Creating "Programming Code Box" on my website w/ xhtml/css?
提问by Titus
Hey guys, How do I make a code box for programming languages on my website, with xhtml or css? http://www.cplusplus.com/doc/tutorial/functions2/I'm trying to do boxes similiar to those?
嘿伙计们，如何使用 xhtml 或 css 在我的网站上为编程语言制作代码框？ http://www.cplusplus.com/doc/tutorial/functions2/我正在尝试制作与那些类似的盒子？
E: Okay since people asking, I'm not really good at css/html, but I'm really into learning it, and like I already mentioned in the comments, I've only managed to do an ordered list with lightgray bg color and darkgray dashed 1 (or 2) px border, and then margin to around 2px. Then I'll get the line numbers, and a cool looking box, but it's nothing as advanced as the thing on cplusplus.com, and that's what I'd like to learn :>
E：好吧，既然有人问，我不太擅长 css/html，但我真的很想学习它，就像我在评论中已经提到的那样，我只设法用浅灰色 bg 颜色做了一个有序列表和深灰色虚线 1（或 2）px 边框，然后边距为 2px 左右。然后我会得到行号，和一个看起来很酷的盒子，但它没有 cplusplus.com 上的东西那么先进，这就是我想学习的 :>
回答by Titus
To be completely honest, it will be very difficult for you to replicate a code box like that on CplusPlus.com.
老实说，您很难在CplusPlus.com上复制这样的代码框。
While it is easy to do the basic things (font style, styling the coded box), it is really challenging to create a decent syntax highlighting script (usually done in JavaScript, but sometimes in a server side language like PHP).
虽然做基本的事情很容易（字体样式、编码框的样式），但创建一个体面的语法突出显示脚本（通常用 JavaScript 完成，但有时用服务器端语言（如 PHP）完成）确实具有挑战性。
So below I have posted some code that will create a decent "code box" with plain code in it (no syntax highlighting, and no line numbers). While it's simple, I think it will be a great start to get you going.
所以在下面我发布了一些代码，这些代码将创建一个体面的“代码框”，其中包含纯代码（没有语法突出显示，也没有行号）。虽然这很简单，但我认为这将是一个很好的开始。
A quick note:If you want text highlighting functionality, I suggest you use a pre-made code highlighting script (such as SyntaxHighlighter, which I highly recommend) or a pre-made formatted code editing script (like CodePress).
快速说明：如果您想要文本突出显示功能，我建议您使用预先制作的代码突出显示脚本（例如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>And that's it! A simple "code box" with some sample JavaScript code in it. You can expand your horizons from there :)
就是这样！一个简单的“代码框”，其中包含一些示例 JavaScript 代码。你可以从那里扩大你的视野:)
Good luck!
祝你好运！
回答by LWC
Shortened the code from https://stackoverflow.com/a/5794241/4829915and made it have an auto width:
缩短来自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>