兜兜转转，我又用回了 prism 代码高亮。这次回归，总算解决了之前 php 代码不高亮的问题，并且将一些想要的功能基本加上去了（长代码折叠打开还没实现）。

一、下载代码

从代码仓库下载或克隆代码，将整个目录放入自己的主题文件夹内，并命名为 prism

二、在主题目录下新建一个 loadprism.php

该文件的内容主要包含 6 个部分

1. 在 body 标签中添加 line-numbers 类
2. 引入 prism 基础库
3. 对主题进行了判断，对应黑白模式分别引用不同的主题
4. 引入工具栏、复制按钮、行号、缩进美化插件
5. 引入自动加载高亮语言插件（也可自定义语言高亮组件，见注释掉的部分）
6. prism 高亮代码自定义 css 样式

注意：如果手动指定语言的代码高亮，引入的 php 代码高亮组件，是依赖 prism-markup、prism-markup-templating 两个组件的，因此，这两个组件也必须引用，否则不但不高亮，还会影响其他语言的高亮。

<?php if (!defined('__TYPECHO_ROOT_DIR__')) exit; ?>

<script>
    document.getElementsByTagName("body")[0].classList.add("line-numbers");
</script>

<!-- prismjs高亮开始 -->

<!-- prism基础js -->
<script src="<?php $this->options->themeUrl('prism/prism.js'); ?>"></script>

<!-- prism主题选择 -->
<link id="prismthemecss" href="" rel="stylesheet">
<script>
    function loadhighlightstyle() {
        var linkElement = document.getElementById("prismthemecss");
        if (document.getElementsByTagName("html")[0].classList.contains("dark")) {
            linkElement.href = "<?php $this->options->themeUrl('prism/themes/prism-tomorrow.min.css'); ?>";
        } else {
            linkElement.href = "<?php $this->options->themeUrl('prism/themes/prism.min.css'); ?>";
        }
    }
    loadhighlightstyle();
</script>

<!-- prism插件 -->
<!-- 工具栏 -->
<script src="<?php $this->options->themeUrl('prism/plugins/toolbar/prism-toolbar.min.js'); ?>"></script>
<link href="<?php $this->options->themeUrl('prism/plugins/toolbar/prism-toolbar.min.css'); ?>" rel="stylesheet">
<!-- 复制按钮 -->
<script src="<?php $this->options->themeUrl('prism/plugins/copy-to-clipboard/prism-copy-to-clipboard.min.js'); ?>"></script>
<!-- 行号 -->
<script src="<?php $this->options->themeUrl('prism/plugins/line-numbers/prism-line-numbers.min.js'); ?>"></script>
<link href="<?php $this->options->themeUrl('prism/plugins/line-numbers/prism-line-numbers.min.css'); ?>" rel="stylesheet">
<!-- 去掉缩进前多余的空格 -->
<script src="<?php $this->options->themeUrl('prism/plugins/normalize-whitespace/prism-normalize-whitespace.min.js'); ?>"></script>


<!-- 自动加载高亮语言插件 -->
<script src="<?php $this->options->themeUrl('prism/plugins/autoloader/prism-autoloader.min.js'); ?>"></script>

<!-- php代码组件 -->
<!-- <script src="</?php $this->options->themeUrl('prism/components/prism-markup.min.js'); ?>"></script> -->
<!-- <script src="</?php $this->options->themeUrl('prism/components/prism-markup-templating.min.js'); ?>"></script> -->
<!-- <script src="</?php $this->options->themeUrl('prism/components/prism-php.min.js'); ?>"></script> -->
<!-- sql代码高亮 -->
<!-- <script src="</?php $this->options->themeUrl('prism/components/prism-sql.min.js'); ?>"></script> -->


<!-- prismjs高亮结束 -->


<!-- /* prism 样式 */ -->
<style>
    /* code-toolbar 顶部 banner 效果 */
    .code-toolbar {
        margin: 1rem 0;
        border-top-left-radius: .35rem;
        border-top-right-radius: .35rem;
        background-color: rgba(0, 0, 0, .2);
        padding-top: 2rem !important;
    }

    .code-toolbar:before {
        content: "";
        position: absolute;
        border-radius: 50%;
        background: #fc625d;
        width: .8rem;
        height: .8rem;
        left: 1rem;
        top: 1rem;
        box-shadow: 1.4rem 0 #fdbc40, 2.8rem 0 #35cd4b;
        z-index: 2;
    }

    /* 让行号不滚动 */
    .code-toolbar pre {
        position: static !important;
        padding-top: .5rem !important;
        overflow-x: auto;
    }

    .code-toolbar pre code {
        position: static !important;
        padding-top: .5rem !important;
        padding-left: 0;
    }

    .line-numbers .line-numbers-rows {
        top: 3rem;
        /*code-toolbar.padding-top + pre.padding-top + code.padding-top*/
        left: 0;
        padding-left: 0 !important;
        backdrop-filter: blur(10000rem);
    }

    /* 复制按钮文字颜色修复 */
    .copy-to-clipboard-button {
        color: grey !important;
    }

    .copy-to-clipboard-button:hover {
        color: aliceblue !important;
    }

    /* 去掉讨厌的操作符背景 */
    .token.operator {
        background: none;
    }
</style>

三、在 header.php 或 foot.php 适当位置加载 loadprism.php 文件

<!-- 加载高亮 -->
<?php $this->need('loadprism.php'); ?>