在网站中使用markdown有两种方式，一种是通过后端（php等）把markdown语法文本转换为html代码，输出到浏览器；另一种是通过javascript代码直接在浏览器中转换。

我在这里使用的是github上的开源库：

PHP：https://github.com/SegmentFault/HyperDown
JS ：https://github.com/SegmentFault/HyperDown.js

我用的是js版本。

在这里使用的JS版本中的Parse.js文件

代码如下：

<!DOCTYPE html>

<html>

<head>

</head>

  <body>

    <textarea id="text-input" oninput="refresh()"

              rows="6" cols="60">#Leechg

    - hello [hello](#http://www.leehg.com)

    ```js

    console.log(ss);

    function a(){

    }

    ```

    </textarea>

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

    <script src="lib/Parser.js"></script>

    <script>

      function Editor(input, preview) {

        var parser = new HyperDown,

        html = parser.makeHtml(input.value);

        preview.innerHTML = html;

        return;

      }

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

      function refresh(){

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

      }

    </script>

  </body>

</html>

END::

在网页中使用Markdown的更多相关文章

  1. 在html中嵌入markdown

    在博客园网页里写markdown的时候, 某些特殊内容想加上自定义的css, 于是用<div class="xxx">包裹起来, 但是发现该<div>中的m ...

  2. 在为知笔记中使用Markdown和思维导图

    为知笔记Wiz是一款很好的网摘和笔记工具,作为为知的忠实用户,我在为知收费后第一时间就购买了两年的授权,毕竟这么多年积累的资料都在为知上,我也习惯了使用Wiz来做些工作相关的笔记.为知笔记自带Mark ...

  3. Mkdocs在html网页上看markdown

    目录 Mkdocs在html网页上看markdown 1. 本文目的 2. Mkdocs介绍 3. DEMO的演示 3.1 配置需求 3.2 安装mkdocs 3.3 新建工程 3.4 启动服务器 3 ...

  4. 如何在网页中提取Email地址

    开博好久了,今天第一次发表技术文档,之前总是将一些好的事例保存在电脑,时间久了找起来也很麻烦,所以还是放在博客里进行归类比较方便,这样也能将自己在学习过程中的一些心得体会分享给大家,也能给需要的人一点 ...

  5. 前端开发css实战：使用css制作网页中的多级菜单

    前端开发css实战:使用css制作网页中的多级菜单 在日常工作中,大家都会遇到一些显示隐藏类菜单,比如页头导航.二维码显示隐藏.文本提示等等......而这些效果都是可以使用纯css实现的(而且非常简 ...

  6. 用字体在网页中画Icon图标

    第一步,下载.IcoMoon网站选择字体图标并下载,解压后将fonts文件夹放在工程目录下.fonts文件夹内有四种格式的字体文件: 注:由于浏览器对每种字体的支持程度不一致,要想在所有浏览器中都显示 ...

  7. 网页中如何启用QQ交谈

    很多网友都会发现好多的网页中会有诸如,网页中如何启用QQ交谈? 1. 登录QQ, 打开网址:http://shang.qq.com/v3/widget.html 启用QQ通讯组件. 2. 选择组件样式 ...

  8. web网页中使用vlc插件播放相机rtsp流视频

    可参考: 使用vlc播放器做rtsp服务器 使用vlc播放器播放rtsp视频 使用vlc进行二次开发做自己的播放器 vlc功能还是很强大的,有很多的现成的二次开发接口,不需配置太多即可轻松做客户端播放 ...

  9. Java 抓取网页中的内容【持续更新】

    背景:前几天复习Java的时候看到URL类,当时就想写个小程序试试,迫于考试没有动手,今天写了下,感觉还不错 内容1. 抓取网页中的URL 知识点:Java URL+ 正则表达式 import jav ...

随机推荐

  1. 如何理解animation-fill-mode及其使用？<转>

    今天看了css3的动画,对animation的其他属性都比较容易理解,唯独这个animation-fill-mode让我操碎了心. 找了些下面的描述: 规定对象动画时间之外的状态. 有四个值可选,并且 ...

  2. ,SQL语句关键词以及实例

    1.select:功能:查找,语法:select 列名 from 表名(注:可以一次从一个表中查询多个列或者从多个表名中查询资料) 实例:select Name from Table1,返回Table ...

  3. 很多个java面试题

    1. 为什么说Java是一门平台无关语言? 平台无关实际的含义是“一次编写到处运行”.Java 能够做到是因为它的字节码(byte code)可以运行在任何操作系统上,与底层系统无关. 2. 为什么 ...

  4. linux 添加开机自启动脚本

    原文 Linux设置服务开机自动启动的方式有好多种,这里介绍一下通过chkconfig命令添加脚本为开机自动启动的方法. 1. 编写脚本autostart.sh(这里以开机启动redis服务为例),脚 ...

  5. 从ExtensionLoader理解Dubbo扩展机制

    Dubbo的扩展机制是怎么实现的?最简单的回答就是@SPI. Dubbo的插件化思路来源于Java SPI.   JAVA SPI 机制     SPI的全名为Service Provider Int ...

  6. git新建分支没有master分支，其他分支也看不到

    git checkout -b dev git新建dev分支,发现切换到了dev分支,但是master分支没有了 git branch和git branch -a 都没有任何反应,看不到其他分支, g ...

  7. oracle数据库基本命令

    数据库字符集: SQL> select * from nls_database_parameters where parameter='NLS_CHARACTERSET'; PARAMETER ...

  8. Storm Flow

    A Stream represents the core data model in Trident, and can be thought of as a "stream" of ...

  9. 提高 GitHub 网页访问速度 以及 Git Clone 速度 的小技巧

    参考: http://www.cnblogs.com/mico-liu/p/9303817.html https://blog.csdn.net/qq756684177/article/details ...

  10. Python3.5 使用Sqlite3

    -------------------- 修雨轩陈@cnblog Python3.5 使用Sqlite3 python3.5 安装的时候会有很多可选参数,这些参数是默认不提供的,可是当我们想通过pip ...