欢迎使用Markdown编辑器写博客

本Markdown编辑器使用StackEdit修改而来，用它写博客，将会带来全新的体验哦：

Markdown和扩展Markdown简洁的语法代码块高亮图片链接和图片上传LaTex数学公式UML序列图和流程图离线写博客导入导出Markdown文件丰富的快捷键

---

快捷键

加粗 Ctrl + B 斜体 Ctrl + I 引用 Ctrl + Q插入链接 Ctrl + L插入代码 Ctrl + K插入图片 Ctrl + G提升标题 Ctrl + H有序列表 Ctrl + O无序列表 Ctrl + U横线 Ctrl + R撤销 Ctrl + Z重做 Ctrl + Y

Markdown及扩展

Markdown 是一种轻量级标记语言，它允许人们使用易读易写的纯文本格式编写文档，然后转换成格式丰富的HTML页面。 —— [ 维基百科 ]

使用简单的符号标识不同的标题，将某些文字标记为粗体或者斜体，创建一个链接等，详细语法参考帮助？。

本编辑器支持 Markdown Extra , 　扩展了很多好用的功能。具体请参考Github.

表格

Markdown　Extra　表格语法：

项目价格Computer$1600Phone$12Pipe$1

可以使用冒号来定义对齐方式：

项目价格数量Computer1600 元5Phone12 元12Pipe1 元234

定义列表

Markdown　Extra　定义列表语法： 项目１ 项目２ 定义 A 定义 B 项目３ 定义 C

定义 D

定义D内容

代码块

代码块语法遵循标准markdown代码，例如：

@requires_authorization def somefunc(param1='', param2=0): '''A docstring''' if param1 > param2: # interesting print 'Greater' return (param2 - param1 + 1) or None class SomeClass: pass >>> message = '''interpreter ... prompt'''

脚注

生成一个脚注1.

目录

用 [TOC]来生成目录：

欢迎使用Markdown编辑器写博客 快捷键Markdown及扩展 表格定义列表代码块脚注目录数学公式UML 图 离线写博客浏览器兼容 breadcrumbs-one abreadcrumbs-one lilast-child breadcrumbs-one lifirst-child a breadcrumbs-one ahover breadcrumbs-one aafterbreadcrumbs-one abefore breadcrumbs-one aafter breadcrumbs-one abefore breadcrumbs-one ahoverafter breadcrumbs-one lilast-child breadcrumbs-two breadcrumbs-two li breadcrumbs-two abreadcrumbs-two lilast-child breadcrumbs-two ahover breadcrumbs-two abeforebreadcrumbs-two aafter breadcrumbs-two abefore breadcrumbs-two ahoverbefore breadcrumbs-two aafter breadcrumbs-two ahoverafter breadcrumbs-two lilast-child breadcrumbs-three breadcrumbs-three li breadcrumbs-three abreadcrumbs-three lilast-child breadcrumbs-three ahover breadcrumbs-three aafter breadcrumbs-three ahoverafter breadcrumbs-three lilast-child breadcrumbs-four breadcrumbs-four li breadcrumbs-four abreadcrumbs-four lilast-child breadcrumbs-four ahover breadcrumbs-four abeforebreadcrumbs-four aafter breadcrumbs-four abefore breadcrumbs-four ahoverbefore breadcrumbs-four aafter breadcrumbs-four ahoverafter breadcrumbs-four lilast-child breadcrumbs-five breadcrumbs-five li breadcrumbs-five abreadcrumbs-five lilast-child breadcrumbs-five aafterbreadcrumbs-five abefore breadcrumbs-five abefore breadcrumbs-five lifirst-child a breadcrumbs-five linth-child2 a breadcrumbs-five linth-child2 aafter breadcrumbs-five linth-child3 a breadcrumbs-five linth-child3 aafter breadcrumbs-five linth-child4 a breadcrumbs-five linth-child4 aafter breadcrumbs-five li ahover breadcrumbs-five li ahoverafter breadcrumbs-five lilast-child breadcrumbs-six breadcrumbs-six li breadcrumbs-six abreadcrumbs-six lilast-child breadcrumbs-six lifirst-child a breadcrumbs-six linth-child2n a breadcrumbs-six aafter breadcrumbs-six linth-child2n aafter breadcrumbs-six li ahover breadcrumbs-six li ahoverafter breadcrumbs-six lilast-child breadcrumbs-seven breadcrumbs-seven li breadcrumbs-seven abreadcrumbs-seven lilast-child breadcrumbs-seven aafterbreadcrumbs-seven abeforebreadcrumbs-seven lilast-childbefore breadcrumbs-seven lilast-childbeforebreadcrumbs-seven abefore breadcrumbs-seven aafter breadcrumbs-seven lifirst-child abefore breadcrumbs-seven linth-child2n a breadcrumbs-seven linth-child2n aafter breadcrumbs-seven linth-child3n a breadcrumbs-seven linth-child3n aafter breadcrumbs-seven linth-child4n a breadcrumbs-seven linth-child4n aafter breadcrumbs-seven li ahover breadcrumbs-seven li ahoverafter breadcrumbs-seven lilast-child

数学公式

使用MathJax渲染LaTex 数学公式，详见math.stackexchange.com.

行内公式，数学公式为： Γ(n)=(n−1)!∀n∈N 。块级公式：

x=−b±b2−4ac−−−−−−−√2a

更多LaTex语法请参考 这儿.

UML 图:

可以渲染序列图：

Created with Raphaël 2.1.0 张三 张三 李四 李四 嘿，小四儿, 写博客了没? 李四愣了一下，说： 忙得吐血，哪有时间写。

或者流程图：

Created with Raphaël 2.1.0 开始 我的操作 确认？ 结束 yes no 关于 序列图 语法，参考 这儿,关于 流程图 语法，参考 这儿.

离线写博客

即使用户在没有网络的情况下，也可以通过本编辑器离线写博客（直接在曾经使用过的浏览器中输入write.blog.csdn.net/mdeditor即可。Markdown编辑器使用浏览器离线存储将内容保存在本地。

用户写博客的过程中，内容实时保存在浏览器缓存中，在用户关闭浏览器或者其它异常情况下，内容不会丢失。用户再次打开浏览器时，会显示上次用户正在编辑的没有发表的内容。

博客发表后，本地缓存将被删除。　

用户可以选择 把正在写的博客保存到服务器草稿箱，即使换浏览器或者清除缓存，内容也不会丢失。

注意：虽然浏览器存储大部分时候都比较可靠，但为了您的数据安全，在联网后，请务必及时发表或者保存到服务器草稿箱。

浏览器兼容

目前，本编辑器对Chrome浏览器支持最为完整。建议大家使用较新版本的Chrome。IE９以下不支持IE９，１０，１１存在以下问题 不支持离线功能IE9不支持文件导入导出IE10不支持拖拽文件导入

---

面包屑

<style type="text/css"> * { margin: 0; padding: 0; } body { font: 14px Arial, Helvetica; color: #444; margin: 50px auto; padding: 50px; width: 80%; } ul { list-style: none outside none; margin-bottom: 15px; } ul li { float: left; display: inline; } ul a { text-decoration: none; } /*Breadcrumbs Zero*/ #breadcrumbs-zero { overflow: hidden; border: 1px solid #c9c9c9; width: 70%; } #breadcrumbs-zero li { float: left; color: #777; padding-left: 1em; } #breadcrumbs-zero a { background: url("1.png") no-repeat right center; float: left; padding: 1em 1.5em 1em 0; color: #777; } #breadcrumbs-zero a:hover { color: #222; } #breadcrumbs-zero li.current { padding: 1em 1.5em 1em 1em; font-weight: bold; color: #222; } #breadcrumbs-one { background-color: #eee; border: 1px solid #ccc; border-color: #f5f5f5 #e5e5e5 #ccc; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; -moz-box-shadow: 0 0 2px rgba(0, 0, 0, 0.2); -webkit-border-radius: 5px; border-radius: 5px; overflow: hidden; width: 70%;

}

breadcrumbs-one a,

breadcrumbs-one li:last-child {

padding: 0.7em 1em 0.7em 2em; float: left; color: #444; position: relative; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5); background-color: #ddd; background-image: -moz-linear-gradient(to right, #f5f5f5, #ddd); background-image: -webkit-linear-gradient(to right, #f5f5f5, #ddd); background-image: -o-linear-gradient(to right, #f5f5f5, #ddd); background-image: linear-gradient(to right, #f5f5f5, #ddd);

}

breadcrumbs-one li:first-child a {

padding-left: 1em; -moz-border-radius: 5px 0 0 5px; -webkit-border-radius: 5px 0 0 5px; border-radius: 5px 0 0 5px;

}

breadcrumbs-one a:hover {

background: #fff;

}

breadcrumbs-one a::after,

breadcrumbs-one a::before {

content: ""; position: absolute; top: 50%; margin-top: -1.5em; border-top: 1.5em solid transparent; border-bottom: 1.5em solid transparent; border-left: 1em solid; right: -1em;

}

breadcrumbs-one a::after {

z-index: 2; border-left-color: #ddd;

}

breadcrumbs-one a::before {

border-left-color: #ccc; right: -1.1em; z-index: 1;

}

breadcrumbs-one a:hover::after {

border-left-color: #fff;

}

breadcrumbs-one li:last-child {

font-weight: bold; background: none;

}

Home Level #1 Level #1-1 Level #1-1-1 Current Level https://www.w3cways.com/wp-content/uploads/2013/12/css3-breadcrumbs-2.png

DEMO二 /Breadcrumbs two/

breadcrumbs-two {

overflow: hidden; width: 70%;

}

breadcrumbs-two li {

float: left; margin: 0 0.5em 0 1em;

}

breadcrumbs-two a,

breadcrumbs-two li:last-child {

background: #ddd; padding: 0.7em 1em; float: left; color: #444; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5); position: relative;

}

breadcrumbs-two a:hover {

background: #99db76;

}

breadcrumbs-two a::before,

breadcrumbs-two a::after {

content: ""; position: absolute; top: 50%; margin-top: -1.5em;

}

breadcrumbs-two a::before {

border-style: solid; border-width: 1.5em 0 1.5em 1em; border-color: #ddd #ddd #ddd transparent; left: -1em;

}

breadcrumbs-two a:hover::before {

border-color: #99db76 #99db76 #99db76 transparent;

}

breadcrumbs-two a::after {

border-top: 1.5em solid transparent; border-bottom: 1.5em solid transparent; border-left: 1em solid #ddd; right: -1em;

}

breadcrumbs-two a:hover::after {

border-left-color: #99db76;

}

breadcrumbs-two li:last-child {

font-weight: bold; background: none;

}

DEMO三 https://www.w3cways.com/wp-content/uploads/2013/12/css3-breadcrumbs-3.png /breadcrumbs Three/

breadcrumbs-three {

overflow: hidden; width: 70%;

}

breadcrumbs-three li {

float: left; margin: 0 2em 0 0;

}

breadcrumbs-three a,

breadcrumbs-three li:last-child {

padding: 0.7em 1em 0.7em 2em; float: left; color: #444; background: #ddd; position: relative; z-index: 1; text-shadow: 0 1px 0 rgba(255, 255, 255, 0); -moz-border-radius: 0.4em 0 0 0.4em; -webkit-border-radius: 0.4em 0 0 0.4em; border-radius: 0.4em 0 0 0.4em;

}

breadcrumbs-three a:hover {

background: #abe0ef;

}

breadcrumbs-three a::after {

content: ""; background: #ddd; height: 2.5em; position: absolute; right: -1em; top: 50%; width: 2.5em; margin-top: -1.25em; z-index: -1; -moz-transform: rotate(45deg); -webkit-transform: rotate(45deg); -o-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); -moz-border-radius: 0.4em; -webkit-border-radius: 0.4em; border-radius: 0.4em;

}

breadcrumbs-three a:hover::after {

background: #abe0ef;

}

breadcrumbs-three li:last-child {

font-weight: bold; background: none;

}

DEMO四 https://www.w3cways.com/wp-content/uploads/2013/12/css3-breadcrumbs-4.png /Breadcrumbs Four/

breadcrumbs-four {

overflow: hidden; width: 70%; }

breadcrumbs-four li {

float: left; margin: 0 0.5em 0 1em; }

breadcrumbs-four a,

breadcrumbs-four li:last-child {

float: left; background: #ddd; padding: 0.7em 1em; color: #444; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5); position: relative; }

breadcrumbs-four a:hover {

background: #efc9ab; }

breadcrumbs-four a::before,

breadcrumbs-four a::after {

content: “”; position: absolute; top: 0; bottom: 0; background: #ddd; width: 1em; -moz-transform: skew(-10deg); -webkit-transform: skew(-10deg); -o-transform: skew(-10deg); -ms-transform: skew(-10deg); transform: skew(-10deg); }

breadcrumbs-four a::before {

left: -0.5em; -moz-border-radius: 5px 0 0 5px; -webkit-border-radius: 5px 0 0 5px; border-radius: 5px 0 0 5px; }

breadcrumbs-four a:hover::before {

background: #efc9ab; }

breadcrumbs-four a::after {

right: -0.5em; -moz-border-radius: 0 5px 5px 0; -webkit-border-radius: 0 5px 5px 0; border-radius: 0 5px 5px 0; }

breadcrumbs-four a:hover::after {

background: #efc9ab; }

breadcrumbs-four li:last-child {

font-weight: bold; background: none; }

DEMO五 https://www.w3cways.com/wp-content/uploads/2013/12/css3-breadcrumbs-5.png /Breadcrumbs Five/

breadcrumbs-five {

overflow: hidden; width: 70%;

}

breadcrumbs-five li {

float: left;

}

breadcrumbs-five a,

breadcrumbs-five li:last-child {

color: #fff; padding: 0.7em 1em 0.7em 2em; background: brown; background: hsla(34, 85%, 35%, 1); position: relative; float: left;

}

breadcrumbs-five a::after,

breadcrumbs-five a::before {

content: ""; border-top: 2em solid transparent; border-bottom: 2em solid transparent; border-left: 1em solid hsla(34, 85%, 35%, 1); position: absolute; top: 50%; margin-top: -2em; left: 100%; z-index: 2

}

breadcrumbs-five a::before {

margin-left: 1px; z-index: 1; border-left-color: #fff;

}

breadcrumbs-five li:first-child a {

padding-left: 1em;

}

breadcrumbs-five li:nth-child(2) a {

background: hsla(34, 85%, 45%, 1);

}

breadcrumbs-five li:nth-child(2) a::after {

border-left-color: hsla(34, 85%, 45%, 1);

}

breadcrumbs-five li:nth-child(3) a {

background: hsla(34, 85%, 55%, 1);

}

breadcrumbs-five li:nth-child(3) a::after {

border-left-color: hsla(34, 85%, 55%, 1);

}

breadcrumbs-five li:nth-child(4) a {

background: hsla(34, 85%, 65%, 1);

}

breadcrumbs-five li:nth-child(4) a::after {

border-left-color: hsla(34, 85%, 65%, 1);

}

breadcrumbs-five li a:hover {

background: hsla(34, 85%, 25%, 1);

}

breadcrumbs-five li a:hover::after {

border-left-color: hsla(34, 85%, 25%, 1) !important;

}

breadcrumbs-five li:last-child {

font-weight: bold; background: none; color: #000;

}

DEMO六 https://www.w3cways.com/wp-content/uploads/2013/12/css3-breadcrumbs-6.png /Breadcrumb Six/

breadcrumbs-six {

overflow: hidden; width: 70%;

}

breadcrumbs-six li {

float: left;

}

breadcrumbs-six a,

breadcrumbs-six li:last-child {

float: left; background: #D61D00; color: #fff; padding: 0.7em 1em 0.7em 2.5em; position: relative;

}

breadcrumbs-six li:first-child a {

padding-left: 1em;

}

breadcrumbs-six li:nth-child(2n) a {

background: #801100;

}

breadcrumbs-six a::after {

content: ""; position: absolute; border-style: solid; border-width: 1.5em 0 1.5em 1.5em; border-color: transparent transparent transparent #D61D00; right: -1.4em; top: 50%; margin-top: -1.5em; z-index: 2;

}

breadcrumbs-six li:nth-child(2n) a::after {

border-color: transparent transparent transparent #801100;

}

breadcrumbs-six li a:hover {

background: #000;

}

breadcrumbs-six li a:hover::after {

border-color: transparent transparent transparent #000;

}

breadcrumbs-six li:last-child {

background: none; font-weight: bold; color: #000;

}

DEMO七 https://www.w3cways.com/wp-content/uploads/2013/12/css3-breadcrumbs-7.png /Breadcrumb Seven/

breadcrumbs-seven {

overflow: hidden; width: 70%;

}

breadcrumbs-seven li {

float: left; margin-right: 0.8em;

}

breadcrumbs-seven a,

breadcrumbs-seven li:last-child {

float: left; padding: 2em 1em; background: hsla(80, 20%, 85%, 1); color: #000; position: relative;

}

breadcrumbs-seven a::after,

breadcrumbs-seven a::before,

breadcrumbs-seven li:last-child::before {

content: ""; position: absolute; border: 8px solid hsla(80, 20%, 85%, 1); border-color: transparent transparent transparent hsla(80, 20%, 85%, 1); top: 50%; margin-top: -8px; z-index: 2;

}

breadcrumbs-seven li:last-child::before,

breadcrumbs-seven a::before {

left: 0; border-left-color: #fff;

}

breadcrumbs-seven a::after {

right: -15px;

}

breadcrumbs-seven li:first-child a::before {

content: normal;

}

breadcrumbs-seven li:nth-child(2n) a {

background: hsla(80, 20%, 65%, 1);

}

breadcrumbs-seven li:nth-child(2n) a::after {

border-left-color: hsla(80, 20%, 65%, 1);

}

breadcrumbs-seven li:nth-child(3n) a {

background: hsla(80, 20%, 45%, 1);

}

breadcrumbs-seven li:nth-child(3n) a::after {

border-left-color: hsla(80, 20%, 45%, 1);

}

breadcrumbs-seven li:nth-child(4n) a {

background: hsla(80, 20%, 45%, 1);

}

breadcrumbs-seven li:nth-child(4n) a::after {

border-left-color: hsla(80, 20%, 45%, 1);

}

breadcrumbs-seven li a:hover {

background: hsla(80, 20%, 25%, 1); color: #fff;

}

breadcrumbs-seven li a:hover::after {

border-left-color: hsla(80, 20%, 25%, 1);

}

breadcrumbs-seven li:last-child {

background: hsla(80, 20%, 25%, 1); font-weight: bold; color: #fff;

}

---

这里是 脚注 的 内容. ↩