gusi formatter
gusangciren32 downloads把 Markdown 实时转成可直接粘贴进微信公众号的富文本 HTML，右侧即时预览、一键复制。内置四套中文排版主题，支持自定义主题。
- Overview
- Scorecard
- Updates10
An Obsidian plugin that converts Markdown into WeChat-ready rich text HTML in real time — live preview in the side pane, one-click copy, four built-in Chinese typography themes.
古思排版：把 Markdown 实时转成可直接粘贴进微信公众号的富文本 HTML，右侧即时预览、一键复制，内置四套中文排版主题。
Features
- Real-time conversion — Markdown → rich text HTML with all styles inlined (WeChat only accepts inline styles)
- Side pane preview — see the real typography as you type, what you see is what you paste
- Scroll sync — the preview follows the editor line by line, so scrolling to the bottom of your note takes the preview with it
- One-click copy — paste straight into the WeChat editor, no reformatting
- Four built-in themes — ready out of the box, no CSS pasting needed
- Custom themes — add, edit and delete your own CSS themes in the settings, and export any theme's CSS with one click
Built-in themes
| Theme | Look | Good for |
|---|---|---|
| 默认主题 (Default) | Editorial skeleton, black/white/grey with a single accent of yellow, left-aligned headings (Monocle-like) | General long-form writing |
| 古思 (Gusi) | Clean sans-serif body flow | Everyday WeChat posts |
| 古思·全端一致 (Gusi Consistent) | LXGW WenKai, warm white background, dark headings, zero decoration | Brand-consistent columns |
| 宣纸水墨 (Xuanzhi Ink) | Rice-paper background, cinnabar headings, 2.05 line height for slow reading | Essays, book reviews, airy articles |
All four themes are adapted for the WeChat editor: no pseudo-elements, pseudo-classes or media queries (those get stripped by WeChat), restrained border radius, explicit line height.
Installation
From the community plugins directory: Obsidian → Settings → Community plugins → Browse → search "gusi formatter" → Install & enable.
Manually: download main.js, manifest.json and styles.css from the latest GitHub release into <your vault>/.obsidian/plugins/gusi-formatter/, then restart Obsidian and enable the plugin.
Usage
- Open a Markdown note
- Click the eye icon in the left ribbon to open the preview pane
- Pick a theme from the toolbar dropdown
- Click "Copy HTML" and paste into the WeChat editor
Scroll sync
The preview pane follows the editor automatically — scroll the note to the bottom and the preview goes with it. Alignment is line-based (each block carries its source line number), not percentage-based, so the preview lands on the same paragraph you are reading.
The toolbar has a small chain button next to "Copy HTML" that turns scroll sync on and off:
- on (accent colour) — the preview follows the editor
- off (greyed out) — the two panes scroll independently
Scrolling sync is on by default. Settings → Gusi Formatter → Scroll sync direction picks which side follows which: editor to preview only (default), or both directions.
Custom themes
Settings → Gusi Formatter → Custom themes → Add custom theme, then paste your CSS.
How to write a theme: the outermost container is section#markdown2wechatHtml, with children like p / h1–h4 / blockquote / pre code.hljs. Declare the theme name in a header comment:
/**
* name: My theme
* description: One line description
*/
Build (developers)
npm install
npm run build # output in dist/gusi-formatter/
The build uses esbuild (the original rollup + rollup-plugin-typescript2 chain no longer works on current Node). To add a built-in theme, just drop a CSS file into themes/ — prebuild regenerates the index automatically, no TypeScript changes needed.
Credits & license
Forked from imhaiqiao/obsidian-convert-markdown-to-html-plugin — thanks to the original author Haiqiao. The core conversion and preview logic come from the original project; this fork mainly adds Chinese typography themes and WeChat-specific adaptations.
MIT License, see LICENSE.
中文说明
它能干什么
- 实时转换：Markdown → 微信公众号可直接粘贴的富文本 HTML，样式全部内联（微信只认内联样式）
- 侧栏预览：右侧面板即时看到排版后的真实效果，所见即所得
- 滚动同步：编辑区滚到哪，预览区跟到哪，按行对齐而不是按百分比
- 一键复制：复制后直接粘进公众号后台，不用再调格式
- 四套内置主题：装完就有，不用自己粘贴 CSS
- 自定义主题：可以在设置里新增、编辑、删除自己的 CSS 主题，也能一键导出当前主题的 CSS
内置主题
| 主题 | 气质 | 适合 |
|---|---|---|
| 默认主题 | 报刊骨架，黑白灰 + 唯一一点黄，标题左对齐（仿 Monocle） | 不挑字体，通用长文 |
| 古思 | 苹方系公众号正文流 | 日常公众号推送 |
| 古思·全端一致 | 霞鹜文楷，暖白底，深色标题，零装饰 | 品牌统一的专栏文章 |
| 宣纸水墨 | 宣纸底、朱砂标题、行高 2.05 的慢读节奏 | 随笔、书评、需要呼吸感的文章 |
四套主题都为微信公众号环境做过适配：不使用伪元素、伪类和媒体查询（这些在微信里会被丢弃），圆角克制，行高显式声明。
安装
方式一：Obsidian → 设置 → 第三方插件 → 社区插件市场 → 搜索「gusi formatter」→ 安装并启用。
方式二（手动）：从 GitHub Releases 下载最新的 main.js、manifest.json、styles.css，放到 <你的库>/.obsidian/plugins/gusi-formatter/ 下，重启 Obsidian 启用。
使用
- 打开一篇 Markdown 笔记
- 点左侧栏的眼睛图标，打开排版预览面板
- 在工具栏的下拉里选主题
- 点「Copy HTML」，粘贴到公众号后台
滚动同步
预览面板会跟着编辑区走——笔记滚到底，预览也跟到底。对齐是按行号算的（每个块都带着自己的源文件行号），不是按百分比，所以预览停靠的位置就是你正在读的那一段。
工具栏上（"Copy HTML" 旁边）有个小小的链条按钮，一键开关滚动同步：
- 开（强调色）：预览跟随编辑区
- 关（灰色）：两边各自独立滚动
默认是开的。设置 → Gusi Formatter → Scroll sync direction 里选「哪边跟哪边」：仅编辑区到预览（默认），或双向。
自定义主题
设置 → Gusi Formatter → Custom themes → Add custom theme，粘贴 CSS 即可。
主题 CSS 的写法：最外层容器是 section#markdown2wechatHtml，子元素写 p / h1–h4 / blockquote / pre code.hljs 等。头部可以写注释声明主题名：
/**
* name: 我的主题
* description: 一句话说明
*/
来源与许可
本项目 fork 自 imhaiqiao/obsidian-convert-markdown-to-html-plugin，原作者 Haiqiao，在此致谢。核心转换与预览逻辑来自原项目，本项目主要增加了中文排版主题与微信端适配。
MIT License，详见 LICENSE。