使用markdown在部落格園寫隨筆
阿新 • • 發佈:2020-09-19
Markdown是一種輕量級標記語言,創始人為約翰·格魯伯(英語:John Gruber)。它允許人們使用易讀易寫的純文字格式編寫文件
1.在部落格園指定markdown編輯器
- 進入部落格後臺
- 點選“設定預設編輯器”
- 選中 Markdown並儲存
2.Markdown 語法的簡要規則
- 標題 是每篇文章都需要也是最常用的格式,在 Markdown 中,如果一段文字被定義為標題,只要在這段文字前加 # 號即可
- 列表 在 Markdown 下,列表的顯示只需要在文字前加上 - 或 * 即可變為無序列表,有序列表則直接在文字前加1. 2. 3. 符號要和文字之間加上一個字元的空格
- 引用 只需要在文字前加入 > 這種尖括號(大於號)即可
- 連結
[連結](http://example.com)
- 圖片
![圖](Icon-pictures.png "icon")
- 程式碼 在 Markdown下實現也非常簡單,只需要用兩個 ``` 把中間的程式碼包裹起來 支援程式碼種類
- 粗體與斜體 用兩個 * 包含一段文字就是粗體的語法,用一個 * 包含一段文字就是斜體的語法
- 分割線 在 Markdown 下,只需要用 ---
- 表格示例
|水果|價格|數量|
|:-|:-:|-:|
|香蕉|$1|5|
3.程式碼背景和字型設定
在‘管理’-‘設定’-‘頁面定製 CSS 程式碼’中加入
code
/* 使用了Monokai Sublime的黑色主題面板,但是還存在樣式衝突,需要自己修改 這個樣式只適合使用makedown編寫的部落格 Monokai Sublime style. Derived from Monokai by noformnocontent http://nn.mit-license.org/ */ pre { /*控制程式碼不換行*/ white-space: pre; word-wrap: normal; } .cnblogs-markdown .hljs { display: block; overflow: auto; padding: 1.3em 2em !important; font-size: 12px !important; background: #272822 !important; color: #FFF; max-height: 700px; } .hljs, .hljs-tag, .hljs-subst { color: #f8f8f2; } .hljs-strong, .hljs-emphasis { color: #a8a8a2; } .hljs-bullet, .hljs-quote, .hljs-number, .hljs-regexp, .hljs-literal, .hljs-link { color: #ae81ff; } .hljs-code, .hljs-title, .hljs-section, .hljs-selector-class { color: #a6e22e; } .hljs-strong { font-weight: bold; } .hljs-emphasis { font-style: italic; } .hljs-keyword, .hljs-selector-tag, .hljs-name, .hljs-attr { color: #f92672; } .hljs-symbol, .hljs-attribute { color: #66d9ef; } .hljs-params, .hljs-class .hljs-title { color: #f8f8f2; } .hljs-string, .hljs-type, .hljs-built_in, .hljs-builtin-name, .hljs-selector-id, .hljs-selector-attr, .hljs-selector-pseudo, .hljs-addition, .hljs-variable, .hljs-template-variable { color: #e6db74; } .hljs-comment, .hljs-deletion, .hljs-meta { color: #75715e; } /* 黑色主題makedown程式碼結束 */ /*makedown行間程式碼樣式 */ .cnblogs-markdown code { color: #c7254e; border: none !important; font-size: 1em !important; background-color: #f9f2f4 !important; font-family: sans-serif !important; }
4.程式碼複製功能
- 在‘管理’-‘設定’-‘頁面定製 CSS 程式碼’中加入
code
/*新增按鈕*/ .cnblogs-markdown pre { position: relative; } .cnblogs-markdown pre > span { position: absolute; top: 0; right: 0; border-radius: 2px; padding: 0 10px; font-size: 12px; background: rgba(0, 0, 0, 0.4); color: #fff; cursor: pointer; display:none; } .cnblogs-markdown pre:hover > span { display:block; } .cnblogs-markdown pre > .copyed { background: #67c23a; }
- 在‘管理’-‘設定’-‘頁尾 HTML 程式碼’中加入
<script src="https://cdn.bootcss.com/clipboard.js/2.0.4/clipboard.min.js"></script>
<script src="https://blog-static.cnblogs.com/files/wuliytTaotao/cp.js"></script>
5.摺疊程式碼示例
#collpsible
<details>
<summary>code</summary>
<p>
Code...
</p>
</details>