轻松记录您
灵感和创意

实现网页客户端实时自动解析Markdown为HTML内容

目前大多数相关项目实现的都是服务器端的Markdown语法解析,解析后将HTML代码返回给客户端,就像这个C#的项目:Markdownsharp

我感觉这么轻量的格式没必要浪费服务器运算和大量资源,还是通过Javascript实现客户端解析的方法最实用,而且客户端解析的方式可以实现实时的所见即所得对照编辑,非常方便。

多番寻找和尝试,最终最终了Markdown-js

首先从这里下载其浏览器版:

https://github.com/evilstreak/Markdown-js/releases

解压缩后在其js文件同目录下新建一个网页进行测试,代码如下:

<!doctype html=””><身体>在此处输入“降价” **。<div src=”“” cdata_tag=”script” cdata_data=”</ script> <脚本> 功能编辑器(输入,预览){ this.update = function(){ Preview.innerHTML = <strong>Markdown</strong>.toHTML(input.value); }; input.editor = this; this.update(); } var $ = function(id){return document.getElementById(id); }; 新的Editor($(“ text-input”),$(“ preview”))); </ script> </ body></ html></p><p>这样就轻松的实现了实时解析转换:</p><p>转换后得到的只是最基础的HTML,可以使用CSS美化一下,随手将Bootstarp的CSS引用过来看看:</p><p><!DOCTYPE html><html><头><link href =“ http://cdn.bootcss.com/bootstrap/3.3.1/css/bootstrap.min.css” rel =“ stylesheet”></ head><body style =“ padding:30px”><textarea id =“ text-input” oninput =“ this.editor.update()” 行=“ 6” cols =“ 60”>在此处输入“降价” **。</ textarea><div id =“ preview”></ div><script src =“ <strong>Markdown</strong>.js”></ script> <脚本> 功能编辑器(输入,预览){ this.update = function(){ Preview.innerHTML = <strong>Markdown</strong>.toHTML(input.value); }; input.editor = this; this.update(); } var $ = function(id){return document.getElementById(id); }; 新的Editor($(“ text-input”),$(“ preview”))); </ script> </ body></ html></p><p>这样看起来已经很不错了。</p>” _ue_custom_node_=”true”></div>

未经允许不得转载:坚果云Markdown » 实现网页客户端实时自动解析Markdown为HTML内容
分享到: 更多 (0)

坚果云Markdown轻松记录您 灵感和创意

坚果云Markdown下载坚果云Markdown介绍