wxmp - WeChat Official Account Markdown Editor

wxmp is an online Markdown editor specifically designed for creating beautiful and concise articles for WeChat Official Accounts. It allows users to use standard Markdown syntax to generate content that is optimized for the WeChat platform's visual style.

Key Information:

• Primary Use Case: Creating WeChat Official Account articles using Markdown.
• Platform: Primarily a web-based editor. Note that development on the Chrome extension has been paused in favor of expanding features in the web version.
• Deployment Options: Available as a web application and as a desktop application (via releases).

You can load a remote Markdown file directly into the editor by appending the md parameter to the application URL.

URL Format: https://<URL>?md=<Markdown_Resource_URL>

Example: https://jaywcjlove.github.io/wxmp/#/?theme=underscore&md=https://raw.githubusercontent.com/jaywcjlove/c-tutorial/master/README.md

You can apply custom CSS styles directly within your Markdown content using the <!--rehype:style=...--> syntax. This is useful for styling specific text elements or entire blocks like headings. The syntax starts with <!--rehype:style= and ends with -->, with standard CSS properties inside.

Examples:

• Styling text: _text_<!--rehype:style=color: red;--> sets the text color to red.
• Styling headings: <!--rehype:style=display: flex; ...;--> can be used to apply layout styles to a heading.

<!--rehype:style=color: red;background: #ff000033;-->

## 定义标题样式
<!--rehype:style=display: flex; height: 230px; align-items: center; justify-content: center; font-size: 38px;-->

To mark content that should be ignored (hidden) in the WeChat Markdown editor preview but still visible in other Markdown viewers (like GitHub), wrap the content in specific HTML comment tags:

• Start tag: <!--rehype:ignore:start-->
• End tag: <!--rehype:ignore:end-->

# 注释忽略

<!--rehype:ignore:start-->内容在微信 Markdown 编辑器预览中不显示。在其它预览工具中展示内容。<!--rehype:ignore:end-->

You can quickly deploy the WeChat Markdown Editor web application using Docker.

1. Pull the image:

docker pull wcjiang/wxmp
# Or
docker pull ghcr.io/jaywcjlove/wxmp:latest

2. Run the container: Map port 3000 inside the container to port 8113 on your host to access the application.

docker run --name wxmp --rm -d -p 8113:3000 wcjiang/wxmp:latest

After running, access the application at http://localhost:8113/ (Note: The README mentions http://localhost:96611/ but the command uses 8113).

The theme command allows users to switch between different editor themes. It uses a selection menu that iterates through available editorThemes. When a theme is selected, it updates the editor's visual style via the application context.

// The command is exported as an ICommand object
export const theme: ICommand = {
  name: 'theme',
  keyCommand: 'theme',
  button: (command, props, opts) => <ThemeView command={command} editorProps={{ ...props, ...opts }} />,
};

To start the application, instantiate the App class from @wcj/wxmp-main and call createWindow(options). The options object configures the preload script and the web content path.

Depending on the environment, you should provide different paths:

• Development: Use require.resolve to point to @wcj/wxmp-preload and the build directory of the website.
• Production: Use absolute paths for the preload script and relative paths for the web content.

const { App } = require('@wcj/wxmp-main');

(async () => {
  const options = {
    preload: '/path/to/preload.js',
    webpath: '/path/to/index.html'
  };
  const app = new App();
  await app.createWindow(options);
})();

The previeTheme command (note the spelling in the source) allows users to switch the theme of the Markdown preview pane. Selecting a preview theme updates both the previewTheme state and applies the corresponding CSS via setCss from the application context.

// The command is exported as an ICommand object
export const previeTheme: ICommand = {
  name: 'previewTtheme',
  keyCommand: 'previewTtheme',
  button: () => <ThemePreviewView />,
};