1、markdown.js
.1 下载地址:https://github.com/evilstreak/markdown-js
<script src="js/plugins/markdown.min.js"></script>
<div>
<!-- 输入区 -->
<textarea id="text-input" oninput="this.editor.update()">
在此处输入相关markdown语句
</textarea>
<!-- 显示区 -->
<div id="preview" class="pull-left"> </div>
</div>
<script>
// markdown
function Editor(input, preview) {
this.update = function () {
preview.innerHTML = markdown.toHTML(input.value);
};
input.editor = this;
this.update();
}
var _a = function (id) { return document.getElementById(id); };
new Editor(_a("text-input"), _a("preview"));
</script>
2、showdown.js
<div>
<textarea id="content" style="" onkeyup="convert()"></textarea>
<div id="result">
</div>
<script src="https://cdn.bootcss.com/showdown/1.3.0/showdown.min.js"></script>
<script>
function convert(){
//获取要转换的文字
var text = document.getElementById("content").value;
//创建实例
var converter = new showdown.Converter();
//进行转换
var html = converter.makeHtml(text);
//展示到对应的地方 result便是id名称
document.getElementById("result").innerHTML = html;
}
</script>
3、strapdown.js
- 下载地址:https://github.com/arturadib/strapdown
- http://strapdownjs.com/
- strapdown 有一些主题可以直接使用 更改theme的属性值就可以了(主题有:amelia、cerulean、cyborg、journal、readable、simplex、slate等)
<textarea theme="united" style="display:block;">
</textarea>
<script src="strapdown.js"></script>
网友评论