在网站中使用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. java导入excle表格，并且对表格进行相应的修改，并对表格数据进行整理，最后导出本地表格等一系列操作

    1.首先创建一个java项目 完成效果如下图所示 2.导入以下jar包 3.代码如下 其中行和列的操作是根据需求自动划分的 public class auto_date { private stati ...

  2. redis的安全问题

    1.修改redis.conf配置文件 2.重启redis服务,使其生效 3.成功登陆以后,使用auth+密码 或者在登录的时候使用-a 密码的授权方式

  3. 梯度寻优与logistic算法

    一.一些基本概念 最优化:在给定约束之下如何寻求某些因素(的量),以使某一(或某些)指标达到最优.高中学过的线性规划就是一类典型的最优化问题. 凸集:在集合空间中,凸集就是一个向四周凸起的图形.用数学 ...

  4. jquery+springMVC实现文件上传

    此文章是基于 搭建Jquery+SpringMVC+Spring+Hibernate+MySQL平台 一. jar包介绍 1. commons-fileupload-1.3.1.jar 二. 相关程序 ...

  5. PAT 1044. Shopping in Mars

    #include <cstdio> #include <cstdlib> #include <vector> #include <climits> #i ...

  6. css3打包后自动追加前缀插件：autoprefixer

    用vue-cli构建的项目脚手架已经帮你把autoprefixer的配置做好了,自己不需要做什么改动就会自动加前缀: 下面一起看看涉及到autoprefixer这个插件的一些配置: 1,postcss ...

  7. 【代码笔记】Java常识性基础补充(二)——数组、ArrayList集合、ASCII编码、 eclipse基础操作、eclipse调试、eclipse项目导入、eclipse快捷键

    1.0 如何定义数组以及访问数组中的元素,如下所示.ArrayDemo01.java public class ArrayDemo01 { public static void main(String ...

  8. sass判断语句

    @if判断 @if可一个条件单独使用,也可以和@else结合多条件使用 scss.style css.style 三目判断 语法为:if($condition, $if_true, $if_false ...

  9. 按需引入antd

    使用create-react-app创建项目的时候,官网推荐使用 babel-plugin-import 对antd 按需引入文件.但是配置文件在项目里没有. 可以直接在package.json里加上 ...

  10. 在IIS中浏览网站时出现：无法打开登录所请求的数据库 "***"，登录失败

    在IIS中发布Web应用程序后,浏览网站时出现无法打开登录所请求的数据库 "***",登录失败错误,如下图所示: 解决办法:打开系统Web.Config配置文件,查看数据库连接串是 ...