gpt4 book ai didi

html - 如何在 HTML 中使用代码块

转载 作者:搜寻专家 更新时间:2023-10-31 08:36:01 24 4
gpt4 key购买 nike

我需要写一些博客。为此,我需要粘贴我的程序的一些代码。

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

Similar to this

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

如何在 HTML 中做到这一点?

最佳答案

您可能希望在级联样式表 (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">对于短文本 block ,如关键字,或 <div class="big_block">对于更大的 block 。在标题的样式部分为 small_block 和 big_block 创建条目以定义外观,但请使用比那些更好的类名:)。玩得开心!


更新:在深处,突出显示是通过 CSS 正确完成的,如上图所示(技术上内联样式也是可能的,但这是一个丑陋的解决方案)。正如其他答案所示,有些库可以通过 JavaScript 自动执行突出显示过程,JavaScript 在呈现页面时检查并突出显示您的源代码块。他们基本上提供丰富的CSS并应用spandiv自动标记,并且可以应用特定于语言的规则使代码看起来非常精心格式化,就像现代 IDE 编辑器一样。

关于html - 如何在 HTML 中使用代码块,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10379015/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com