在网站中使用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. python6

    集合-set    集合是高中数据中的一个概念.    确定的一堆无需数据,集合中的买个数据称为一个集合       集合的定义         1.创建空集合             变量 = se ...

  2. MyBaits_查询缓存02_Ehcache二级缓存

    一.Ehcache二级缓存的开启 导入jar(https://github.com/mybatis/ehcache-cache/releases) <cache type="org.m ...

  3. 紫书第5章 C++STL

    例题 例题5-1 大理石在哪儿(Where is the Marble?,Uva 10474) 主要是熟悉一下sort和lower_bound的用法 关于lower_bound: http://blo ...

  4. Vue-resource和Axios对比以及Vue-axios

    vue更新到2.0之后,作者就宣告不再对vue-resource更新,而是推荐的axios. vue-resource特点 vue-resource插件具有以下特点: 1,体积小 vue-resour ...

  5. JSTL数据格式化

    日期表示 <fmt:formatDate value="${DATE1}" pattern="yyyy-MM-dd hh:mm:ss" type=&quo ...

  6. C语言--清理getchar缓存

    getchar()采用了缓冲区,而getch()才是立即获取,所以要想再用getchar()获取正确的值必须先清空缓冲区,如果是windows操作系统,用fflush(stdin)函数或rewind( ...

  7. css3阴影

    <!DOCTYPE html> <html> <head> <style> div { margin-top:100px; margin-left:10 ...

  8. Codeforces Round #411 (Div. 2) C. Find Amir

    C. Find Amir time limit per test   1 second memory limit per test   256 megabytes   A few years ago ...

  9. Codeforces Round #415 (Div. 2) B. Summer sell-off

    B. Summer sell-off time limit per test   1 second memory limit per test   256 megabytes   Summer hol ...

  10. 【Python】安装配置Anaconda

    优点:解决Python 库依赖问题 清华安装镜像 https://mirrors.tuna.tsinghua.edu.cn/anaconda/archive/