用户投稿为了写 Hexo 部落格需要大量使用 Markdown 语法，就以第一篇文章来练习吧！(ﾉ>ω<)ﾉ
由于 Markdown 版本的关係，部分样式在 iT 邦帮忙网页中无法正确呈现，但都会附上程式码给大家参考～
主标题
主标题===副标题
副标题---标题 h1~h6
需依标题重要性从 h1 ~ h6 依序使用，字体大小也会随重要性由大至小呈现，用法同 HTML 的 <h1>、<h2>、<h3>、<h4>、<h5>、<h6> 标籤。
须注意一个网页中只能有唯一一个最重要的 h1 标籤！
# h1## h2### h3#### h4##### h5###### h6引言
引言
第二层引言
第三层引言
> 引言>> 第二层引言>>> 第三层引言字体效果
斜体字
# 以下两种写法皆可*斜体字*_斜体字_粗体字
# 以下两种写法皆可**粗体字**__粗体字__斜粗体
***斜粗体***删除线
~~删除线~~文字上标
一般文字^上标^# 在 Hexo 中需使用以下语法一般文字<sup>上标</sup>文字下标
一般文字~下标~# 在 Hexo 中需使用以下语法一般文字<sub>下标</sub>底线
++底线++# 在 Hexo 中需使用以下语法<u>底线</u>萤光标记
==萤光标记==# 在 Hexo 中需使用以下语法<mark>萤光标记</mark>列表
无序清单
用于不需要依序排列的清单，例如：购物清单。
在 HTML 中对应的标籤为 <ul> 与 <li> 的列表标籤组合。
# 以下三种符号皆可，需注意在同一个列表中混用符号的话，项目之间会有空白间距- HTML- CSS- JavaScript+ HTML+ CSS+ JavaScript* HTML* CSS* JavaScript巢状无序清单
HTMLCSSJavaScript- HTML - CSS - JavaScript有序清单
用于需要依序排列的清单，例如：排名。
在 HTML 中对应的标籤为 <ol> 与 <li> 的列表标籤组合。
# 项目符号会以第一个项目的数字为準递增。1. HTML2. CSS3. JavaScript# 因第一个项目的数字为 8，就算后续数字顺序乱打，也会从 8 开始递增排列8. HTML3. CSS5. JavaScript巢状有序清单
HTMLCSSJavaScriptBootstrap1. HTML2. CSS 1. JavaScript 1. BootstrapCheckBox
[ ] 没有勾选[x] 勾选需注意由于 Hexo 预设的 Markdown 渲染器 hexo-renderer-marked 不支援 CheckBox 样式，若要实现的话需依照以下步骤：
打开命令提示字元，进入专案的根目录执行以下指令npm un hexo-renderer-marked --save # 删除 Hexo 预设 Markdown 引擎npm i hexo-renderer-markdown-it --save # 安装 markdown-itcd node_modules/hexo-renderer-markdown-it/npm install markdown-it-checkbox --save # 安装支援 checkbox 样式的插件 markdown-it-checkbox_config.yml 加入以下配置# Markdown-it config## Docs: https://github.com/celsomiranda/hexo-renderer-markdown-it/wikimarkdown: render: html: true # Doesn't escape HTML content so the tags will appear as html. xhtmlOut: false # Parser will not produce XHTML compliant code. breaks: true # Parser produces `<br>` tags every time there is a line break in the source document. linkify: false # Returns text links as text. typographer: true # Substitution of common typographical elements will take place. quotes: '“”‘’' # "double" will be turned into “single” # 'single' will be turned into ‘single’ plugins: - markdown-it-abbr - markdown-it-checkbox - markdown-it-emoji - markdown-it-footnote - markdown-it-ins - markdown-it-sub - markdown-it-sup anchors: level: 2 # Minimum level for ID creation. (Ex. h2 to h6) collisionSuffix: 'v' # A suffix that is prepended to the number given if the ID is repeated. permalink: true # If true, creates an anchor tag with a permalink besides the heading. permalinkClass: header-anchor # Class used for the permalink anchor tag. permalinkSymbol: ¶ # The symbol used to make the permalink.hexo s -g就会有美美的 CheckBox 啰！
程式码
行内程式码
关于 <p>行内程式码</p> 的使用技巧。
关于 `<p>行内程式码</p>` 的使用技巧。程式码区块（在 Hexo 套用 Next 主题的情况下，无行数标示）
在 HTML 中会转换成 <pre><code>程式</pre></code> 结构。
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><body> <h1>Hello, World!</h1></body></html><!-- 前方缩排 4 个空白，或是 1 个 tab --> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <h1>Hello, World!</h1> </body> </html>程式码区块（在 Hexo 套用 Next 主题的情况下，有行数标示）
在 HTML 中会转换成 <pre><span>程式</span></code> 结构。
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><body> <h1>Hello, World!</h1></body></html>``` HTML（这里可以写对应的程式语言，在颜色呈现上会随着语言有差异）<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><body> <h1>Hello, World!</h1></body></html>```分隔线
行内需有三个（含）以上的符号，且同行中不能有其他文字内容，但符号间可以有空格。
<!-- 以下方式皆可 -->* * *********- - ----------------------------------------超连结
文字超连结
欢迎来到 糖米's Blog 技术分享部落格。
[文字](网址)欢迎来到 [糖米\'s Blog](https://olivialin21.github.io/) 技术分享部落格。<!-- 因「'」为特殊符号，前方需加上「\」避免触发 Markdown 样式 -->简易超连结
https://olivialin21.github.io/
<网址><https://olivialin21.github.io/>表格
| 栏位1 | 栏位2 | 栏位3 || :-- | --: |:--:|| 置左 | 置右 | 置中 |图片
插入图片
点击连至外部网页
[](连结网址)[](https://olivialin21.github.io/)跳脱字元
在特殊符号前方加上 \ 避免触发 Markdown 样式。
参考资料
Markdown 语法说明 @官方MarkDown 语法大全 @mrcodingHexo 的 markdown-it 渲染引擎和其相关插件 @baishusama关于作者
大家好我是糖米，持续在精进网页前端 + 后端的準自由工作者 :D
希望能透过撰写技术文章纪录学习过程，欢迎大家留言提供回馈。
所有文章都会同步发布在个人部落格以及 Medium 喔！
微信扫一扫打赏
支付宝扫一扫打赏
