1. 程式人生 > 實用技巧 >使用markdown在部落格園寫隨筆

使用markdown在部落格園寫隨筆

Markdown是一種輕量級標記語言,創始人為約翰·格魯伯(英語:John Gruber)。它允許人們使用易讀易寫的純文字格式編寫文件

1.在部落格園指定markdown編輯器

  • 進入部落格後臺
  • 點選“設定預設編輯器”
  • 選中 Markdown並儲存

2.Markdown 語法的簡要規則

  1. 標題 是每篇文章都需要也是最常用的格式,在 Markdown 中,如果一段文字被定義為標題,只要在這段文字前加 # 號即可
  2. 列表 在 Markdown 下,列表的顯示只需要在文字前加上 - 或 * 即可變為無序列表,有序列表則直接在文字前加1. 2. 3. 符號要和文字之間加上一個字元的空格
  3. 引用 只需要在文字前加入 > 這種尖括號(大於號)即可
  4. 連結 [連結](http://example.com)
  5. 圖片 ![圖](Icon-pictures.png "icon")
  6. 程式碼 在 Markdown下實現也非常簡單,只需要用兩個 ``` 把中間的程式碼包裹起來 支援程式碼種類
  7. 粗體與斜體 用兩個 * 包含一段文字就是粗體的語法,用一個 * 包含一段文字就是斜體的語法
  8. 分割線 在 Markdown 下,只需要用 ---
  9. 表格示例
|水果|價格|數量|
|:-|:-:|-:|
|香蕉|$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.程式碼複製功能

  1. 在‘管理’-‘設定’-‘頁面定製 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;
}

  1. 在‘管理’-‘設定’-‘頁尾 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>