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

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

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

<!DOCTYPE html>

<html>

  <body>

    <textarea id="text-input" oninput="this.editor.update()"

              rows="6" cols="60">Type **Markdown** here.</textarea>

    <div id="preview"> </div>

    <script src="markdown.js"></script>

    <script>

      function Editor(input, preview) {

        this.update = function () {

          preview.innerHTML = markdown.toHTML(input.value);

        };

        input.editor = this;

        this.update();

      }

      var $ = function (id) { return document.getElementById(id); };

      new Editor($("text-input"), $("preview"));

    </script>

  </body>

</html>

这样就轻松的实现了实时解析转换：

转换后得到的只是最基础的HTML，可以用CSS美化一下，随手将Bootstarp的CSS引用过来看看：

<!DOCTYPE html>

<html>

<head>

<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()"

              rows="6" cols="60">Type **Markdown** here.</textarea>

    <div id="preview"> </div>

    <script src="markdown.js"></script>

    <script>

      function Editor(input, preview) {

        this.update = function () {

          preview.innerHTML = markdown.toHTML(input.value);

        };

        input.editor = this;

        this.update();

      }

      var $ = function (id) { return document.getElementById(id); };

      new Editor($("text-input"), $("preview"));

    </script>

  </body>

</html>

效果如下：

在线体验地址：  http://www.richerdyoung.cn/markdown/

markdown 基于语法： http://www.cnblogs.com/richerdyoung/p/7084055.html

【markdown】使用 js 实现自己得markdown 网页编辑器的更多相关文章

  1. 原生js写的贪吃蛇网页版游戏特效

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <bo ...

  2. 分享：计算机图形学期末作业！！利用WebGL的第三方库three.js写一个简单的网页版“我的世界小游戏”

    这几天一直在忙着期末考试,所以一直没有更新我的博客,今天刚把我的期末作业完成了,心情澎湃,所以晚上不管怎么样,我也要写一篇博客纪念一下我上课都没有听,还是通过强大的度娘完成了我的作业的经历.(当然作业 ...

  3. node.js基础模块http、网页分析工具cherrio实现爬虫

    node.js基础模块http.网页分析工具cherrio实现爬虫 一.前言      说是爬虫初探,其实并没有用到爬虫相关第三方类库,主要用了node.js基础模块http.网页分析工具cherri ...

  4. JS获取屏幕,浏览器窗口大小,网页高度宽度(实现代码)_javascript技巧_

    JS获取屏幕,浏览器窗口大小,网页高度宽度(实现代码)_javascript技巧_--HTML5中文学习网 http://www.html5cn.com.cn/shili/javascripts/79 ...

  5. Ueditor百度网页编辑器开发者版java utf-8的使用

    index.jsp主要代码: <html> <head> <title>网页编辑器</title> <script type="text ...

  6. 【HTML5+MVC4】xhEditor网页编辑器图片上传

    准备工作: 创建一个MVC项目中,添加好xhEditor插件 相关用法:http://www.cnblogs.com/xcsn/p/4701497.html 注意事项:xhEditor分为v1.1.1 ...

  7. 在JSP中使用CKEditor网页编辑器

    为了在我的一个项目使用CKEditor网页编辑器,我开始了寻找应用之法. 我下载了ckeditor_4.3.3_standard和ckeditor-java-core-3.5.3. 之前的版本和现在版 ...

  8. CKEDITOR (FCKEDITOR) --- 目前最优秀的可见即可得网页编辑器之一

    FCKEDITOR 编辑 同义词 CKEditor一般指FCKEDITOR FCKeditor是目前最优秀的可见即可得网页编辑器之一,它采用JavaScript编写.具备功能强大.配置容易.跨浏览器. ...

  9. JQuery轻量级网页编辑器 选中即可编辑

    目前流行的可视化网页编辑器非常多,像ckeditor.kindeditor.tinyeditor等,虽然功能都非常强大,但是体积都比 较庞大,使用起来也不是很方便.今天我们分享一款基于jQuery的轻 ...

  10. 网页编辑器CKEditor4.3.1+CKFinder2.4+JW Player6.7（视频播放器）集成

    CKEditor是使用最多的一款在线网页编辑器,不仅好用,而且功能强大.易扩展.浏览器兼容性好.另外,CKEditor网页编辑器经常更新.本程序使用的是最新稳定版CKEditor4.3.1,添加使用了 ...

随机推荐

  1. QT4.8.5 QComboBox 增加选择菜单记录

    QT4.8.5 QComboBox 增加选择菜单记录 因为软件需要测试多个UART ,多个LAN,当要测试多个同样功能的时候就可以使用QComboBox类实现一个菜单选择功能. 步骤如下: 1. 在U ...

  2. dpkg制作deb包

    deb包的文件结构: deb包里面的结构:DEBIAN目录 和 软件具体安装目录(模拟安装目录)(如etc, usr, opt, tmp等). 在DEBIAN目录中至少有control文件,还可能有p ...

  3. JavaScrip——对话框的简单应用（判断isNaN）

    综合运用 isNaN的用法:判断是不是一个合法的数字类型,是数字返回false,不是返回true 1.我们用prompt来接收输入的内容 2.通过isNaN来做判断 3.最后用alert输出结果 &l ...

  4. hadoop 1.1.2和 hive 0.10 和hbase 0.94.9整合

    今天弄了一下hive0.10和hbase0.94.9整合,需要设置的并不多,但是也遇到了一些问题. 1.复制jar包 拷贝hbase-0.94.9.jar,zookeeper-3.4.5.jar,pr ...

  5. 全栈设计模式套餐MVVM, RESTful, MVC的历史探索

    众所周知, 软件开发时遵守一个规范的设计模式非常重要, 学习行业内主流的design pattern往往能够为你节省大部分时间. 根据我2年的全栈经验, 在Web应用程序领域最流行的, 并且若干年内不 ...

  6. iOS边练边学--(Quartz2D)基本图形的绘制#附加自定义进度控件的练习

    一.Quartz2D使用须知 Quartz2D的API是纯C语言的 Quartz2D的API来自于Core Graphics框架 二.<1>通过原始的方法(C语言)绘制简单图形--了解 & ...

  7. Sphinx速成指南

    目录 1. Sphinx简介 1.1. 什么是全文检索 1.2. 介绍 1.3. Sphinx的特性 2. Sphinx安装(For MySQL) 2.1. Windows下安装 2.2. Linux ...

  8. 【MySQL】字符串截取之substring_index

    substring_index(str,delim,count)       str:要处理的字符串       delim:分隔符       count:计数 例子:str=www.baidu.c ...

  9. 【转】MFC CListCtrl 使用技巧

    以下未经说明,listctrl默认view 风格为report 相关类及处理函数 MFC:CListCtrl类 SDK:以 “ListView_”开头的一些宏.如 ListView_InsertCol ...

  10. 【MySQL】MySQL 常用语法之锁表与解锁表

    mysql 锁表语句: Lock锁整张表: 写锁定: LOCK TABLES products WRITE: 写锁,锁定之后,只有当前线程可以进行读操作和写操作,其他线程读操作和写操作均被堵塞.... ...