Build a Seamless Writing Toolchain with VS Code, Markdown, and Plugins

01

SOC – Separation of Concerns Principle

The author first introduces the Separation of Concerns (SOC) principle, which suggests breaking a complex problem into independent aspects and solving each separately before integrating the results.

Applying SOC to writing, the process is divided into four stages: planning, content creation, article formatting, and multi‑platform publishing.

02

Planning Design

To produce articles at a high frequency, relying solely on spontaneous inspiration is insufficient; successful creators often use a predefined structure. The author cites Li Xiaolai’s article framework, which includes sections such as concept definition, importance, common misunderstandings, significance, correct usage, pitfalls, and related concepts.

Three main tools are used for the planning stage:

Visual Studio Code – a lightweight, extensible code editor that supports many languages and can also be used for writing.

vscode‑mindmap – a VS Code extension that lets users create and edit mind‑map files side‑by‑side with markdown, avoiding heavyweight tools like XMind.

File Templates – an extension that provides ready‑made file templates for recurring formats, enabling quick insertion of predefined structures.

Example: a mind‑map template mirroring Li Xiaolai’s structure is saved and can be inserted with Ctrl+Shift+P in VS Code.

03

Content Writing

After planning, the author writes using the built‑in markdown WYSIWYG plugin in VS Code, comparable to a free version of Typora.

For additional diagram needs, the open‑source Draw.io Integration plugin is recommended.

04

Article Formatting

Because platforms like WeChat public accounts and Zhihu have limited markdown support, the author uses the Markdown Here Chrome extension, which allows custom CSS styling. After installing, personal style rules are entered in the highlighted area to format the article before publishing.

05

Multi‑Platform Publishing

The workflow for publishing is:

Copy the markdown content into an email client or simditor.tower.im and apply the Markdown Here extension for one‑click formatting.

Paste the formatted content into the WeChat public account editor, adjust images, and save the draft.

Finally, copy the content from the WeChat editor into Zhihu’s editor, preserving both style and images, then publish.

This step‑by‑step process ensures consistent appearance across platforms despite their limited native markdown support.