在网站中使用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. invalid stream header: EFBFBDEF 问题解决

    我们项目使用report 报表功能,然后在加载xxxx.jasper文件时候报的invalid stream header: EFBFBDEF 的错误 public JasperPrint fill( ...

  2. java温故而知新（6）深入理解IO Stream

    一.什么是IO Stream Stream 是在编程语言中对输入输出的总称 (一种比喻的称谓.Stream 为流水,输入输出实际上就是指数据的流动,数据由一个地方运动的另一个地方,就像流水一样,程序员 ...

  3. Spring课程 Spring入门篇 7-1 Aspect介绍及PointCut注解应用

    本节主要是理论型: 关键看下节实操. 这个其实只要理解一点:使用AspectJ进行Spring AOP 编程,其实就是使用了JAVA注解的风格进行配置和使用. 不像之前讲的那样在配置文件中配置使用.

  4. java.util.Collections.unmodifiableMap 示例

    1. 概述 public static <K,V> Map<K,V> unmodifiableMap(Map<? extends K,? extends V> m) ...

  5. CSS性能优化新属性：will-change

    ---恢复内容开始--- will-change属性通过告诉浏览器什么属性.什么元素将会发生变化,可以对这些操作进行可能性的优化,由此提高CSS动画的执行效率. 这个属性可以有4个值: auto: 实 ...

  6. 基于Tag的Docker自动构建

    构建规则 一旦您的Tag符合“release-v$version"的形式,将触发自动构建:1)若您有$version相关的Tag构建规则,则以$version的Tag规则帮您构建:2)若您没 ...

  7. 【转】Spark on Yarn遇到的几个问题

    本文转自 http://www.cnblogs.com/Scott007/p/3889959.html 1 概述 Spark的on Yarn模式,其资源分配是交给Yarn的ResourceManage ...

  8. python wsgi PEP333 中文翻译

    PEP 333 中文翻译 首先说明一下,本人不是专门翻译的,英文水平也不敢拿来献丑.只是这是两年前用python的时候为了自己学习方便而翻译的,记录着笔记自己看看而已.最近翻出来看看觉得还是放出来吧. ...

  9. LeetCode--Combination Sum --ZZ

    http://blog.csdn.net/linhuanmars/article/details/20828631 这个题是一个NP问题,方法仍然是N-Queens中介绍的套路.基本思路是先排好序,然 ...

  10. Oracle GoldenGate 详解

    一.Oracle GoldenGate介绍 GoldenGate软件是一种基于日志的结构化数据复制软件.GoldenGate 能够实现大量交易数据的实时捕捉.变换和投递,实现源数据库与目标数据库的数据 ...