doocs-md WeChat Markdown Editor

WeChat Markdown Editor is a tool designed to instantly render standard Markdown into WeChat-ready articles. It eliminates the need for manual formatting in the WeChat Official Account editor by providing clean, well-styled output using standard Markdown syntax.

Key features include:

• Support for math formulas (KaTeX), Mermaid diagrams, PlantUML, and GFM alert blocks.
• Ruby annotation extensions: [text]{ruby} and [text]^(ruby).
• Customizable code highlight themes and CSS.
• Local draft management with auto-save and cloud sync capabilities.
• Extensive image hosting support (GitHub, S3, OSS, etc.).
• AI assistant integration (OpenAI, DeepSeek, etc.).

The @md/core package is a Markdown rendering engine designed to convert Markdown into HTML optimized for WeChat Official Accounts. It provides tools to initialize a renderer, convert Markdown to HTML, and apply specific themes via CSS injection.

import { initRenderer, renderMarkdown } from '@md/core'
import { postProcessHtml } from '@md/core/utils'

const renderer = initRenderer({
  isMacCodeBlock: true,
  isShowLineNumber: true,
})

const html = postProcessHtml(renderMarkdown(renderer, markdown))

The @md/shared package provides shared configurations, types, utilities, and CodeMirror editor encapsulation used across different applications in the ecosystem. You can import specific modules based on your needs:

• @md/shared: Main entry point.
• @md/shared/configs: Default configurations and option lists for themes, fonts, colors, etc.
• @md/shared/constants: Constants used across the project.
• @md/shared/types: Shared TypeScript type definitions.
• @md/shared/utils: Utility functions such as fetch and tokenTools.
• @md/shared/editor: CodeMirror 6 setup, formatting commands, and keyboard shortcuts.

Cloud synchronization in the Web application uses a Last Write Wins (LWW) merge strategy.

• Settings Sync: Only keys defined in SYNC_SETTING_KEYS (found in apps/web/src/services/sync/settings.ts) are synchronized. This includes items like marketplace_installed_themes and marketplace_installed_components.
• Metadata: Synchronization metadata is stored in sync_settings_meta.
• Hot Updates: Remote settings can be applied without a page refresh via hydrateSyncedSettings (in services/sync/hydrate.ts), which writes directly to the local Store (including locale).

After logging into your account, certain editor preferences are synchronized to the cloud to allow recovery on other devices.

Synchronization Strategy: The system uses a Last Write Wins (LWW) policy. If the same setting is modified on two different devices, the version with the most recent update timestamp will be used. There is no merge dialog; the later save will overwrite the previous one.

To ensure the rendered HTML matches the desired visual style, you must inject CSS. This is done using either:

• @md/core/theme's applyTheme method.
• In Web environments, using useThemeStore.applyCurrentTheme() to inject CSS variables.

The editor provides several advanced features for content creation:

• Syntax Support: Standard Markdown, KaTeX (mathematical formulas), Mermaid diagrams, PlantUML, and GFM alert blocks.
• Ruby Annotations: Supports Ruby text with formats [text]{annotation} and [text]^(annotation).
• Code Blocks: Multiple highlighting themes with customizable theme colors and CSS.
• Content Management: Built-in local draft management with auto-save and cloud synchronization for editor preferences.
• Image Hosting: Supports various image hosting services (see Image Hosting Services).
• AI Integration: Integrated with mainstream AI models like DeepSeek, OpenAI, Tongyi Qianwen, Tencent Hunyuan, Volcengine Ark, and 302.AI to assist in writing.

You can highlight key points or create academic environments using two syntaxes: > [!type] (Blockquote style) or ::: type ... ::: (Container style).

Callout Types

Common built-in types include:

• [!NOTE]: Informational.
• [!TIP]: Helpful advice.
• [!IMPORTANT]: Critical information. You can add a custom title: > [!IMPORTANT] Custom Title.
• [!WARNING]: Critical attention required.

Academic Environments

Supports specialized containers for academic writing:

• ::: theorem [Title]
• ::: definition
• ::: proof
• ::: lemma

Unrecognized types will render as a titled box using the provided name.

> [!TIP]
> This is a tip.

::: theorem Pythagorean theorem
$a^2 + b^2 = c^2$
:::

The editor supports embedding LaTeX syntax for mathematical expressions.

Inline Formulas

Wrap the formula with single dollar signs $: $E = mc^2$. Alternatively, use the standard LaTeX format: \(x^2 + y^2 = z^2\).

Block Formulas

Wrap the formula with double dollar signs $$:

$$ \begin{aligned} d_{i, j} &\leftarrow d_{i, j} + 1 \end{aligned} $$

Alternatively, use the standard LaTeX format: \[ \int_{-\infty}^{\infty} e^{-x^2} dx = \sqrt{\pi} \].

Tip: In the preview area, you can click on LaTeX formulas to open a built-in formula editor for quick modifications.

$E = mc^2$

$$
\chi^2 = \sum \frac{(O - E)^2}{E}
$$

\(x^2 + y^2 = z^2\)

\[
\int_{-\infty}^{\infty} e^{-x^2} dx = \sqrt{\pi}
\]

The @md/api uses an incremental synchronization model to keep articles and preferences in sync between the client and the cloud.

Core Logic:

• Strategy: Uses last-write-wins (LWW) based on the updateDatetime field.
• Deletions: Uses "soft delete tombstones" to ensure deletions are propagated across clients.
• Client Workflow: The frontend follows a "pull then push" pattern:
  1. Call GET /sync/pull?since=<timestamp> to fetch all changes since the last sync.
  2. Apply changes locally.
  3. Call POST /sync/push to upload local changes. The server returns the accepted records and a new cursor.

Data Scope: Syncs include articles (and history) and a whitelist of preference settings. Crucially, it does not sync image hosting keys or AI keys.