WeChat official account Markdown editor

WeChat official account article Markdown online editor, use markdown syntax to create a beautiful and elegant WeChat official account image and text. Due to the troublesome release of the version, and the development of some functions that cannot be extended, we will no longer develop Chrome plug-ins (temporarily stored in the chrome branch), and customize richer functions through the web version.

Github: https://github.com/jaywcjlove/wxmp
Official website: https://jaywcjlove.github.io/wxmp

Features

The development plan and some function introductions can be mentioned in the issue if there is a need to make the tool more perfect. The following example is used for effect display in web application.

• [x] Support all basic syntax of Markdown
• [x] Support custom CSS styles
• [x] Support theme selection & edit preview.
• [x] Support both light and dark theme preview.
• [ ] Support color selection from color wheel, quickly replace the overall color tone of the article
• [x] Support URL parameters to load Markdown content.
• [x] Support URL parameter selection preview theme.

Code block style support

The following is jsx code block display example, and highlight the code for effect display in web application.

 function Demo() {
  return <div className="demo">Hello World!</div>
}

The following is css code block display example, and highlight the code for effect display in web application.

 li {
  font-size: 16px;
  margin: 0;
  line-height: 26px;
  color: rgb(30 41 59);
  font-family:-apple-system-font,BlinkMacSystemFont, Helvetica Neue, PingFang SC, Hiragino Sans GB , Microsoft YaHei UI , Microsoft YaHei ,Arial,sans-serif;
}

Support for inline code

It is used for effect display in web applications.

Inline Code {code: 0}

Support form

The table cannot use custom styles, and no solution has been found for the time being

Header 1	Header 2
Key 1	Value 1
Key 2	Value 2
Key 3	Value 3

Support for GFM footnotes

This is a footnote ² in simple Markdown ¹ syntax. There are some additional text descriptions at the end of the page. Note that this is not the full Footnote ³ feature.

support annotation

 <ruby>
  汉 <rt>Han</rt>
</ruby>

Chinese phonetic effect:
<ruby>
Han<rt>Han</rt>
word <rt>zi</rt>
spell <rt>pin</rt>
sound <rt>yin</rt>
Note <rt>zhu</rt>
sound <rt>yin</rt>
</ruby>

Support custom styles

<!--rehype:style=color: red;-->

HTML comments in Markdown can also be used in markdown, take advantage of this feature to customize the style for some content. Use HTML comments <!--rehype:xxx--> <!--rehype:style=color: red;background: #ff000033;--> Make Markdown support style customization.

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

支持对某些文字变更样式，如_文字颜色_<!--rehype:style=color: red;-->，文字颜色将被设置为红色(red)。

⚠️ Note: This feature may be suitable for users with some basic knowledge of CSS front-end, but it is also very simple, start with <!--rehype:style= --> , end with ---31658c88168a610fb343d8445fb04ef6---, and wrap CSS styles in the middle, such color: red; Set the text to red.

mark ignored content

This feature uses the HTML comments that are ignored in markdown to mark the content that needs to be ignored. The mark starts <!--rehype:ignore:start--> , the mark ends <!--rehype:ignore:end--> , and the marked content is in the WeChat Markdown editor preview Do not show. Show content in other preview tools, such as GitHub.

 # 注释忽略

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

Support URL parameters to load Markdown content

 https://<URL>?md=<Markdown 资源 URL>

Example URL to load Markdown content:

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

Markdown URL 地址: https://raw.githubusercontent.com/jaywcjlove/c-tutorial/master/README.md

Theme customization

The default theme is stored in the directory src/themes , and the theme is configured in src/store/context.tsx . The theme uses css to define styles and does not support complex selectors. Provide an online theme editor, welcome to modify and PR into the warehouse for everyone to use.

 /* 1~6 标题样式定义 */
h1 {} h2 {} h3 {} h4 {} h5 {} h6 {}
a { color: red; } /* 超链接样式定义 */
strong {} /* 加粗样式定义 */
del {} /* 删除线样式定义 */
em {}  /* 下划线样式定义 */
u {}   /* 下划线样式定义 */
p {}   /* 段落样式定义 */
ul {}  /* 无序列表样式定义 */
ol {}  /* 有序列表样式定义 */
li {}  /* 列表条目样式定义 */
blockquote {} /* 块级引用样式定义 */
table {}
td {}
th {}
pre {}        /* 样式定义 */
.code-highlight {} /* 代码块样式定义 */
.code-line {}      /* 代码块行样式定义 */
.code-spans {}     /* 代码块行样式定义 */

sup {} /* GFM 脚注样式定义 */
.footnotes-title {} /* GFM 脚注，参考标题样式定义 */
.footnotes-list {} /* GFM 脚注，参考列表样式定义 */

.image-warpper {} /* 图片父节点样式定义 */
.image {} /* 图片样式定义 */

/* 部分代码高亮样式 */
.comment {}
.property {}
.function {}
.keyword {}
.punctuation {}
.unit {}
.tag {}
.color {}
.selector {}
.quote {}
.number {}
.attr-name {}
.attr-value {}

deploy

Easily deploy the "WeChat Official Account Markdown Editor" website application through docker.

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

 docker run --name wxmp --rm -d -p 96611:3000 wcjiang/wxmp:latest
# Or
docker run --name wxmp -itd -p 96611:3000 wcjiang/wxmp:latest
# Or
docker run --name wxmp -itd -p 96611:3000 ghcr.io/jaywcjlove/wxmp:latest

Visit the following URL in your browser

 http://localhost:96611/

Contributor

As always, thanks to our wonderful contributors!

The list of contributors in the figure above is automatically generated by action-contributors ⁴ .

License

Licensed under the MIT License.

---

1. GitHub-style Markdown specification https://github.github.com/gfm/ ↩
2. Footnotes https://github.blog/changelog/2021-09-30-footnotes-now-supported-in-markdown-fields/ ↩
3. WeChat articles do not support anchor jumps and open third-party URL hyperlinks, so they do not support full footnote features. ↩
4. Action Contributors https://github.com/jaywcjlove/github-action-contributors ↩