Markdown在线编辑器
编辑器 在线 markdown
2023-09-14 09:01:36 时间
使用showdown.js实现的Markdown在线编辑器
DEMO效果图
引入showdown.js
<script src="https://cdn.bootcss.com/showdown/1.3.0/showdown.min.js"></script>
HTML代码
<div class="editor-box">
<p class="head-name">Markdown编辑器</p>
<textarea class="markdown-editor" id="editor" onkeyup="preview()">### Hello Markdown Edit!</textarea>
</div>
<div class="preview-box">
<p class="head-name">预览</p>
<div class="markdown-preview" id="preview">
</div>
</div>
CSS代码
body{margin: 0;background-color: #000;}
//预览基础样式
blockquote {
border-left:#eee solid 5px;
padding-left:20px;
}
ul li {
line-height: 20px;
}
p{line-height: 30px;font-size: 18px;}
pre{overflow-x: auto;font-family: '微软雅黑','Rotis','sans-serif';background: #000;width: 100%;border: 1px solid #000;border-radius: 5px;box-sizing: border-box;padding: 10px;}
code {
color:#fff;
width: 100%;
font-size: 16px;
}
//盒子样式
.editor-box{
width:50%;
background-color:#fff;
float:left;
box-sizing:border-box;
border-right:1px solid #ccc;
}
.preview-box{
width:50%;
background-color:#fff;
float:right;
}
.head-name{
height:50px;
line-height:50px;
text-align:center;
}
.markdown-editor,.markdown-preview{
width:100%;
box-sizing:border-box;
resize:none;
height:500px;
padding:10px;
text-align:left;
color:#444;
border:1px solid #aaa;
display:block;
overflow:auto;
}
JS代码
(function(win,doc){
var converter = new showdown.Converter();
function $(elem){
return doc.getElementById(elem);
}
var preview = win.preview = function(){
$('preview').innerHTML = converter.makeHtml($('editor').value);
}
preview();
})(window,document)
其他
相关文章
- 解决CodeMirror编辑器Tab转空格问题
- vi编辑器的使用
- vim编辑器如何删除一行或者多行内容
- python生成组织架构图(网络拓扑图、graph.editor拓扑图编辑器)
- Office EXCEL 2010如何启用宏编辑器,打开VB编辑器
- 如何扩展ArcGIS中的元数据编辑器
- SPSS数据编辑器界面 度量 名义 序号 标签
- Spark修炼之道(基础篇)——Linux大数据开发基础:第五节:vi、vim编辑器(一)
- [工具] 将Sublime Text 3配置为C++代码编辑器
- Linux vim编辑器常用命令
- web 应用在线编辑器 glitch 简介
- [编辑器] Tab转换成空格
- 使用kindeditor来替换ecshop的fckeditor编辑器,让ecshop可以批量上传图片
- 七个好用且免费的在线代码编辑器,你喜欢哪个?
- Unity技术手册-编辑器基础入门万字大总结
- Markdown在线编辑器
- Linux基础笔记13 | vim 编辑器详解