以下是纯 CSS 实现的简单代码高亮效果:
/* 代码块基础样式 */
pre {
background: #1e1e1e;
color: #d4d4d4;
padding: 15px;
border-radius: 6px;
overflow-x: auto;
font-family: Consolas, Monaco, 'Courier New', monospace;
line-height: 1.5;
position: relative;
margin: 1em 0;
}
/* 行内代码样式 */
code {
background: #2d2d2d;
color: #d4d4d4;
padding: 2px 4px;
border-radius: 3px;
font-family: Consolas, Monaco, 'Courier New', monospace;
}
/* PHP 关键字颜色 */
.php-keyword {
color: #569cd6;
}
/* 字符串颜色 */
.php-string {
color: #ce9178;
}
/* 注释颜色 */
.php-comment {
color: #6a9955;
}
/* 变量颜色 */
.php-variable {
color: #9cdcfe;
}
/* 函数颜色 */
.php-function {
color: #dcdcaa;
}
/* 数字颜色 */
.php-number {
color: #b5cea8;
}
<pre>
<code>
<span class="php-keyword">public function</span> <span class="php-function">getUpdatesNeeded</span>() {
<span class="php-keyword">return</span> <span class="php-keyword">array</span>(
<span class="php-string">'core'</span> => <span class="php-keyword">false</span>,
<span class="php-string">'plugins'</span> => <span class="php-keyword">array</span>(),
<span class="php-string">'themes'</span> => <span class="php-keyword">array</span>()
);
}
</code>
</pre>
优点:
- 无需任何 JavaScript
- 无需外部依赖
- 加载速度快
- 完全可控
缺点:
- 需要手动添加类名
- 不支持自动语法高亮
- 维护成本较高
如果你的代码量不大,这种方案是可行的。但如果需要处理大量代码,还是建议使用专门的语法高亮工具。