5

我需要做一些博客发布。为此，我需要粘贴我的程序的一些代码。

我想使用与此类似的代码块

Similar to this

我尝试使用code或pre但它没有产生相同的输出。

如何在 HTML 中做到这一点？

4

2 回答 2

5

您可能希望在级联样式表 ( CSS ) 中执行此操作。创建一些具有您想要的外观的 CSS，并且标记为的内容<code>应该具有该外观。例如：

<html>
<head>
<style type="text/css">
code { background-color: gray; color: blue; }
</style>
</head>
<body>
<p>Some code:</p>
<code>My code...</code>
</body>
</html>

您可以在 CSS 中进行大量格式化。用于<span class="small_block">短文本块（如关键字）或<div class="big_block">更大的块。在标题的样式部分中为 small_block 和 big_block 创建条目以定义外观，但请使用比这些更好的类名:)。玩得开心！

更新：在深处，突出显示是通过 CSS 正确完成的，上面简单手动显示（技术上内联样式也是可能的，但这是一个丑陋的解决方案）。正如其他答案所示，有些库可以通过 JavaScript 在呈现页面时检查并突出显示您的源代码块，从而自动化突出显示过程。它们基本上提供了丰富的 CSS 并自动应用span和div标记，并且可以应用特定于语言的规则使代码看起来非常精细地格式化，就像现代 IDE 编辑器一样。

于 2012-04-30T05:53:15.253 回答
0

我建议你使用这个

<code> how to use <span style="background-color: #33cccc;">for </span> in nectoPoint.</code>

它更容易，因为颜色看起来像是被标记为

于 2022-01-30T02:21:18.360 回答