撰寫 Hexo 文章 - Markdown 語法大全

發表於 2021-03-23 更新於最近

作者 章魚不是魚

36~46 分钟 閱讀

Markdown 的目標是實現「易讀易寫」，並強調它的「可讀性」，因此 Markdown 的語法全由標點符號所組成，並經過嚴謹慎選，是為了讓它們看起來就像所要表達的意思；以下是 Markdown 大部分的語法。

常用語法 - 文字樣式

文字字體

類別	語法	顯示結果
粗體	`我是粗體`	我是粗體
斜體	`我是斜體`	我是斜體
粗斜體	`*我是粗斜體*`	我是粗斜體
刪除線	`~~我是刪除線~~`	~~我是刪除線~~
底線	`<u>我是底線<u>`	我是底線

文字顏色

Markdown 並沒有更改文字顏色的語法，因此只能我們靠自己加入 HTML 語法來修改文字顏色，只要在欲更改文字顏色的地方加入 <font color=#008000>我是深綠色</font> ：我是深綠色。

在此附上一些常用的顏色，使用者也可以到常用顏色表這個網站來找尋自己喜歡的顏色。

語法	顯示結果	語法	顯示結果
`<font color=#800000>酒紅色</font>`	酒紅色	`<font color=#FF0000>紅色</font>`	紅色
`<font color=#FF6600>橘色</font>`	橘色	`<font color=#FFD700>金色</font>`	金色
`<font color=#FFFF00>黃色</font>`	黃色	`<font color=#00FF00>綠色</font>`	綠色
`<font color=#008000>墨綠色</font>`	墨綠色	`<font color=#00FFFF>青色</font>`	青色
`<font color=#0000FF>深藍色</font>`	深藍色	`<font color=#FF00FF>粉紅色</font>`	粉紅色
`<font color=#800080>紫色</font>`	紫色	`<font color=#808080>灰色</font>`	灰色

標題

使用 # 來表示等級一的標題，總共有六個等級，且 # 字符號和文字間要空一格。語法依此類推：

# 等級一標題
## 等級二標題
### 等級三標題
#### 等級四標題
##### 等級五標題
###### 等級六標題

其結果顯示如下圖：

程式碼

文字間程式碼

插入在文字間的程式碼請使用以下語法，也就是用鍵盤 Tab 鍵上方的反引號來包住：

C語言的輸入請使用 `scanf()` 函式。

其結果顯示如下：

C語言的輸入請使用 scanf() 函式。

段落程式碼

若要以整行或整段來顯示程式碼，請使用也就是用鍵盤 Tab 上方的三個反引號來包住，且可以**在第一列最後方指定程式語言類型(也能不指定)，這樣會在特殊函式或語法上標示特殊顏色**。

例如使用 C 語言：

其結果顯示如下：

// HelloWorld 程式
#include <stdio.h>
#include <stdlib.h>

int main( )
{
    printf("HelloWorld\n");
}

作者查到支援的程式碼列表如下，在反引號後輸入下面括弧前的文字（參考網站）：

Cucumber (‘*.feature’)
abap (‘*.abap’)
ada (‘.adb’, ‘.ads’, ‘*.ada’)
ahk (‘.ahk’, ‘.ahkl’)
apacheconf (‘.htaccess’, ‘apache.conf’, ‘apache2.conf’)
applescript (‘*.applescript’)
as (‘*.as’)
as3 (‘*.as’)
asy (‘*.asy’)
bash (‘.sh’, ‘.ksh’, ‘.bash’, ‘.ebuild’, ‘*.eclass’)
bat (‘.bat’, ‘.cmd’)
befunge (‘*.befunge’)
blitzmax (‘*.bmx’)
boo (‘*.boo’)
brainfuck (‘.bf’, ‘.b’)
c (‘.c’, ‘.h’)
cfm (‘.cfm’, ‘.cfml’, ‘*.cfc’)
cheetah (‘.tmpl’, ‘.spt’)
cl (‘.cl’, ‘.lisp’, ‘*.el’)
clojure (‘.clj’, ‘.cljs’)
cmake (‘*.cmake’, ‘CMakeLists.txt’)
coffeescript (‘*.coffee’)
console (‘*.sh-session’)
control (‘control’)
cpp (‘.cpp’, ‘.hpp’, ‘.c++’, ‘.h++’, ‘.cc’, ‘.hh’, ‘.cxx’, ‘.hxx’, ‘*.pde’)
csharp (‘*.cs’)
css (‘*.css’)
cython (‘.pyx’, ‘.pxd’, ‘*.pxi’)
d (‘.d’, ‘.di’)
delphi (‘*.pas’)
diff (‘.diff’, ‘.patch’)
dpatch (‘.dpatch’, ‘.darcspatch’)
duel (‘.duel’, ‘.jbst’)
dylan (‘.dylan’, ‘.dyl’)
erb (‘*.erb’)
erl (‘*.erl-sh’)
erlang (‘.erl’, ‘.hrl’)
evoque (‘*.evoque’)
factor (‘*.factor’)
felix (‘.flx’, ‘.flxh’)
fortran (‘.f’, ‘.f90’)
gas (‘.s’, ‘.S’)
genshi (‘*.kid’)
glsl (‘.vert’, ‘.frag’, ‘*.geo’)
gnuplot (‘.plot’, ‘.plt’)
go (‘*.go’)
groff (‘.(1234567)’, ‘.man’)
haml (‘*.haml’)
haskell (‘*.hs’)
html (‘.html’, ‘.htm’, ‘.xhtml’, ‘.xslt’)
hx (‘*.hx’)
hybris (‘.hy’, ‘.hyb’)
ini (‘.ini’, ‘.cfg’)
io (‘*.io’)
ioke (‘*.ik’)
irc (‘*.weechatlog’)
jade (‘*.jade’)
java (‘*.java’)
js (‘*.js’)
jsp (‘*.jsp’)
lhs (‘*.lhs’)
llvm (‘*.ll’)
logtalk (‘*.lgt’)
lua (‘.lua’, ‘.wlua’)
make (‘.mak’, ‘Makefile’, ‘makefile’, ‘Makefile.‘, ‘GNUmakefile’)
mako (‘*.mao’)
maql (‘*.maql’)
mason (‘.mhtml’, ‘.mc’, ‘*.mi’, ‘autohandler’, ‘dhandler’)
markdown (‘*.md’)
modelica (‘*.mo’)
modula2 (‘.def’, ‘.mod’)
moocode (‘*.moo’)
mupad (‘*.mu’)
mxml (‘*.mxml’)
myghty (‘*.myt’, ‘autodelegate’)
nasm (‘.asm’, ‘.ASM’)
newspeak (‘*.ns2’)
objdump (‘*.objdump’)
objectivec (‘*.m’)
objectivej (‘*.j’)
ocaml (‘.ml’, ‘.mli’, ‘.mll’, ‘.mly’)
ooc (‘*.ooc’)
perl (‘.pl’, ‘.pm’)
php (‘.php’, ‘.php(345)’)
postscript (‘.ps’, ‘.eps’)
pot (‘.pot’, ‘.po’)
pov (‘.pov’, ‘.inc’)
prolog (‘.prolog’, ‘.pro’, ‘*.pl’)
properties (‘*.properties’)
protobuf (‘*.proto’)
py3tb (‘*.py3tb’)
pytb (‘*.pytb’)
python (‘.py’, ‘.pyw’, ‘.sc’, ‘SConstruct’, ‘SConscript’, ‘.tac’)
rb (‘.rb’, ‘.rbw’, ‘Rakefile’, ‘.rake’, ‘.gemspec’, ‘.rbx’, ‘.duby’)
rconsole (‘*.Rout’)
rebol (‘.r’, ‘.r3’)
redcode (‘*.cw’)
rhtml (‘*.rhtml’)
rst (‘.rst’, ‘.rest’)
sass (‘*.sass’)
scala (‘*.scala’)
scaml (‘*.scaml’)
scheme (‘*.scm’)
scss (‘*.scss’)
smalltalk (‘*.st’)
smarty (‘*.tpl’)
sourceslist (‘sources.list’)
splus (‘.S’, ‘.R’)
sql (‘*.sql’)
sqlite3 (‘*.sqlite3-console’)
squidconf (‘squid.conf’)
ssp (‘*.ssp’)
tcl (‘*.tcl’)
tcsh (‘.tcsh’, ‘.csh’)
tex (‘.tex’, ‘.aux’, ‘*.toc’)
text (‘*.txt’)
v (‘.v’, ‘.sv’)
vala (‘.vala’, ‘.vapi’)
vbnet (‘.vb’, ‘.bas’)
velocity (‘.vm’, ‘.fhtml’)
vim (‘*.vim’, ‘.vimrc’)
xml (‘.xml’, ‘.xsl’, ‘.rss’, ‘.xslt’, ‘.xsd’, ‘.wsdl’)
xquery (‘.xqy’, ‘.xquery’)
xslt (‘.xsl’, ‘.xslt’)
yaml (‘.yaml’, ‘.yml’)

常用語法 - 其它

分隔線

一整列中輸入三個以上的 *** 或三個以上的 ---，且整列不能有其它文字，結果顯示如下：

項目符號/編號

**項目符號**可以用 *、+ 或 -，放在整列的開頭當作項目符號，且符號和文字間要空一格，語法範例如下：

+ aaa
+ bbb
+ ccc

其結果顯示如下：

而**編號**就是使用數字在加上 .，且 . 和文字間要空一格，語法範例如下：

1. aaa
2. bbb
3. ccc

其結果顯示如下：

若使用**「階層式」的項目符號/編號**，只要記得空的格數要整齊即可。

+ 益者三友
  + 友直
  + 友諒
  + 友多聞
     + 益矣
+ 損者三友
  + 友便辟
  + 友善柔
  + 友便佞
     + 損矣

其結果顯示如下：

益者三友
- 友直
- 友諒
- 友多聞
  - 益矣
損者三友
- 友便辟
- 友善柔
- 友便佞
  - 損矣

代辦事項

代辦事項的語法如下，若要在框框中打勾，則需在 [ ] 中輸入 x。

- [ ] 空心菜
- [x] 玉米
- [x] 醬油
- [ ] 豬肉

其結果顯示如下：

空心菜
玉米
醬油
豬肉

引用區塊

使用 > 放在整列的開頭當作引用區塊，且 > 和文字間要空一格，語法範例如下：

> 人遠比自己想象的要堅強
> 特別是當你回頭看看的時候
> 你會發現自己走了一段自己都沒想到的路

其結果顯示如下：

人遠比自己想象的要堅強
特別是當你回頭看看的時候
你會發現自己走了一段自己都沒想到的路

而”引用”也支援「階層式」顯示：

> 人生就像一杯茶
> > 不會苦一輩子
> > > 但總會苦一陣子

其結果顯示如下：

人生就像一杯茶

不會苦一輩子

但總會苦一陣子

文字超連結

[奇摩首頁](https://tw.yahoo.com/)
[Google首頁](https://www.google.com/)
[Facebook](https://www.facebook.com/)

其結果顯示如下：

奇摩首頁
 Google首頁
 Facebook

圖片

圖片的語法和文字超連結很像，只是在語法開頭再加上 !，中括弧內指的是圖片的”替代文字”(當圖片連結失效後會顯示的文字，如下面的 FB Logo)：

![奇摩首頁Logo](https://s1.yimg.com/rz/d/yahoo_frontpage_zh-Hant-TW_s_f_p_bestfit_frontpage_2x.png)
![Google首頁Logo](https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png)
![FB Logo](123.png)

其結果顯示如下：

奇摩首頁Logo

Google首頁Logo
FB Logo FB Logo

表格

表格的基本語法如下，第一列是表格的標題列，然後第二列固定要是以 --- 做區隔，加欄位都是使用 | 來添加。注意表格的每欄寬度會自動分配，所以可以忽略一切的空格(也就是每列的 | 沒有對齊也沒關係，且加多少空格也不會影響每欄的寬度)。

| Column 1 | Column 2 | Column 3 |
| -------- | -------- | -------- |
| Text1 | Text2 | Text3 |
| Text4    | Text5    | Text6    |

其結果顯示如下：

Column 1	Column 2	Column 3
Text1	Text2	Text3
Text4	Text5	Text6

而每欄可以決定要如何對齊，對齊方式取決於第二列的 ---，再加上 : 符號：

:--- 靠左對齊。
---: 靠右對齊。
:---: 置中對齊。

| 預設對齊 | 靠左對齊 | 靠右對齊 | 置中對齊 |
| ----- | :----- | -----: | :-----: |
| Text1 | Text2 | Text3 | Text4 |
| Text5 | Text6 | Text7 | Text8 |
| Text9 | Text10 | Text11 | Text12 |

其結果顯示如下：

預設對齊	靠左對齊	靠右對齊	置中對齊
Text1	Text2	Text3	Text4
Text5	Text6	Text7	Text8
Text9	Text10	Text11	Text12

注意事項

某些語法的外觀樣式如：引用、分隔線、項目符號等，會因為使用者套用的 Hexo 主題而有不同。
圖片可以放在 Hexo 資料夾一併上傳到 GitHub，例如圖片 123.jpg 放到 myblog/source/images 路徑下，然後圖片語法連結的地方輸入，就會顯示該圖片。
不過這種方法作者不建議(也就是不建議把 GitHub 當作圖床用)，因為當文章一多，會有機會達到 GitHub Pages 的使用限制；因此可以搜尋各大免費圖床來使用，如 Imgur, Upload.cc 等。
HTML 語法盡量包在 Markdown 語法裡面，否則可能會造成一些顯示上的錯誤，舉例如下：

語法撰寫範例一：將「今天天氣真好。」顯示粗體並更改為紅色
**<font color=#FF0000>今天天氣真好。</font>**

語法撰寫範例二：將「Title」設定成等級一標題並更改為藍色
# <font color=#0000FF>Title</font>

呈上，因為 HTML 語法和 Markdown 語法交錯使用，在 hexo-admin 文章後台的編輯區和預覽區可能會有顯示問題，請先 publish 後，以 localhost 的文章頁面顯示為準。

Hexo 部落格

授權協議: CC BY 4.0