# Notepad++ 及 Markdown 外掛

> 作者：王一哲
> 日期：2020/4/3

## 前言

Markdown 是一種很方便的標記語言，可以使用 $\LaTeX$ 語法顯示數學式子，也支援程式碼高亮度語法，因此我現在都改用這種語法寫物理及電腦方面的文章。目前市面上支援 Markdown 語法的編輯器很多，以下介紹最單純的一種：**Notepad++ 及 Markdown 外掛**。
<br />

## 安裝 Notepad++ 及 Markdown 外掛

[Notepad++](https://notepad-plus-plus.org/) 是我在 Windows 上最常用的文字編輯器，目前最新版本為 7.8.5，[下載連結在此](https://notepad-plus-plus.org/downloads/v7.8.5/)，我通常會下載 Installer 將 Notepad++ 安裝到電腦上。
<br />

<img style="display: block; margin-left: auto; margin-right: auto" height="100%" width="100%" src="https://imgur.com/uwqOxMF.png">
<div style="text-align:center">Notepad++ 下載頁面</div>
<br />

安裝完畢之後開啟 Notepad++，我通常會開啟行號、將主題調成深色、修改字型為等寬字型，調整的方式如下。
<br />

### 開啟行號

從選單中依序點選**設定** ⇒ **偏好設定**，在偏好設定左側的欄位中找到**編輯**，在編輯這個分頁的右下角將**顯示行號**選項打勾。
<br />

<img style="display: block; margin-left: auto; margin-right: auto" height="35%" width="35%" src="https://imgur.com/DeKVmW0.png">
<div style="text-align:center">設定 ⇒ 偏好設定</div>
<br />

<img style="display: block; margin-left: auto; margin-right: auto" height="100%" width="100%" src="https://imgur.com/jUFFZMY.png">
<div style="text-align:center">顯示行號</div>
<br />

### 調整主題及字型

從選單中依序點選**設定** ⇒ **設定程式語言格式**，在視窗上方的**選取主題**下拉式選單中可以找到許多預設的主題，我選擇的是**Deep Black**；接著在**程式語言**欄位中選取**Global style**，在**樣式**欄位中選取**Global override**，在右側的**字型名稱**中選取**Noto Sans Mono CJK TC Regular**，**字型大小**設定為較大的**14**號字，最後按視窗下方的**儲存並關閉**。
<br />

<img style="display: block; margin-left: auto; margin-right: auto" height="30%" width="30%" src="https://imgur.com/qkaU9SF.png">
<div style="text-align:center">設定 ⇒ 設定程式語言格式</div>
<br />

<img style="display: block; margin-left: auto; margin-right: auto" height="100%" width="100%" src="https://imgur.com/9LcZw09.png">
<div style="text-align:center">色彩佈景主題設定</div>
<br />

### 安裝 Markdown 外掛

從選單中依序點選**外掛** ⇒ **外掛模組管理**，在**搜尋**欄位輸入**Markdown**，目前可用的外掛為 **Markdown Panel** 以及 **Markdown Viewer++**，勾選想要使用的外掛再點選視窗右上角的**安裝**即可。
<br />

<img style="display: block; margin-left: auto; margin-right: auto" height="35%" width="35%" src="https://imgur.com/BAW6iJq.png">
<div style="text-align:center">外掛 ⇒ 外掛模組管理</div>
<br />

<img style="display: block; margin-left: auto; margin-right: auto" height="100%" width="100%" src="https://imgur.com/lA9ZkLz.png">
<div style="text-align:center">安裝 Markdown 外掛</div>
<br />

安裝完畢之後可以從選單中依序點選**外掛** ⇒ **NppMarkdownPanel** ⇒ **Toggle Markdown Panel** 開啟檢視 Markdown 渲染效果的視窗，也可點選工具列最右側的按鈕開啟視窗。
<br />

<img style="display: block; margin-left: auto; margin-right: auto" height="80%" width="80%" src="https://imgur.com/XJOC2Ya.png">
<div style="text-align:center">外掛 ⇒ NppMarkdownPanel ⇒ Toggle Markdown Panel</div>
<br />

<img style="display: block; margin-left: auto; margin-right: auto" height="100%" width="100%" src="https://imgur.com/GfVBOYF.png">
<div style="text-align:center">Markdown Panel</div>
<br />

如果要開啟 Markdown Viewer++ 則改為依序點選**外掛** ⇒ **MarkdownViewer++** ⇒ **MarkdownViewer++** 開啟檢視 Markdown 渲染效果的視窗，也按快速鍵 **Ctrl + Shift + M**，或是點選工具列從右側數來第二個按鈕開啟視窗。
<br />

<img style="display: block; margin-left: auto; margin-right: auto" height="80%" width="80%" src="https://imgur.com/ym6OeuP.png">
<div style="text-align:center">外掛 ⇒ MarkdownViewer++ ⇒ MarkdownViewer++</div>
<br />

<img style="display: block; margin-left: auto; margin-right: auto" height="100%" width="100%" src="https://imgur.com/fhlCMnN.png">
<div style="text-align:center">MarkdownViewer++</div>
<br />

看起來 Markdown Panel 的效果較佳。
<br />

## 數學式子測試

若要顯示獨立為一個段落並且置中的數學式子，可以用兩組 \$$ 將數學式子的 $\LaTeX$ 包在裡面，以馬克士威方程式為例，需要輸入以下的編碼

$$\nabla \cdot \mathbf{E} = \frac{\rho}{\varepsilon_0}$$
$$\nabla \cdot \mathbf{B} = 0$$
$$\nabla \times \mathbf{E} = - \frac{\partial \mathbf{B}}{\partial t}$$
$$\nabla \times \mathbf{B} = \mu_0 \left ( \mathbf{J} + \varepsilon_0 \frac{\partial \mathbf{E}}{\partial t} \right )$$

<br />

理論上會看到以下的數學式子

$$\nabla \cdot \mathbf{E} = \frac{\rho}{\varepsilon_0}$$

$$\nabla \cdot \mathbf{B} = 0$$

$$\nabla \times \mathbf{E} = - \frac{\partial \mathbf{B}}{\partial t}$$

$$\nabla \times \mathbf{B} = \mu_0 \left ( \mathbf{J} + \varepsilon_0 \frac{\partial \mathbf{E}}{\partial t} \right )$$

不過在這兩個外掛中都無法顯示數學式子。
<br />

<img style="display: block; margin-left: auto; margin-right: auto" height="100%" width="100%" src="https://imgur.com/6WGyHyB.png">
<div style="text-align:center">Markdown Panel 數學式子測試</div>
<br />

<img style="display: block; margin-left: auto; margin-right: auto" height="100%" width="100%" src="https://imgur.com/oVe1zbX.png">
<div style="text-align:center">Markdown Viewer++ 數學式子測試</div>
<br />

## 程式碼高亮度語法測試

Markdown 支援相當多種的程式碼高亮度語法，例如 Python、C、C++、Shell……等等，以 Python 程式碼為例，在程式碼區段開頭用 \`\`\`python= 標記，程式碼區段結尾再加上 \`\`\`，就能夠插入帶有行號的程式碼區段；如果不想要帶有行號，只要刪除 = 即可；如果要插入其它種類的程式碼，只要將開頭的 python 改成對應的程式語言名稱即可。以下是使用 Python 印出九九乘法表的程式碼

for i in range(2, 10, 1):
    for j in range(2, 10, 1):
        print("{:d} * {:d} = {:d}".format(i, j, i*j), end='\t')
    print('')

<br />

但是在這兩個外掛中都無法顯示程式碼的行號。
<br />

<img style="display: block; margin-left: auto; margin-right: auto" height="100%" width="100%" src="https://imgur.com/1Do1Yoe.png">
<div style="text-align:center">Markdown Panel 程式碼高亮度語法測試</div>
<br />

<img style="display: block; margin-left: auto; margin-right: auto" height="100%" width="100%" src="https://imgur.com/zDwu8Z0.png">
<div style="text-align:center">Markdown Viewer++ 程式碼高亮度語法測試</div>
<br />

## 結語

雖然 Markdown Panel 和 Markdown Viewer++ 對於數學式子和程式碼高亮度語法的效果不太理想，但是對於想要在電腦上編輯 Markdown 檔案又不想要特地安裝專用軟體的人而言，這應該是一個比較方便、效果還不錯的解決方案。
<br />

---

###### tags:`電腦`