Skip to content

Russellgogogogo/CodeHighlight-For-Typecho

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

2 Commits
 
 
 
 

Repository files navigation

Typecho 代码高亮插件 (CodeHighlight)

一个美观、功能丰富的 Typecho 代码高亮插件,基于 Prism.js 实现。支持多种编程语言、多种主题风格,并集成了行号显示、代码复制等实用功能。

✨ 功能特点

  • 💡 智能语法高亮

    • 基于 Prism.js 实现的代码高亮
    • 支持多种常用编程语言(PHP、JavaScript、Python、Java、HTML、CSS等)
    • 自动识别编程语言
  • 🎨 丰富的主题选择

    • 默认主题 - 经典的浅色主题
    • 暗色主题 - 护眼的深色主题
    • Coy主题 - 带渐变效果的主题
    • Okaidia主题 - 类似Sublime Text的主题
    • Twilight主题 - 柔和的暗色主题
    • Solarized Light主题 - 对比度适中的浅色主题
    • Tomorrow主题 - 清新现代的主题
    • Material主题 - Material Design风格主题
    • One Dark主题 - 类似macOS终端的现代深色主题
  • 📑 行号显示

    • 可选择是否显示行号
    • 行号与代码完美对齐
    • 自适应代码块高度
  • 📋 快捷复制功能

    • 一键复制代码内容
    • 复制成功后有反馈提示
    • 支持所有主流浏览器
  • 🏷️ 语言标记显示

    • 在代码块左上角显示编程语言类型
    • 自动识别并显示语言标记

🚀 安装方法

  1. 下载本插件
  2. 将插件解压到 Typecho 的 /usr/plugins 目录下
  3. 确保插件文件夹名为 CodeHighlight
  4. 登录 Typecho 后台,进入"控制台 -> 插件"
  5. 找到 "CodeHighlight",点击"启用"

⚙️ 配置说明

在插件配置面板中,你可以进行以下设置:

  1. 主题选择

    • 可选择不同的代码高亮主题
    • 主题会实时生效
  2. 行号显示

    • 选择是否显示代码行号
    • 默认开启

📝 在文章中使用方法

1. 多行代码块

在文章编辑器中使用三个反引号(```)包裹代码,并在开头指定语言类型:

```php

```

```javascript console.log("Hello World"); ```

```python print("Hello World") ```

2. 行内代码

使用单个反引号(`)包裹代码:

这是一段inline code行内代码。

3. 支持的编程语言

以下是部分支持的语言标识符:

  • php - PHP代码
  • javascriptjs - JavaScript代码
  • python - Python代码
  • java - Java代码
  • html - HTML代码
  • css - CSS代码
  • sql - SQL代码
  • bash - Shell脚本
  • markdown - Markdown文本

如果不指定语言,可以直接使用: ``` 这是一段普通代码 ```

4. 特性说明

  • 行号显示:每个代码块默认显示行号(可在后台设置关闭)
  • 代码复制:每个代码块右上角都有复制按钮
  • 语言标记:左上角显示编程语言类型
  • 主题切换:可在后台选择不同的代码高亮主题

5. 使用技巧

  1. 长代码建议

    • 对于较长的代码,建议使用多行代码块而不是行内代码
    • 始终指定编程语言以获得最佳的高亮效果
  2. 行内代码使用场景

    • 适合在段落中标注简短的代码片段
    • 适合标注变量名、函数名等
  3. 主题选择

    • 建议选择与你的博客主题风格搭配的代码高亮主题
    • 可以在后台随时切换主题并预览效果

🌐 支持的语言

默认支持以下编程语言的语法高亮:

  • HTML (Markup)
  • CSS
  • JavaScript
  • PHP
  • Python
  • Java
  • Bash
  • SQL
  • C-like

💡 使用建议

  1. 建议在代码块中指定语言类型,以获得最佳的高亮效果
  2. 如果代码较长,建议使用行号功能,方便阅读和引用
  3. 选择适合你网站风格的代码高亮主题

⚠️ 注意事项

  1. 插件依赖 CDN 资源,请确保你的网站能够访问 jsdelivr CDN
  2. 代码复制功能使用了现代的 Clipboard API,在较旧的浏览器中可能不支持
  3. 如果主题中已经包含了 Prism.js,可能会产生冲突,建议与主题开发者沟通

🤝 贡献指南

欢迎提交问题反馈和功能建议!

📄 开源协议

本插件采用 MIT 协议开源,欢迎自由使用和分发。

🔄 更新日志

v1.0.0

  • 首次发布
  • 支持代码高亮
  • 支持多种主题
  • 添加行号显示功能
  • 添加代码复制功能
  • 添加语言类型标记

About

一个美观、功能丰富的 Typecho 代码高亮插件,基于 Prism.js 实现。支持多种编程语言、多种主题风格,并集成了行号显示、代码复制等实用功能

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

 
 
 

Contributors

Languages

  • PHP 100.0%