一个基于highlight.js的代码高亮组件，支持多种编程语言的语法高亮显示
组件简介
本代码高亮组件基于highlight.js构建，支持HTML、CSS、JavaScript和PHP四种常用编程语言的语法高亮。组件具有响应式设计、支持代码复制功能、可切换的主题样式以及行号显示等特性，为开发者提供美观、实用的代码展示体验。
组件特性
- 支持HTML、CSS、JavaScript和PHP四种编程语言的语法高亮
- 响应式设计，适配各种屏幕尺寸
- 提供多种主题样式选择
- 自动生成行号，支持行号显示/隐藏
- 代码复制功能，一键复制代码内容
- 支持代码折叠/展开功能
- 支持暗色/亮色模式切换
- 支持代码搜索和高亮功能
HTML代码示例
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>代码高亮组件示例</title>
<link rel="stylesheet" href="/static/css/codes.css">
</head>
<body>
<div class="container">
<header class="page-header">
<h1>欢迎使用代码高亮组件</h1>
</header>
<main class="main-content">
<div class="code-example">
<pre><code class="language-javascript">// 这里是JavaScript代码示例
function helloWorld() {
console.log('Hello, world!');
}</code></pre>
</div>
</main>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/highlight.min.js"></script>
<script>
hljs.highlightAll();
</script>
</body>
</html>