&_markdown web">
赞
踩
主要用于类似于搭建个人博客中发布编辑查看博客的功能。
因为引入两行链接就可以直接使用了。
官网:SimpleMDE Markdown Editor
GitHub:SimpleMDE - Markdown Editor
简单使用:
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link href="https://cdn.bootcss.com/simplemde/1.11.2/simplemde.min.css" rel="stylesheet">
</head>
<body>
<textarea></textarea>
<script src="https://cdn.bootcss.com/simplemde/1.11.2/simplemde.min.js"></script>
<script>
var simplemde = new SimpleMDE();
</script>
</body>
</html>
进阶使用:
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link href="https://cdn.bootcss.com/simplemde/1.11.2/simplemde.min.css" rel="stylesheet">
<link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<link href="https://cdn.bootcss.com/highlight.js/9.13.0/styles/github-gist.min.css" rel="stylesheet">
</head>
<body>
<textarea></textarea>
<script src="https://cdn.bootcss.com/simplemde/1.11.2/simplemde.min.js"></script>
<script src="https://cdn.bootcss.com/highlight.js/9.13.1/highlight.min.js"></script>
<script>
var simplemde = new SimpleMDE({
element: document.querySelector('textarea'),
autoDownloadFontAwesome:false,//true从默认地址引入fontawesome依赖 false需自行引入(国内用bootcdn更快点)
autofocus:true,
autosave: {
enabled: true,
uniqueId: "SimpleMDE",
delay: 1000,
},
blockStyles: {
bold: "**",
italic: "*",
code: "```"
},
forceSync: true,
hideIcons: false,
indentWithTabs: true,
lineWrapping: true,
renderingConfig:{
singleLineBreaks: false,
codeSyntaxHighlighting: true // 需要highlight依赖
},
showIcons: true,
spellChecker: true
});
// 默认开启预览模式
simplemde.toggleSideBySide();
</script>
</body>
</html>
更改代码预览区域样式:
.cnblogs-markdown .hljs {
display: block;
overflow-x: auto;
padding: 0.5em;
background: #1E1E1E !important;
color: #FFF;
white-space: pre;
word-break: normal;
font-family: "Consolas", sans-serif !important;
font-size: 14px !important;
}
.hljs {
display: block;
overflow-x: auto;
padding: 0.5em;
background: #1E1E1E;
color: #DCDCDC;
}
code.hljs {
display: inline-block !important;
vertical-align: top !important;
}
.hljs-keyword,
.hljs-literal,
.hljs-symbol,
.hljs-name {
color: #569CD6;
}
.hljs-link {
color: #569CD6;
text-decoration: underline;
}
.hljs-built_in,
.hljs-type {
color: #4EC9B0;
}
.hljs-number,
.hljs-class {
color: #B8D7A3;
}
.hljs-string,
.hljs-meta-string {
color: #D69D85;
}
.hljs-regexp,
.hljs-template-tag {
color: #9A5334;
}
.hljs-subst,
.hljs-function,
.hljs-title,
.hljs-params,
.hljs-formula {
color: #DCDCDC;
}
.hljs-comment,
.hljs-quote {
color: #57A64A;
font-style: italic;
}
.hljs-doctag {
color: #608B4E;
}
.hljs-meta,
.hljs-meta-keyword,
.hljs-tag {
color: #9B9B9B;
}
.hljs-variable,
.hljs-template-variable {
color: #BD63C5;
}
.hljs-attr,
.hljs-attribute,
.hljs-builtin-name {
color: #9CDCFE;
}
.hljs-section {
color: gold;
}
.hljs-emphasis {
font-style: italic;
}
.hljs-strong {
font-weight: bold;
}
/*.hljs-code {
font-family:'Monospace';
}*/
.hljs-bullet,
.hljs-selector-tag,
.hljs-selector-id,
.hljs-selector-class,
.hljs-selector-attr,
.hljs-selector-pseudo {
color: #D7BA7D;
}
.hljs-addition {
background-color: #144212;
display: inline-block;
width: 100%;
}
.hljs-deletion {
background-color: #600;
display: inline-block;
width: 100%;
}
pre {
background-color:#1e1e1e !important;
color: white;
}
更多代码风格,参考highlight.js
GitHub:markedjs/marked
GitHub:showdownjs/showdown
GitHub:hinesboy/mavonEditor
GitHub:millerblack/markdown-js
赞
踩
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。