使用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 代码’中加入

view 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 代码’中加入

view 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;
}

2. 在‘管理’-‘设置’-‘页脚 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>view code</summary>
<p>

Code...

</p>
</details>