typecho 启用代码块 高亮 行号

使用 prismjs 库，jsdelivr cdn

高亮

header.php 中添加默认主题css文件：

<link rel="stylesheet" href="<?php $this->options->themeUrl('style.css'); ?>"> //原本存在
<!-- prismjs--> //添加的注释
<link href="https://cdn.jsdelivr.net/npm/prismjs@1.23.0/themes/prism.css" rel="stylesheet" /> //添加的文件

footer.php 中添加 js 核心文件、自动加载插件：

<?php $this->footer(); ?>
<script src="https://cdn.jsdelivr.net/npm/prismjs@1.23.0/components/prism-core.min.js"></script> //核心文件
<script src="https://cdn.jsdelivr.net/npm/prismjs@1.23.0/plugins/autoloader/prism-autoloader.min.js"</script> //自动加载插件
</body>

行号

header.php:

<link rel="stylesheet" href="<?php $this->options->themeUrl('style.css'); ?>">
<!-- prismjs-->
<link href="https://cdn.jsdelivr.net/npm/prismjs@1.23.0/themes/prism.css" rel="stylesheet" />
<!-- prismjs-lineNumbers -->
<link href="https://cdn.jsdelivr.net/npm/prismjs@1.23.0/plugins/line-numbers/prism-line-numbers.css" rel="stylesheet" />  //行号插件 css
...
</header><!-- end #header -->
<div id="body" class="line-numbers"> //在'body'块 添加 class="line-numbers" 以对全文生效

footer.php:

<?php $this->footer(); ?>
<script src="https://cdn.jsdelivr.net/npm/prismjs@1.23.0/components/prism-core.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/prismjs@1.23.0/plugins/line-numbers/prism-line-numbers.min.js"></script> // 行号插件 js
<script src="https://cdn.jsdelivr.net/npm/prismjs@1.23.0/plugins/autoloader/prism-autoloader.min.js"></script>
</body>

https://prismjs.com/
https://www.jsdelivr.com/package/npm/prismjs