欢迎使用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 | $1600 |
Phone | $12 |
Pipe | $1 |
可以使用冒号来定义对齐方式:
项目 | 价格 | 数量 |
---|---|---|
Computer | 1600 元 | 5 |
Phone | 12 元 | 12 |
Pipe | 1 元 | 234 |
定义列表
-
Markdown Extra 定义列表语法:
项目1
项目2
- 定义 A
- 定义 B 项目3
- 定义 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编辑器写博客
- breadcrumbs-one a
- breadcrumbs-one lilast-child
- breadcrumbs-one lifirst-child a
- breadcrumbs-one ahover
- breadcrumbs-one aafter
- breadcrumbs-one abefore
- breadcrumbs-one aafter
- breadcrumbs-one abefore
- breadcrumbs-one ahoverafter
- breadcrumbs-one lilast-child
- breadcrumbs-two
- breadcrumbs-two li
- breadcrumbs-two a
- breadcrumbs-two lilast-child
- breadcrumbs-two ahover
- breadcrumbs-two abefore
- breadcrumbs-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 a
- breadcrumbs-three lilast-child
- breadcrumbs-three ahover
- breadcrumbs-three aafter
- breadcrumbs-three ahoverafter
- breadcrumbs-three lilast-child
- breadcrumbs-four
- breadcrumbs-four li
- breadcrumbs-four a
- breadcrumbs-four lilast-child
- breadcrumbs-four ahover
- breadcrumbs-four abefore
- breadcrumbs-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 a
- breadcrumbs-five lilast-child
- breadcrumbs-five aafter
- breadcrumbs-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 a
- breadcrumbs-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 a
- breadcrumbs-seven lilast-child
- breadcrumbs-seven aafter
- breadcrumbs-seven abefore
- breadcrumbs-seven lilast-childbefore
- breadcrumbs-seven lilast-childbefore
- breadcrumbs-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 。
- 块级公式:
更多LaTex语法请参考 这儿.
UML 图:
可以渲染序列图:
或者流程图:
离线写博客
即使用户在没有网络的情况下,也可以通过本编辑器离线写博客(直接在曾经使用过的浏览器中输入write.blog.csdn.net/mdeditor即可。Markdown编辑器使用浏览器离线存储将内容保存在本地。
用户写博客的过程中,内容实时保存在浏览器缓存中,在用户关闭浏览器或者其它异常情况下,内容不会丢失。用户再次打开浏览器时,会显示上次用户正在编辑的没有发表的内容。
博客发表后,本地缓存将被删除。
用户可以选择 把正在写的博客保存到服务器草稿箱,即使换浏览器或者清除缓存,内容也不会丢失。
注意:虽然浏览器存储大部分时候都比较可靠,但为了您的数据安全,在联网后,请务必及时发表或者保存到服务器草稿箱。
浏览器兼容
- 目前,本编辑器对Chrome浏览器支持最为完整。建议大家使用较新版本的Chrome。
- IE9以下不支持
- IE9,10,11存在以下问题
- 不支持离线功能
- 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;
}
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;
}
- 这里是 脚注 的 内容. ↩