微信公眾號文章 Markdown 在線編輯器，使用 markdown 語法創建一篇簡介美觀大方的微信公眾號圖文。由於發版本麻煩，和一些功能無法擴展停滯開發了，未來不再開發 Chrome 的插件(暫存在 chrome 分支)，通過 web 版本定製更豐富的功能。

Github: https://github.com/jaywcjlove...
官網：https://jaywcjlove.github.io/...

功能特性

開發計劃和一些功能介紹，有需求可以在 issue 中提，使得工具變得更加完善。下面示例用於 web 應用中效果展示。

• [x] 支持 Markdown 所有基礎語法
• [x] 支持自定義 CSS 樣式
• [x] 支持主題選擇 & 編輯預覽。
• [x] 支持明暗兩種主題預覽。
• [ ] 支持色盤取色，快速替換文章整體色調
• [x] 支持 URL 參數加載 Markdown 內容。
• [x] 支持 URL 參數選擇預覽主題。

支持代碼塊樣式

下面是 jsx 代碼塊展示示例，並高亮代碼，用於 web 應用中效果展示。

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

下面是 css 代碼塊展示示例，並高亮代碼，用於 web 應用中效果展示。

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

支持內聯代碼

用於 web 應用中效果展示。

Inline Code {code: 0}

支持表格

表格無法使用自定義樣式，暫時沒找到解決途徑

支持 GFM 腳註

這是一個簡單的 Markdown¹ 語法的腳註²。 頁面最後有一些額外的文字描述。注意這不是完整的註腳³特性。

支持註釋

<ruby>
  漢 <rt>Han</rt>
</ruby>

漢字注音效果：
<ruby>
漢 <rt>Han</rt>
字 <rt>zi</rt>
拼 <rt>pin</rt>
音 <rt>yin</rt>
注 <rt>zhu</rt>
音 <rt>yin</rt>
</ruby>

支持自定義樣式

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

在 Markdown 中 HTML 註釋也可以用在 markdown 中，利用這一特點，為一些內容自定一樣式。使用 HTML 註釋 <!--rehype:xxx--><!--rehype:style=color: red;background: #ff000033;--> 讓 Markdown 支持樣式自定義。

## 定義標題樣式
<!--rehype:style=display: flex; height: 230px; align-items: center; justify-content: center; font-size: 38px;-->

支持對某些文字變更樣式，如_文字顏色_<!--rehype:style=color: red;-->，文字顏色將被設置為紅色(red)。

⚠️ 注意：這一特性可能適用於有一定 css 前端基礎知識的用户，不過它也非常簡單，使用 <!--rehype:style= 開始，--> 結束，中間包裹 css 樣式，如 color: red; 設置文字紅色。

標記忽略內容

此特性利用 HTML 註釋在 markdown 中被忽略的特性，標記需要忽略的內容，標記開始 <!--rehype:ignore:start-->，標記結束 <!--rehype:ignore:end-->，被標記的內容在微信 Markdown 編輯器預覽中不顯示。在其它預覽工具中展示內容，比如 GitHub 中能展示。

# 註釋忽略

<!--rehype:ignore:start-->內容在微信 Markdown 編輯器預覽中不顯示。在其它預覽工具中展示內容。<!--rehype:ignore:end-->

支持 URL 參數加載 Markdown 內容

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

主題定製

在目錄 src/themes 中存放默認主題，在 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: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

在瀏覽器中訪問以下 URL

http://localhost:96611/

貢獻者

一如既往，感謝我們出色的貢獻者！

上圖貢獻者列表，由 action-contributors⁴ 自動生成貢獻者圖片。

License

根據 MIT 許可證獲得許可。