头像

酚酞

韬光养晦,再夺天时

在Typecho内使用prism代码高亮

安装方法

先去官网 https://prismjs.com/download.html 自定义需要下载的语言和插件

引入 Prism

下载 Prism.jsprism.css 文件到主题目录(/usr/themes/your-theme/js/ 和 /css/
在主题中添加以下代码

  <!-- 在header.php中添加CSS -->
 <link rel="stylesheet" href="<?php $this->options->themeUrl('css/prism.css'); ?>">
 
 <!-- 在footer.php中添加JS -->
 <script src="<?php $this->options->themeUrl('js/prism.js'); ?>"></script>

手动添加代码行号

我发现prism自带的分行用不了,也可能是我部署有问题,于是自行在footer.php加入script

抄作业

 <script>
// markdown中代码自动序号
document.addEventListener('DOMContentLoaded', function() {
    document.querySelectorAll('pre code').forEach(function(codeBlock) {
        codeBlock.parentElement.classList.add('line-numbers');
 });

    if (typeof Prism !== 'undefined') {
        Prism.highlightAll();
    }
});
</script>

💬 留言

© 2025 - 2026 Chipzel - 酚酞 | Created by FTaoo