在网站中使用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. 2017年11月26日 C#流&&窗体对话框

    C#流 在顶端加入using System.IO就可以使用流 StreamReder a = new StreamReder();//读取 前面什么都可以 = sr.ReadToEnd();//用法 ...

  2. 学会Markdown，写博客不愁

    前言 Markdown是一种轻量级的标记语言,有John Gruber以及Aaron Hillel Swartz一起编写.Aaron Hillel Swartz是一个极富传奇的黑客,有兴趣可以看看他的 ...

  3. Android源码下编译APK步骤

    1.进入android源码目录下的build下执行:source envsetup.sh 后继续在该路径下执行lunch. 2.编写完成工程 3.编写Android.mk文件,放入工程目录下     ...

  4. Python中元组和列表

    一.list列表的操作包括以下函数: 列表操作包括以下函数: 1.cmp(list1,list2) :比较两个列表的元素 2.len(list) :列表元素个数 3.max(list) :返回列表元素 ...

  5. sql:查询创建表的结构

    --显示所有用户表: --1 SELECT SCHEMA_NAME(schema_id) As SchemaName , name As TableName from sys.tables ORDER ...

  6. 【Android】10.0 UI开发——如何编写程序界面、常见控件的使用

    ************************ 转载请注明出处:https://www.cnblogs.com/xiaofu007/p/10331880.html ***************** ...

  7. Python基础-小程序练习（跳出多层循环，购物车，多级菜单，用户登录）

    一. 从第3层循环直接跳出所有循环 break_flag = False count = 0 while break_flag == False: print("-第一层") wh ...

  8. EasyUI combobox 加载JSON数据

    Action返回 JSON 格式如下: jsonResult = { total=7,rows=[ {TEXT=技术支持, ID=402894ca4419acf1014419b148a10000}, ...

  9. 如何编写自定义hive UDF函数

    Hive可以允许用户编写自己定义的函数UDF,来在查询中使用.Hive中有3种UDF: UDF:操作单个数据行,产生单个数据行: UDAF:操作多个数据行,产生一个数据行. UDTF:操作一个数据行, ...

  10. 在Linux中安装redmine

    Redmine是用Ruby开发的基于web的项目管理软件,是用ROR框架开发的一套跨平台项目管理系统. 如下即为安装步骤: (1)配置ruby环境,可用rvm进行安装匹配,参考http://ruby- ...