wxmp
v2.4.0
微信公眾號文章Markdown 在線編輯器，使用markdown 語法創建一篇簡介美觀大方的微信公眾號圖文。由於發版本麻煩，和一些功能無法擴展停滯開發了，未來不再開發Chrome 的插件(暫存在chrome 分支)，通過web 版本定制更豐富的功能。
開發計劃和一些功能介紹，有需求可以在issue 中提，使得工具變得更加完善。下面示例用於web 應用中效果展示。
下面是jsx代碼塊展示示例，並高亮代碼，用於web 應用中效果展示。
function Demo ( ) {
return < div className = "demo" > Hello World! </ div >
}下面是css代碼塊展示示例，並高亮代碼，用於web 應用中效果展示。
li {
font-size : 16 px ;
margin : 0 ;
line-height : 26 px ;
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;
}用於web 應用中效果展示。
Inline Code {code: 0}
表格無法使用自定義樣式，暫時沒找到解決途徑
| Header 1 | Header 2 |
|---|---|
| Key 1 | Value 1 |
| Key 2 | Value 2 |
| Key 3 | Value 3 |
這是一個簡單的Markdown 1語法的腳註2 。 頁面最後有一些額外的文字描述。注意這不是完整的註腳3特性。
< ruby >
汉 < rt > Han </ rt >
</ ruby >漢字注音效果：漢字拼音注音
在Markdown 中HTML 註釋也可以用在markdown 中，利用這一特點，為一些內容自定一樣式。使用HTML 註釋<!--rehype:xxx-->讓Markdown 支持樣式自定義。
## 定义标题样式
<!-- rehype:style=display: flex; height: 230px; align-items: center; justify-content: center; font-size: 38px; -->
支持对某些文字变更样式，如_文字颜色_ <!-- rehype:style=color: red; --> ，文字颜色将被设置为红色(red)。<!--rehype:style=開始， -->結束，中間包裹css 樣式，如color: red;設置文字紅色。
此特性利用HTML 註釋在markdown 中被忽略的特性，標記需要忽略的內容，標記開始<!--rehype:ignore:start--> ，標記結束<!--rehype:ignore:end--> ，被標記的內容在微信Markdown 編輯器預覽中不顯示。在其它預覽工具中展示內容，比如GitHub 中能展示。
# 注释忽略
<!-- rehype:ignore:start -->内容在微信 Markdown 编辑器预览中不显示。在其它预览工具中展示内容。 <!-- rehype:ignore:end --> https://<URL>?md=<Markdown 资源 URL>
加載Markdown 內容的示例URL：
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
在目錄website/src/themes中存放默認主題，在website/src/store/context.tsx中配置主題，主題使用css定義樣式，不支持複雜的選擇器。提供在線主題編輯器，歡迎修改並PR進倉庫供大家使用。
/* 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 {}輕鬆通過docker 部署《微信公眾號Markdown 編輯器》網站應用。
docker pull wcjiang/wxmp
# Or
docker pull ghcr.io/jaywcjlove/wxmp:latestdocker run --name wxmp --rm -d -p 8113:3000 wcjiang/wxmp:latest
# Or
docker run --name wxmp -itd -p 8113:3000 wcjiang/wxmp:latest
# Or
docker run --name wxmp -itd -p 8113:3000 ghcr.io/jaywcjlove/wxmp:latest在瀏覽器中訪問以下URL
http://localhost:96611/
一如既往，感謝我們出色的貢獻者！
上圖貢獻者列表，由action-contributors 4自動生成貢獻者圖片。
根據MIT 許可證獲得許可。
GitHub 風格的Markdown 規範https://github.github.com/gfm/ ↩
腳註https://github.blog/changelog/2021-09-30-footnotes-now-supported-in-markdown-fields/ ↩
微信文章不支持錨點跳轉和打開第三方URL 超鏈接，所以不支持完整的註腳特性。 ↩
Action Contributors https://github.com/jaywcjlove/github-action-contributors ↩
