如何在HTML中使用代码块_Html_Css

如何在HTML中使用代码块

html css

如何在HTML中使用代码块,html,css,Html,Css,我需要写一些博客。为此，我需要粘贴一些程序代码我想使用与此类似的代码块 Similar to this 我尝试使用代码或预处理，但没有产生相同的输出如何在HTML中实现它？您可能希望在级联样式表（）中实现它。创建一些具有所需外观的CSS，标记为的东西应该具有这种外观。例如： <html> <head> <style type="text/css"> code { background-color: gray; color: blue; } </st

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

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

Similar to this

我尝试使用代码或预处理，但没有产生相同的输出

如何在HTML中实现它？

您可能希望在级联样式表（）中实现它。创建一些具有所需外观的CSS，标记为


的东西应该具有这种外观。例如：
<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中进行大量格式化。将
用于短文本块（如关键字），或将
用于较大的文本块。在标题的“样式”部分中为“小”块和“大”块创建条目以定义外观，但请使用比以下名称更好的类名：）。玩得开心

更新：本质上，突出显示是通过CSS正确完成的，上面简单手动显示（技术上也可以使用内联样式，但这是一个丑陋的解决方案）。正如其他答案所示，有一些库可以通过JavaScript自动执行高亮显示过程，JavaScript在呈现页面时检查并高亮显示源代码块。它们基本上提供了丰富的CSS，并自动应用span
和div
标记，并且可以应用特定于语言的规则，使代码看起来像现代IDE编辑器一样，格式非常精细。
如果您要寻找语法突出显示，您需要第三方解决方案。javascript库或服务器端脚本。对于简单的一行文章来说，这是一个快速解决方案，但对于50多行的复杂代码列表来说，这将是一场噩梦