Vditor_for_Typecho：赋予 Typecho 前台更强大的 Markdown 解析能力

A Typecho plugin that enhances frontend Markdown presentation with richer rendering and polished code blocks.
Supports Mermaid, ECharts, KaTeX, syntax highlighting, code block theme switching, and copy/download actions.
Created by Codex.

Vditor_for_Typecho 是一款专为 Typecho 深度定制的前台渲染增强插件。
它与传统的编辑器插件不同，核心设计目标是“前台增强”。它完全不会接管或改变你熟悉的后台编辑器，而是保留 Typecho 原生 PHP Markdown 渲染流程。在数据输出到前台后，通过轻量级的 JS 脚本，为文章内容补充更完整、更具现代感的视觉样式和交互能力，让你的技术博客瞬间拥有文档级的展示水准。

下载与支持

附件下载：

开源仓库：
https://github.com/0LIE1/Vditor_for_Typecho

核心功能深度概览

本插件旨在解决原生 Markdown 渲染单调、功能不足的问题，提供的核心能力包括：

• 全方位样式重塑： 彻底替换 Typecho 前台陈旧的 Markdown 排版，引入现代化的间距、行高与排版逻辑。
  Vditor 官方内容主题： 内置四种高品质主题，包括轻盈的 light、深邃的 dark、优雅的 ant-design 以及专为阅读优化的 wechat 风格，适配各种站点氛围。
  全能图形渲染引擎：
  • Mermaid： 支持流程图 (Flowchart)、时序图 (Sequence)、甘特图 (Gantt)、状态图以及各类高级关系图。
    ECharts： 允许直接在 ```echarts 代码块中编写 JSON 配置，实时生成交互式的数据可视化图表。
  极致的代码展示：
  • 集成 highlight.js，支持上百种编程语言的精准语法高亮。
    增强型工具栏：自动识别语言标签，内置一键复制、一键下载代码文件的功能。
    提供 Ice, Forest, Midnight 等 6 种预设代码块配色，支持后台实时预览切换。
  数学公式支持： 完美支持 KaTeX 语法，渲染高效、精美的行内公式（如 $E=mc^2$）。

设计思路与优势

插件遵循“非侵入式”开发原则，确保你的站点稳健运行：

• 数据安全性： Markdown 内容仍由 Typecho 服务端进行基础解析，不修改数据库字段，即便卸载插件，文章内容依然完整可读。
  轻量化加载： 只有在检测到页面包含公式、图表或代码块时，才会按需触发增强逻辑，最大程度优化页面加载速度。
• 兼容性优先： 无需替换后台写作界面，无需强制改变现有主题的文章存储方式，适合那些对原有写作习惯有依赖的创作者。

环境与部署要求

• 核心系统：Typecho 1.2+ (推荐)
  写作习惯：文章内容必须使用 Markdown 格式编写。
• 网络环境：前台环境需能正常访问 CDN 资源，插件默认从 unpkg.com 加载必要的动态依赖库。

安装指南

方法 A：手动安装 (推荐)

下载源码并解压，确保文件夹命名为 Vditor_for_Typecho。

将该文件夹上传至你的 Typecho 根目录下的 /usr/plugins/ 路径中。

登录后台，进入“控制台 -> 插件”，找到 Vditor_for_Typecho 点击“启用”。

启用后点击“设置”，根据偏好配置代码块风格与 CDN 版本号。

方法 B：Git 极速安装

git clone https://github.com/0LIE1/Vditor_for_Typecho.git ./usr/plugins/Vditor_for_Typecho

典型使用示例

1. Mermaid 复杂流程图
在编辑器中直接输入以下代码块，即可生成美观的流程图：

graph TD
A[用户访问] --> B{解析器检测}
B -- 包含图表 --> C[动态加载依赖]
B -- 仅普通文本 --> D[快速呈现]
C --> E[美化渲染完成]
D --> E

2. ECharts 数据可视化
使用标准的 JSON 格式配置图表，插件会自动将其转化为图形：

{
  "title": { "text": "插件使用频率" },
  "xAxis": { "type": "category", "data": ["周一", "周二", "周三", "周四", "周五"] },
  "yAxis": { "type": "value" },
  "series": [{ "type": "line", "data": [820, 932, 901, 934, 1290], "smooth": true }]
}

3. 科学计算与数学公式
支持标准的 TeX/LaTeX 语法，例如行内公式：

将被完美渲染。

下载与支持

附件下载：

开源仓库：
https://github.com/0LIE1/Vditor_for_Typecho[/size]

界面效果展示

沟通交流
如果你在使用过程中遇到任何样式冲突或渲染问题，欢迎通过以下方式反馈：

致谢： 本插件的诞生离不开 Vditor, ECharts, KaTeX 以及 highlight.js 等开源社区的杰出贡献。

作者： Codex