md

WeChat Markdown Editor

Introduction

The WeChat Markdown Editor offers an innovative solution for converting Markdown documents to visually appealing WeChat articles. By leveraging basic Markdown syntax, users can effortlessly create sleek and elegant WeChat content without the hassle of complex formatting.

Online Editor Access

This Markdown editor can be accessed online at:

• https://doocs.github.io/md
• https://doocs-md.pages.dev

For optimal performance, it is recommended to use the Chrome browser.

Reasons for Redevelopment

Existing open-source WeChat Markdown editors often come with overly complex styles which may not meet users' aesthetic preferences. Users frequently need to make manual adjustments, resulting in time-consuming efforts. Therefore, a redevelopment initiative was undertaken to streamline the styling process.

Contributions are welcome to enhance this WeChat Markdown editor. If you have suggestions, feel free to provide feedback in the Discussions area.

Note: The latest version is developed on Vue3. The previous Vue2-based version is no longer maintained. For users requiring Vue2, please refer to the 1.x branch.

Features

• Custom CSS styling
• Support for all basic Markdown syntax, code blocks, and LaTeX formulas
• Light and dark editor themes
• Quick document formatting with Alt + Shift + F
• Color palette for rapid color scheme adjustments
• Support for multi-image uploads with configurable image hosting
• Customizable upload logic
• Right-click to access a functionality menu within the editor
• Batch conversion of local images to online images

Supported Image Hosting

Custom Upload Logic

For situations where predefined hosting services are inadequate, users can define their own upload logic. This is particularly beneficial for those preferring private or self-hosted image uploading services.

A sample implementation using JavaScript is provided, demonstrating how to adjust the upload function:

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)
  })

Development and Deployment

Instructions for setting up the development environment and deploying the WeChat Markdown Editor are straightforward:

# Install dependencies
npm i

# Start in development mode
npm start

# Build for deployment (subdirectory /md)
npm run build

# Build for root directory deployment
npm run build:h5-netlify

Quick Setup for Private Service

Method 1: Using npm CLI

The npm command-line interface (CLI) offers an easy way to set up a personal version of the WeChat Markdown Editor.

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

# Run
md-cli

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

# Run on a specified port
md-cli port=8899

Method 2: Using Docker Image

For Docker users, a single command can launch a self-hosted instance:

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

Opening a web browser and navigating to http://localhost:8080 will give access to the editor.

Usage Examples

Several notable organizations and individuals are utilizing this Markdown editor for WeChat content creation, including Doocs, ApachePulsar, Gitee, and many more. If you would like to showcase your usage of this editor, please leave details in #5.