为什么你的技术博客需要专业的高亮方案？
作为一名网站运营者，我们知道细节决定留存。如果你在分享技术教程或代码片段，古腾堡编辑器默认那种灰扑扑、排版混乱的代码块会极大降低读者的阅读欲望。一个专业、美观的代码块不仅能提高可读性，还能通过“一键复制”等交互功能提升用户体验（UX）。
今天，我们就基于强大的 Bricks Theme，手把手教你搭建一套“大厂级别”的代码高亮系统。
核心功能亮点
- 极速加载：不依赖外部 CDN，资源完全托管在你的子主题中，秒开不卡顿。
- 视觉盛宴：采用经典的 Tomorrow Night 配色，配合 12px 圆角和悬浮阴影，质感拉满。
- 智能交互：
- 自动识别：无需手动设置，脚本自动识别 PHP、HTML、CSS 等语言。
- 一键复制：内置汉化反馈，点击即显
√已复制。 - 行号对齐：精准的行号显示，方便读者快速定位。
- 完美的圆角：通过 CSS 容器裁剪技术，彻底解决了工具栏与代码块交界处的“尖角”难题。
实现思路简述
我们放弃了沉重的插件，转而使用轻量级的 Prism.js（在https://prismjs.com/download.html中下载对应的主题、代码、功能，然后在古腾堡中额外css填入code-php/code-sql等方式）。通过在 Bricks 子主题的 functions.php 中注入一小段“魔法”代码：
<?php
add_action('wp_enqueue_scripts', function () {
if (is_singular('post')) {
$uri = get_stylesheet_directory_uri() . '/assets/prism';
wp_enqueue_style('prism-local-style', $uri . '/prism.css', array(), '1.29.0');
wp_enqueue_script('prism-local-script', $uri . '/prism.js', array(), '1.29.0', true);
}
}, 20);
add_action('wp_footer', function () {
if (!is_singular('post')) return;
?>
<script id="bricks-prism-universal-fix">
(function(){const setupPrism=()=>{const preBlocks=document.querySelectorAll('pre');if(preBlocks.length===0)return;preBlocks.forEach(pre=>{const code=pre.querySelector('code');if(code){const customLangMatch=pre.className.match(/code-(\w+)/);if(customLangMatch){const lang=customLangMatch[1];code.classList.add(`language-${lang}`);pre.classList.add(`language-${lang}`)}
const currentLangMatch=code.className.match(/language-(\w+)/);if(currentLangMatch){const fullLangClass=currentLangMatch[0];if(!pre.className.includes(fullLangClass))pre.classList.add(fullLangClass)}else{code.classList.add('language-php');pre.classList.add('language-php')}
pre.classList.add('line-numbers');pre.classList.add('match-braces');pre.classList.add('collapsed')}});if(window.Prism){Prism.highlightAll();const handleCopyFeedback=()=>{document.querySelectorAll('.copy-to-clipboard-button').forEach(btn=>{if(btn.innerText.toLowerCase().includes('copy')||btn.innerText==='')btn.innerText='复制';if(!btn.dataset.observed){btn.addEventListener('click',function(){btn.innerText='√已复制';btn.style.color='#8cc2ff';setTimeout(()=>{btn.innerText='复制';btn.style.color='#fff'},2000)});btn.dataset.observed="true"}})};
setTimeout(handleCopyFeedback,500);setTimeout(handleCopyFeedback,1500);const handleCollapseToggle=()=>{document.querySelectorAll('.code-toolbar').forEach(toolbar=>{if(toolbar.querySelector('.collapse-toggle'))return;const toolbarDiv=toolbar.querySelector('.toolbar');if(!toolbarDiv)return;const pre=toolbar.querySelector('pre[class*="language-"]');if(!pre)return;const toggleItem=document.createElement('div');toggleItem.className='toolbar-item collapse-toggle';toggleItem.innerHTML='<span class="collapse-icon">▸</span>';toggleItem.title='折叠/展开代码';const firstItem=toolbarDiv.firstChild;toolbarDiv.insertBefore(toggleItem,firstItem);const langItem=toggleItem.nextElementSibling;if(langItem){const leftGroup=document.createElement('div');leftGroup.className='toolbar-group-left';toolbarDiv.insertBefore(leftGroup,toggleItem);leftGroup.appendChild(toggleItem);leftGroup.appendChild(langItem)}
toggleItem.addEventListener('click',function(e){e.stopPropagation();pre.classList.toggle('collapsed');const icon=this.querySelector('.collapse-icon');icon.textContent=pre.classList.contains('collapsed')?'▸':'▾'})})};setTimeout(handleCollapseToggle,500);setTimeout(handleCollapseToggle,1500)}};window.addEventListener('load',setupPrism);setTimeout(setupPrism,1000)})();
</script>
<style>
.code-toolbar{position:relative!important;margin:1em 0!important;border-radius:12px!important;overflow:hidden!important;background-color:#1d1f21!important;box-shadow:0 10px 30px rgba(0,0,0,.4)}
.code-toolbar .toolbar{position:absolute!important;top:0!important;left:0!important;width:100%!important;height:46px!important;opacity:1!important;visibility:visible!important;display:flex!important;align-items:center;justify-content:space-between;padding:0 15px;background:rgba(0,0,0,.4)!important;border-bottom:1px solid rgba(255,255,255,.08);box-sizing:border-box;z-index:10}
.toolbar-item>span{display:inline-block!important;color:#8cc2ff!important;font-size:11px!important;font-weight:700!important;text-transform:uppercase;padding:4px 12px!important;background:rgba(140,194,255,.1)!important;border:1px solid rgba(140,194,255,.2)!important;border-radius:6px!important;letter-spacing:.5px}
.code-toolbar .toolbar-item button{background:#444!important;color:#fff!important;border:1px solid #555!important;border-radius:6px!important;padding:5px 14px!important;font-size:11px!important;font-weight:600!important;cursor:pointer;transition:all .2s ease;outline:none!important}
.code-toolbar .toolbar-item button:hover{background:#555!important}
pre[class*="language-"]{margin:0!important;padding:48px 0 8px 0!important;background:transparent!important;border-radius:0!important;height:auto!important;max-height:5000px!important;max-width:100%!important;overflow-x:auto!important;overflow-y:hidden!important;-webkit-overflow-scrolling:touch;transition:max-height .4s ease}
pre[class*="language-"].line-numbers code{display:block!important;padding:10px 1.5em 10px 4.5em!important;margin:0!important;white-space:pre!important;color:#c5c8c6!important;font-family:'Fira Code','Consolas',monospace!important;font-size:14px!important;line-height:1.85!important;text-shadow:none!important}
.line-numbers .line-numbers-rows{position:absolute!important;top:10px!important;left:0!important;width:3.5em!important;height:calc(100% - 20px)!important;border-right:1px solid rgba(255,255,255,.1)!important;background:transparent!important}
.line-numbers-rows>span:before{color:#5c6370!important;text-align:right;padding-right:12px}
pre[class*="language-"]::-webkit-scrollbar{height:6px;background:transparent}
pre[class*="language-"]::-webkit-scrollbar-track{background:rgba(255,255,255,.04);border-radius:3px}
pre[class*="language-"]::-webkit-scrollbar-thumb{background:rgba(255,255,255,.15);border-radius:3px;transition:background .2s ease}
pre[class*="language-"]::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.25)}
.code-toolbar .toolbar-item.collapse-toggle{cursor:pointer!important;user-select:none;padding:4px 6px!important;margin-right:2px;border-radius:6px!important;transition:background .2s ease;display:flex!important;align-items:center;justify-content:center}
.code-toolbar .toolbar-item.collapse-toggle:hover{background:rgba(255,255,255,.08)!important}
.collapse-icon{display:inline-block!important;font-size:14px!important;color:#8cc2ff!important;line-height:1}
.toolbar-group-left{display:flex!important;align-items:center;gap:2px}
pre[class*="language-"].collapsed{max-height:200px!important;overflow:hidden!important;position:relative}
pre[class*="language-"].collapsed::after{content:'';position:absolute;bottom:0;left:0;width:100%;height:60px;background:linear-gradient(transparent,#1d1f21);pointer-events:none;z-index:5}
</style>
<?php
}, 100);- 后端脚本：强制在文章单页加载必要的 CSS 和 JS。
- 前端逻辑：动态修补古腾堡生成的 HTML 结构，自动注入语言标签和工具栏。
- 自定义样式：通过
!important级 CSS 覆盖，确保不受主题默认样式的干扰，解决常见的行距重叠和滚动条问题。
结语
一个优秀的技术网站，代码块的颜值就是它的门面。通过这套针对 Bricks Theme 深度优化的方案，你不仅能获得媲美 GitHub 的展示效果，更能保持网站的轻量与高效。
