微信公眾號代碼高亮美化工具

使用?Chrome?瀏覽器把右側(cè)生成的頁面直接拷貝到微信中即可。

https://www.mdnice.com/

//?目錄
[TOC]

• 1. Markdown Nice 簡介

• 2. 主題

• 3. Markdown 通用語法

  • 3.1 標(biāo)題

• 二級標(biāo)題

  • 三級標(biāo)題

  • 3.2 無序列表

  • 3.3 有序列表

  • 3.4 粗體和斜體

  • 3.5 鏈接

  • 3.6 引用

  • 一級引用示例

  • 二級引用示例

  • 三級引用示例

  • 3.7 分割線

  • 3.8 刪除線

  • 3.9 表格

  • 3.10 圖片

• 4. 特殊語法

  • 4.1 腳注

  • 4.2 代碼塊

  • 4.3 數(shù)學(xué)公式

  • 4.4 TOC

  • 4.5 注音符號

  • 4.6 橫屏滑動(dòng)幻燈片

• 5. 其他語法

  • 5.1 HTML

  • 5.2 UML

  • 5.3 更多文檔

1. Markdown Nice 簡介

• 支持自定義代碼主題樣式的 Markdown 編輯器
• 支持微信公眾號、知乎和稀土掘金

2. 主題

https://product.mdnice.com/themes/

歡迎提交主題，提供更多文章示例~~

3. Markdown 通用語法

3.1 標(biāo)題

在文字寫書寫不同數(shù)量的#可以完成不同的標(biāo)題，如下：

#?一級標(biāo)題

##?二級標(biāo)題

###?三級標(biāo)題

一級標(biāo)題

二級標(biāo)題

三級標(biāo)題

3.2 無序列表

無序列表的使用，在符號-后加一個(gè)空格使用。如下：

-?無序列表?1
-?無序列表?2
-?無序列表?3

• 無序列表 1
• 無序列表 2
• 無序列表 3

如果要控制列表的層級，則需要在符號-前使用兩個(gè)空格縮進(jìn)，即?+?-。如下：

-?一級無序列表?1
-?一級無序列表?2
??-?二級無序列表?2.1
??-?二級無序列表?2.2

• 一級無序列表 1
• 一級無序列表 2
  • 二級無序列表 2.1
  • 二級無序列表 2.2

由于微信限制的原因，最多支持到二級列表。

3.3 有序列表

有序列表的使用，在數(shù)字及符號.后加空格后輸入內(nèi)容，如下：

1.?有序列表?1
2.?有序列表?2
3.?有序列表?3

有序列表 1

有序列表 2

有序列表 3

有序列表不支持層級嵌套，即多級列表。

3.4 粗體和斜體

粗體的使用是在需要加粗的文字前后各加兩個(gè)**。

斜體的使用則是在需要斜體的文字前后各加一個(gè)_。

如果要使用粗體和斜體，那么就是在需要操作的文字前后加兩個(gè)**和一個(gè)_， 即?**_?或?_**。如下：

**這個(gè)是粗體**

_這個(gè)是斜體_

**_這個(gè)是粗體加斜體_**

_**這個(gè)是斜體加粗體**_

這個(gè)是粗體

這個(gè)是斜體

這個(gè)是粗體加斜體

這個(gè)是斜體加粗體

注：由于 commonmark 標(biāo)準(zhǔn)，可能會(huì)導(dǎo)致加粗與想象不一致，如下

**今天天氣好晴朗**，處處好風(fēng)光。??

**今天天氣好晴朗?**，處處好風(fēng)光。??

今天天氣好晴朗，處處好風(fēng)光。?

**今天天氣好晴朗 **，處處好風(fēng)光。?

這個(gè)是正常現(xiàn)象，請參考加粗 Issue[1]。

3.5 鏈接

微信公眾號僅支持公眾號文章鏈接，即域名為https://mp.weixin.qq.com/的合法鏈接。使用方法如下所示：

歡迎讀者參與?Weekly Web Dev Challenge?挑戰(zhàn)，Weekly Web Dev Challenge: Short Changed

3.6 引用

引用的格式是在符號?>?后面書寫文字，文字的內(nèi)容可以包含標(biāo)題、鏈接、圖片、粗體和斜體等。

一級引用如下：

>?###?一級引用示例
>?
>?讀一本好書，就是在和高尚的人談話。?**——歌德**
>?
>?[連接描述](https://cdn.xgqfrms.xyz/logo/icon.png)
>?
>?

一級引用示例

讀一本好書，就是在和高尚的人談話。?——歌德

連接描述

圖片描述

當(dāng)使用多個(gè)?>?符號時(shí)，就會(huì)變成多級引用

二級引用如下：

>>?###?二級引用示例
>>
>>?讀一本好書，就是在和高尚的人談話。?**——歌德**
>>
>>?[連接描述](https://cdn.xgqfrms.xyz/logo/icon.png)
>>?
>>?

二級引用示例

讀一本好書，就是在和高尚的人談話。?——歌德

連接描述

圖片描述

三級引用如下：

>>>?###?三級引用示例
>>>
>>>?讀一本好書，就是在和高尚的人談話。?**——歌德**
>>>
>>>?[連接描述](https://cdn.xgqfrms.xyz/logo/icon.png)
>>>?
>>>?

三級引用示例

讀一本好書，就是在和高尚的人談話。?——歌德

連接描述

圖片描述

3.7 分割線

可以在一行中用三個(gè)以上的減(---)來建立一個(gè)分隔線，同時(shí)需要在分隔線的上面添加一個(gè)空行。如下：

---

---

3.8 刪除線

刪除線的使用，在需要?jiǎng)h除的文字前后各使用兩個(gè)~，如下：

這是要~~被刪除的內(nèi)容~~。

這是要被刪除的內(nèi)容。

3.9 表格

可以使用冒號來定義表格的對齊方式，如下：

|?姓名???????|?年齡?|?????????工作?|
|?:---------?|?:--:?|?-----------:?|
|?小李?????|??18??|?????搬磚?|
|?小王???|??20??|???包工頭?|
|?小張?|??23??|?架構(gòu)師?|
姓名年齡工作

小李	18	搬磚
小王	20	包工頭
小張	23	架構(gòu)師

寬度過長的表格可以滾動(dòng)，可在自定義主題中調(diào)節(jié)寬度：

|?姓名???????|?年齡?|?????????工作?|??????郵箱???????|????手機(jī)?????|
|?:---------?|?:--:?|?-----------:?|?:-------------:?|?:---------:?|
|?小李?????|??18??|?????搬磚?|?abc@xgqfrms.xyz?|?18123456789?|
|?小王???|??20??|???包工頭?|?xyz@xgqfrms.xyz?|?15123456789?|
|?小張?|??23??|?架構(gòu)師?|?ufo@xgqfrms.xyz?|?13123456789?|

姓名年齡工作郵箱手機(jī)

小李	18	搬磚	abc@xgqfrms.xyz	18123456789
小王	20	包工頭	xyz@xgqfrms.xyz	15123456789
小張	23	架構(gòu)師	ufo@xgqfrms.xyz	13123456789

3.10 圖片

插入圖片，如果是行內(nèi)圖片則無圖例，否則有圖例，格式如下：

圖片描述

可以通過在圖片尾部添加寬度和高度控制圖片大小，用法如下：


同時(shí)設(shè)置寬度和高度只設(shè)置寬度，推薦使用百分比

該語法比較特殊，其他 Markdown 編輯器不完全通用。

支持 jpg、png、gif、svg 等圖片格式，其中 svg 文件僅可在微信公眾平臺(tái)中使用，svg 文件示例如下：


• 支持圖片拖拽和截圖粘貼到編輯器中上傳，上傳時(shí)使用當(dāng)前選擇的圖床。
• 可使用格式->圖片上傳本地圖片，網(wǎng)站目前支持「圖殼」圖床，失敗率低，但是只可保存一天用于排版

注：僅支持?https?的圖片，圖片粘貼到微信、知乎或掘金時(shí)會(huì)自動(dòng)上傳其服務(wù)器，不必?fù)?dān)心使用上述圖床會(huì)導(dǎo)致圖片丟失。

圖片還可以和鏈接嵌套使用，能夠?qū)崿F(xiàn)推薦卡片的效果，用法如下：

[](https://mp.weixin.qq.com/s/lM808MxUu6tp8zU8SBu3sg)
Markdown Nice 最全功能介紹

4. 特殊語法

4.1 腳注

支持平臺(tái)：微信公眾號、知乎。

鏈接：[鏈接描述](鏈接?URL)
腳注：[腳注描述](腳注文字?"腳注?URL")

腳注與鏈接的區(qū)別如下所示：

有人認(rèn)為在[大前端時(shí)代](https://en.wikipedia.org/wiki/Front-end_web_development?"Front-end?web?development")的背景下，移動(dòng)端開發(fā)(Android、IOS)將逐步退出歷史舞臺(tái)。

[全棧工程師](是指掌握多種技能，并能利用多種技能獨(dú)立完成產(chǎn)品的人。?"什么是全棧工程師")在業(yè)務(wù)開發(fā)流程中起到了至關(guān)重要的作用。

腳注內(nèi)容請拉到最下面觀看。

有人認(rèn)為在大前端時(shí)代[2]的背景下，移動(dòng)端開發(fā)(Android、IOS)將逐步退出歷史舞臺(tái)。

全棧工程師[3]在業(yè)務(wù)開發(fā)流程中起到了至關(guān)重要的作用。

腳注內(nèi)容請拉到最下面觀看。

4.2 代碼塊

支持平臺(tái)：微信公眾號、知乎。

如果在一個(gè)行內(nèi)需要引用代碼，只要用反引號(`)引起來就好，如下：

Use?the?`printf()`?function.

Use the?printf()?function.

在需要高亮的代碼塊的前一行及后一行分別使用三個(gè)反引號(```)，同時(shí)第一行反引號后面表示代碼塊所使用的語言，如下：(```java) 和 (```js)

//?FileName:?HelloWorld.java
public?class?HelloWorld?{
??//?Java?入口程序，程序從此入口
??public?static?void?main(String[]?args)?{
????//?向控制臺(tái)打印一條語句
????System.out.println("Hello,World!");
??}
}
//?FileName:?HelloWorld.js
const?log?=?console.log;

//?向控制臺(tái)打印一條語句
log("Hello,World!");

class?HelloWorld?{
??constructor(...args)?{
????//?向控制臺(tái)打印一條語句
????console.log("arguments?=",?...args);
??}
}

const?hello?=?new?HelloWorld(1,?2,?3);

支持以下多種語言種類：

#?bash???bash?:?sh
bash
clojure，cpp，cs，css
dart，dockerfile,?diff
erlang
go，gradle，groovy
haskell
java，javascript，json，julia
kotlin
lisp，lua
makefile，markdown，matlab
objectivec
perl，php，python
r，ruby，rust
scala，shell，sql，swift
tex，typescript
verilog，vhdl
xml
yaml

如果想要更換代碼主題，可在上方挑選，不支持代碼主題自定義。

其中微信代碼主題與微信官方一致，有以下注意事項(xiàng)：

• 帶行號且不換行，代碼大小與官方一致
• 需要在代碼塊處標(biāo)志語言，否則無法高亮
• 粘貼到公眾號后，用鼠標(biāo)點(diǎn)代碼塊內(nèi)外一次，完成高亮

diff 不能同時(shí)和其他語言的高亮同時(shí)顯示，且需要調(diào)整代碼主題為微信代碼主題以外的代碼主題才能看到 diff 效果，使用效果如下:

\`\`\`diff
+?新增項(xiàng)
-?刪除項(xiàng)
\`\`\`
+?新增項(xiàng)
-?刪除項(xiàng)

其他主題不帶行號，可自定義是否換行，代碼大小與當(dāng)前編輯器一致

4.3 數(shù)學(xué)公式

支持平臺(tái)：微信公眾號、知乎。

行內(nèi)公式使用方法，比如這個(gè)化學(xué)公式：HgX2+→IX?HgIX2→IX?[HgXIIIX4]X2?

$\ce{Hg^2+?->[I-]?HgI2?->[I-]?[Hg^{II}I4]^2-}$

塊公式使用方法如下：

$$H(D_2)?=?-\left(\frac{2}{4}\log_2?\frac{2}{4}?+?\frac{2}{4}\log_2?\frac{2}{4}\right)?=?1$$

H(D2)=?(24log224+24log224)=1

矩陣：

$$
??\begin{pmatrix}
??1?&?a_1?&?a_1^2?&?\cdots?&?a_1^n?\\
??1?&?a_2?&?a_2^2?&?\cdots?&?a_2^n?\\
??\vdots?&?\vdots?&?\vdots?&?\ddots?&?\vdots?\\
??1?&?a_m?&?a_m^2?&?\cdots?&?a_m^n?\\
??\end{pmatrix}
$$

(1a1a12?a1n1a2a22?a2n?????1amam2?amn)

公式由于微信不支持，目前的解決方案是轉(zhuǎn)成?svg?放到微信中，無需調(diào)整，矢量不失真。

目前測試如果公式量過大，在 Chrome 下會(huì)存在粘貼后無響應(yīng)，但是在 Firefox 中始終能夠成功。

4.4 TOC

支持平臺(tái)：微信公眾號、知乎。

TOC 全稱為 Table of Content，即目錄，自動(dòng)列出全部標(biāo)題。由于示例標(biāo)題過多，需要使用將下方代碼段去除即可。

[TOC]

由于微信只支持到二級列表，本工具僅支持二級標(biāo)題和三級標(biāo)題的顯示。

4.5 注音符號

支持平臺(tái)：微信公眾號。

支持注音符號，用法如下：

Markdown Nice 這么好用，簡直是{喜大普奔|hē hē hē hē}呀！

Markdown Nice 這么好用，簡直是喜大普奔hē hē hē hē呀！

4.6 橫屏滑動(dòng)幻燈片

支持平臺(tái)：微信公眾號。

通過??這種語法設(shè)置橫屏滑動(dòng)滑動(dòng)片，具體用法如下：

<,,>

<<< 左右滑動(dòng)見更多 >>>

5. 其他語法

5.1 HTML

支持原生 HTML 語法，請寫內(nèi)聯(lián)樣式，如下：

<span?style="display:block;text-align:right;color:orangered;">橙色居右span>
<span?style="display:block;text-align:center;color:orangered;">橙色居中span>

橙色居右橙色居中

5.2 UML

不支持，推薦使用開源工具?https://draw.io/?制作后再導(dǎo)入圖片

5.3 更多文檔

更多文檔請參考?mdnice 產(chǎn)品主頁[4]

[1]

加粗 Issue:?https://github.com/markdown-it/markdown-it/issues/410

[2]

Front-end web development:?https://en.wikipedia.org/wiki/Front-end_web_development

[3]

什么是全棧工程師:?是指掌握多種技能，并能利用多種技能獨(dú)立完成產(chǎn)品的人。

[4]

更多文檔:?https://product.mdnice.com/articles/

查看原文:?https://www.cnblogs.com/xgqfrms/p/14009495.html

總結(jié)

以上是生活随笔為你收集整理的代码高亮_微信公众号代码高亮美化工具 Markdown Nice的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。