html添加markdown,为自己的网站添加Markdown——showdown.js使用教程

步骤2引入到自己的项目中，结构如下:

步骤3，引入到html，并使用

使用showdown.js的基本方式：

function compile(){

//获取要转换的文字

var text = document.getElementById("content").value;

//创建实例

var converter = new showdown.Converter();

//进行转换

var html = converter.makeHtml(text);

//展示到对应的地方 result便是id名称

document.getElementById("result").innerHTML = html;

}

仿简书的markdown实例代码：

测试使用markdown

blockquote {

border-left:#eee solid 5px;

padding-left:20px;

}

ul li {

line-height: 20px;

}

code {

color:#D34B62;

background: #F6F6F6;

}

function convert(){

var text = document.getElementById("oriContent").value;

var converter = new showdown.Converter();

var html = converter.makeHtml(text);

document.getElementById("result").innerHTML = html;

}

运行结果：

之后又发现一个开源库：

https://github.com/chjj/marked

使用方式相对简单一些，参照上面的实例，完成相同的功能，如下：

实例代码：

Title

function convert(){

var text = document.getElementById("oriContent").value;

var html = marked(text);

document.getElementById("result").innerHTML = html;

}

暂时先看这两个开源库，目前都不能像简书一样对照片进行操作，待了解~

个人wx：iotzzh

前端公众hao：前端微说