让Typecho支持CodeHighlight

先看样式

/**
 * JavaScript 代码示例，用于展示各种语法高亮样式。
 */

// 箭头函数示例
const greet = (name) => {
    if (!name) {
        console.error('请输入一个有效的名字！');
        return;
    }
    console.log(`Hello, ${name}!`);
};

// 函数声明示例（递归函数计算阶乘）
function factorial(n) {
    if (n < 0) {
        throw new Error('负数没有阶乘');
    }
    return n === 0 ? 1 : n * factorial(n - 1);
}

// 数组与 map 方法示例
const numbers = [1, 2, 3, 4, 5];
const results = numbers.map((num) => {
    return {
        number: num,
        square: num * num,
        factorial: factorial(num),
    };
});

// 控制台输出结果
console.table(results);

// try-catch 示例
try {
    greet('World');
    console.log(`5 + 10 = ${5 + 10}`);
} catch (error) {
    console.error('发生错误:', error);
}

起步

根据作者hongweipeng的开源项目CodeStyle_for_typecho修改，重新在highlightjs官网勾选需要的语言,下载打包后的文件并替换项目中的css,js资源。

修改部分如下：

1. 增加外边框
2. 显示当前语言
3. 增加复制按钮
4. 插件设置中选择样式文件时去除后缀.css或.min.css
5. 使用iframe沙箱隔离css样式

使用方法

第一步：下载本插件，放在 usr/plugins/ 目录中；

第二步：文件夹名改为TypechoCodeHighlight；

第二步：登录管理后台，激活插件；

github开源地址：https://github.com/huangyixu/TypechoCodeHighlight

与我联系：

作者：Ammmm
主页：https://blog.huangyixu.cn
或者通过 Emai: [email protected]
有任何问题也可评论留言

感谢

代码行显示支持:

https://github.com/wcoder/highlightjs-line-numbers.js