html添加markdown,为自己的网站添加Markdown—

步骤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：前端微说

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

改网站不存在cdn服务器,网站添加cdn加速服务器
网站添加cdn加速服务器内容精选换一换通过本文档,您可以快速了解华为云CDN的基础知识,如果想了解更多详细信息,可以根据扩展阅读的引导来进行阅读.CDN(Content Delivery Net ...
使用prismjs为网站添加代码高亮功能
prismjs 是一款轻量.可扩展的代码语法高亮库,使用现代化的 Web 标准构建,使用 Prismjs 可以快速为网站添加代码高亮功能,支持超过113中编程语言,还支持多种插件,是简洁.高效的代码高 ...
织梦同步静态文件到服务器,静态网站添加到织梦
静态网站添加到织梦内容精选换一换本文介绍了弹性文件服务SFS各特性版本的功能发布和对应的文档动态,新特性将在各个区域(Region)陆续发布,欢迎体验. 开启网页防篡改时,您需为指定的主机分配一 ...
php源码中如何添加滚动公告,如何给WordPress网站添加滚动公告？
如何给WordPress网站添加滚动公告?今天我们一起了解一下. 1.添加公告文章类型首先,注册一个公告的文章类型,包括公告的新建,添加,编辑与删除.在functions.php的同级目录下新建一个 ...
网站添加到IIS和附件进程调试（新手使用篇）
一.网站添加到IIS 做网站开发,很有必要把项目添加到IIS中,这对浏览和后期的调试很有帮助.怎么把网站添加到IIS上? 1). 打开IIS,然后操作步骤如下图: 选择Default Web Site ...
chromebook刷机_如何将网站添加到您的Chromebook架子上
chromebook刷机 Bookmarks are great to keep your favorite sites nearby, but they aren't the fastest opt ...
windows rt_如何在Windows RT上轻松将网站添加到Flash白名单
windows rt Microsoft's Surface RT and other Windows RT-based machines include the Flash browser plug ...
hexo博客添加暗色模式_我如何向网站添加暗模式
hexo博客添加暗色模式同一个网站,两种不同的配色方案 (Same website, two different color schemes) Last year I made it a point ...
【HTML】使用css3和html给网站添加上春节灯笼特效
马上就过年了,网站也可以装饰一下,本文就教大家如何使用css和html代码给你网站添加上一对新年灯笼. 这个灯笼特效可以加到任何网站上面,不管你是不是用的WordPress搭建的网站都可以. 具体的方 ...
网站添加微信支付功能（小白填坑）
本周的工作安排就是在网站添加支付功能,包括支付宝.微信.财付通等,今天这篇文章先说一下微信支付吧,支付宝的太容易了基本看一下都会了 1.首先准备工作,开通了支付功能的账号,具体怎么开通的我也不熟悉因为 ...

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

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

最新文章

热门文章