如何在HTML页面显示代码，实现代码高亮效果
在网页开发中，有时我们需要在HTML页面中展示代码片段，无论是为了教学、文档说明，还是展示技术细节，代码的清晰展示都至关重要。本文将详细介绍如何在HTML页面中显示代码，并实现代码高亮效果，提升用户体验。
1. 使用<pre>和<code>标签显示代码
在HTML中，<pre>标签用于保留文本中的空格和换行符，而<code>标签则用于表示代码片段。通过结合这两个标签，可以轻松地在网页中展示代码。，以下是一个简单的HTML代码片段：
<html>
<head>
<title>示例页面</title>
</head>
<body>
<h1>欢迎来到我的网站</h1>
</body>
</html>
通过这种方式，代码的格式会被完整保留，用户可以直接看到代码的结构。这种方法的缺点是代码没有高亮效果，阅读体验较差。
2. 使用第三方库实现代码高亮
为了提升代码的可读性，可以使用第三方库来实现代码高亮效果。目前最流行的代码高亮库是Prism.js和Highlight.js。以下是使用Highlight.js的示例：
- 在HTML文件的
<head>部分引入Highlight.js的CSS和JavaScript文件：
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/default.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/highlight.min.js"></script>
- 在需要显示代码的地方使用
<pre>和<code>标签，并为<code>标签添加语言类名。，以下是一个JavaScript代码片段：
function helloWorld() {
console.log("Hello, World!");
}
- 在页面加载完成后初始化Highlight.js：
<script>
document.addEventListener('DOMContentLoaded', (event) => {
document.querySelectorAll('pre code').forEach((block) => {
hljs.highlightBlock(block);
});
});
</script>
通过这种方式，代码不仅会被正确显示，还会根据语法进行高亮，提升用户的阅读体验。
3. 自定义代码高亮样式
如果你对默认的高亮样式不满意，可以通过自定义CSS来调整代码高亮的效果。，以下是一个简单的CSS样式，用于改变代码的背景颜色和字体颜色：
pre code {
background-color: #f4f4f4;
color: #333;
padding: 10px;
border-radius: 5px;
}
通过这种方式，你可以根据网站的整体设计风格，调整代码高亮的样式，使其更加符合你的需求。
在HTML页面中显示代码并实现高亮效果并不复杂。通过使用<pre>和<code>标签，结合第三方库如Highlight.js，你可以轻松地在网页中展示格式清晰、高亮效果良好的代码。通过自定义CSS，你还可以进一步优化代码的显示效果，提升用户的阅读体验。
非特殊说明，本文版权归原作者所有，转载请注明出处
