SuperAPI AI Directory
Partner with us中文AI newsFavorites
Skillstypeset

typeset

Frontend & websites

View repository

Updated 10-16 05:05

About this skill

Typeset — All-in-one editor typesetting Skill

Convert Markdown into beautifully typeset HTML compatible with multiple platforms. Suitable for any AI Agent. Integrates best practices from mdnice, baoyu, wechat-format, md2wechat, and others.

This Skill is a pure Markdown instruction set and does not depend on any specific Agent's proprietary API.

Agent Loading methods
Claude Code ~/.claude/skills/ directory, automatically registered as /typeset
Codex Project root directory or via AGENTS.md reference
Gemini CLI Via GEMINI.md reference or loaded as context
Other Load SKILL.md as a system prompt or context

Reference files (read on demand, not preloaded):

  • references/platform-rules.md — Detailed constraint rules for each platform
  • references/element-specs.md — HTML element rendering templates
  • references/code-themes.md — Code highlighting color table + token rules
  • references/humanizer.md — De-AI-flavor processing module

Invocation format

/typeset <文件路径或内容> [--platform wechat|zhihu|juejin|medium|linkedin|x|blog] [--theme default|elegant|tech|minimal|vibrant] [--humanize] [--code-theme github|one-dark|kimbie]

Default value: platform=wechat, theme=minimal, code-theme=github

Workflow

Step 1: Confirm input

  1. File format detection:
    • Markdown (.md) → use directly
    • Other formats → convert via MarkItDown (markitdown <file> -o <output.md>）
    • Inline text → use directly
  2. Confirm target platform (default WeChat) and theme (default minimal)

MarkItDown supported formats: PDF, DOCX, PPTX, XLSX, HTML, CSV, JSON, XML, images (OCR), audio (transcription), Jupyter Notebook, ZIP Installation: pipx install 'markitdown[all]' --python python3.12

Step 2: Preprocessing

  1. Frontmatter: Parse YAML, extract title/author/description/tags
  2. CJK spacing: automatically add spaces between Chinese and English (Pangu spacing)
  3. Heading cleanup: remove H1 for the WeChat platform (WeChat uses a separate title field)
  4. Link preprocessing: for the WeChat platform, convert external links to plain-text footnotes; keep them on other platforms

Step 3: Optional — humanization processing

If --humanize, read references/humanizer.md and perform de-AI-flavor processing.

Step 4: Render HTML

Core step. In the following order:

  1. Read theme: {{SKILL_DIR}}/themes/<theme>.md
  2. Render elements: read references/element-specs.md, convert each Markdown element into inline-styled HTML according to the specification
  3. Apply platform rules: read references/platform-rules.md for the target platform's constraints
  4. Code highlighting: read references/code-themes.md for the color table corresponding to code-theme
  5. Assemble document: generate the complete HTML

Step 5: Output

  1. Write the HTML file (same directory as the input,.html extension)
  2. Report the path
  3. Suggest the paste method: open in browser → select all → copy → paste into the editor
  4. For the WeChat platform, additionally note that images must be uploaded separately

Theme system

Four-layer architecture

Layer Purpose
Base layer Container, typography foundation (shared by all themes)
Content layer Visual styles for headings, paragraphs, lists, etc.
Code layer Code highlighting (independently toggleable)
Font layer Font family override (optional)

Built-in themes

Theme Style Use case
minimal (Default) Minimalist, generous whitespace General articles, short pieces
default Professional, blue tones Formal reports, technical articles
elegant Literary, warm tones Humanities/Business/Narrative
tech Modern, cool tones Technical tutorials, development docs
vibrant Energetic, green tones Brand content/Marketing
dark Dark, easy on the eyes Tech communities, night reading
notion Notion style Knowledge bases, internal docs
newspaper Newspaper print style In-depth coverage, long-form articles
gradient Modern gradient Product launches

Theme file: {{SKILL_DIR}}/themes/<name>.md Theme preview: {{SKILL_DIR}}/themes/preview.html Custom themes: Create a .md file in the same format under themes/

Platform routing

Before rendering, read the rules for the corresponding platform in references/platform-rules.md .

Platform CSS method Links Code blocks Tables Key constraints
wechat Fully inline Plain text footnotes section+span Scroll container No #000, no pre, no external-link a tags
zhihu Inline Preserve pre/code Normal Use data-eeimg for formulas
juejin Inline Preserve pre/code Normal —
medium Inline Preserve pre (no highlighting) Not supported H1+H2 only, Medium overrides styles
linkedin Inline Preserve Not supported Not supported Images must be uploaded manually
x Inline Preserve pre (no highlighting) Limited Premium feature
blog style tag Preserve pre/code+hljs Normal Full HTML document

Output format

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>{标题}</title>
</head>
<body>
  <section id="nice" style="...">
    <!-- 渲染后的内联样式 HTML -->
  </section>
</body>
</html>

File naming: article.md → article.html

Best practices

  1. Confirm the platform before choosing a theme
  2. Use the tech theme for technical articles
  3. Code blocks recommended to wrap at 80 characters
  4. Humanization processing is recommended before typesetting
  5. WeChat links are always plain text footnotes, do not use <a> tags

Source attribution

Source Contribution
mdnice/markdown-nice Four-layer themes, three-part headings, WeChat CSS
baoyu-markdown-to-html Callout/footnotes/code highlighting, CJK preprocessing
wechat-format Inline styles, list compatibility, subpixel borders
md2wechat-skill Humanization module, image processing
obsidian-markdown Callout taxonomy, Frontmatter specification