WeChat Markdown editor: simple and efficient WeChat graphic layout tools, a key to paste the article to the WeChat public number

General Introduction

WeChat Markdown Editor (WeChat Markdown Editor) is a highly concise WeChat graphic layout tool designed to help users easily create beautiful WeChat posts. The editor supports all basic Markdown syntax and provides rich features such as mathematical formulas, Mermaid chart rendering, code block highlighting, custom theme colors and CSS styles, multi-image uploading, file importing and exporting, and more. Users only need to master the basic Markdown syntax, you can quickly generate simple style, beautiful layout of the WeChat graphic content. The project is based on Vue3 development, providing online editor and Docker image deployment, which is convenient for users to edit and publish anytime and anywhere.

Online Editor: Direct Access Online editor address maybe alternate addressWe recommend using Chrome for best results.

Function List

• Supports all the basic syntax of Markdown
• Rendering of mathematical formulas and Mermaid charts
• Rich Code Block Highlighting Theme
• Custom theme colors and CSS styles
• Multi-image upload function
• File import and export function
• Local article management and draft autosave
• Support for multiple graph bed configurations (e.g. GitHub, Aliyun, Tencent Cloud, etc.)
• Docker Image Deployment

Using Help

Customizing the upload logic

In case the tool doesn't provide predefined image beds, you just need to customize the upload logic, which is useful if, for example, you're not comfortable with public image beds and use your own upload service instead.

You just need to change the upload code in the given function, which for convenience provides some parameters that may be used:

Sample code:

const { file, util, okCb, errCb } = CUSTOM_ARG
const param = new FormData()
param.append(`file`, file)
util.axios
.post(`http://127.0.0.1:9000/upload`, param, {
headers: { 'Content-Type': `multipart/form-data` }, })
})
.then((res) => {
okCb(res.url)
})
.catch((err) => {
errCb(err)
})
// Available parameters supplied.
// CUSTOM_ARG = {
// content, // the base64 of the image to be uploaded
// file, // file object of the image to be uploaded.
// util: {
// axios, // an instance of axios.
// CryptoJS, // crypto library
// OSS, // tiny-oss
// COS, // cos-js-sdk-v5
// Buffer, // buffer-from
// uuidv4, // uuid
// qiniu, // qiniu-js
// tokenTools, // Some encoding conversion functions.
// getDir, // Get a directory in year/month/day form.
// getDateFilename, // Get the file name as timestamp + uuid.
// }, // getDateFilename, // get it as timestamp+uuid based on filename.
// okCb: resolve, // Important! Just pass the url to this callback after a successful upload.
// errCb: reject, // the function to call if the upload failed
// }

If you've created upload code that works for other third-party graphic beds, you're more than welcome to share it.

How to develop and deploy

# Install dependencies
npm i

# start development mode
npm start

# is deployed in the /md directory
npm run build
# Visit http://127.0.0.1:9000/md

# is deployed in the root directory
npm run build:h5-netlify
# Visit http://127.0.0.1:9000/

Rapidly build private services

Way 1. Use npm cli

[](https://github.com/doocs/md#-1--npm-cli )

With our npm cli you can easily build your own WeChat Markdown editor.

# Installation
npm i -g @doocs/md-cli

# startup
md-cli

# Access
open http://127.0.0.1:8800/md/

# startup and specify the port
md-cli port=8899

# Access
open http://127.0.0.1:8899/md/

md-cli supports the following command line arguments:

• port Specify the port number, default is 8800, if it is occupied a new port will be used randomly.
• spaceId dcloud Service Space Configuration
• clientSecret dcloud Service Space Configuration

Way 2. Using Docker images

If you're a Docker user, you can also start a fully owned, privately run instance directly with a single command.

docker run -d -p 8080:80 doocs/md:latest

Once the container is up and running, open your browser and visit http://localhost:8080.

Guidelines for use

1. basic operation::
   • Open the online editor or local instance and go to the editing screen.
   • Enter Markdown syntax in the editing area and preview the effect in real time.
   • Use the buttons in the toolbar to make formatting adjustments such as bolding, italics, lists, etc.
2. Advanced Features::
   • formula: Use LaTeX syntax to enter math formulas such as $E=mc^2$The
   • Mermaid Chart: Enter Mermaid syntax to create flowcharts, sequence diagrams, etc., such as:

    graph TD.
   A-->B.
   A-->C; B-->D; A-->B; B-->D; B-->D
   B-->D; C-->D; C-->D; C-->D; C-->D; C-->D
   C-->D.
   

   • Code Block Highlighting: Create code blocks using triple quotes plus the name of the language, e.g.:

    def hello_world().
   print("Hello, world!")
   

   • Custom Styles: Add custom CSS styles in Settings to adjust the appearance of posts.
   • Multi-image upload: Click the Image button in the toolbar to select multiple images to upload and configure the image bed.
   • File Import and Export: Conveniently manage article files using the import and export functions in the File menu.
3. Map bed configuration::
   • GitHub Tupelo: Configure the Repo and Token parameter, see the GitHub documentation for detailed steps.
   • Aliyun OSS: Configure the AccessKey ID, AccessKey Secret, Bucket and Region parameters, see the AliCloud documentation for detailed steps.
   • Tencent Cloud COS: Configure SecretId, SecretKey, Bucket and Region parameters, see Tencent Cloud documentation for detailed steps.
   • Other graphic beds: Configure other graph beds such as Seven Bulls Cloud, MinIO, Cloudflare R2, etc. as needed.

caveat

• Some browser plugins may affect the article style, it is recommended to use the editor in plugin-free mode.
• If you encounter missing styles or rendering issues, you can refer to the project's GitHub discussion forum or submit feedback on the issue.

With the above steps, users can easily get started with WeChat Markdown Editor and quickly create and publish high-quality WeChat graphic content.