Giter VIP home page Giter VIP logo

easy-markdown's Introduction

easy-markdown

极致简单的markdown编辑器,查看DEMO

安装

如果仅使用easy-markdown的解析功能,只需下载/dist/easy-markdown.min.js,否则应该下载dist中的全部文件。

使用

easy-markdown基于原生js开发,无需任何依赖,在页面中引入:

<script src="easy-markdown.min.js"></script>

使用默认样式

<link rel="stylesheet" href="easy-markdown.min.css">

要使用代码高亮,可以配合highlight.js使用:

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.11.0/styles/default.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.11.0/highlight.min.js"></script>

highlight.js文档:https://highlightjs.org/usage/

使用解释器:

<textarea id="mark"></textarea>
<div id="preview"></div>
window.onload = function () {
    var markdown = new Reader("mark");
    //获取原始文本
    markdown.reader;
    //获取转义后的原始文本
    markdown.readerTransfer;
    //以数组形式获得所有文本
    markdown.getHtml();
    //渲染文本到页面元素
    markdown.showHtml("preview");
    //获取指定行文本(示例为第0行)
    markdown.getLineText(0);
    //获取编辑器分组后的原始文本
    markdown.getLines();
};

监听键盘事件实现实时解析:

document.getElementById("mark").addEventListener("keyup", function () {
    var markdown = new Reader("mark");
    markdown.showHtml("preview");
});

效果预览

标题:

标题1

标题2

标题3

标题4

标题5
标题6

分割线:

区块引用:

helloworld

列表:

  • 无序列表
  • 无序列表
  • 无序列表
  1. 有序列表
  2. 有序列表
  3. 有序列表

代码块:

var x = "helloworld";
<script>
    var x = "helloworld";
</script>

其他:

超链接

粗体斜体代码行

图片: 图片

解析器也支持原生的html语法。

许可证

Copyright (c) 2017, Tianzhen([email protected]). (MIT License).

easy-markdown's People

Contributors

mecoepcoo avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar

easy-markdown's Issues

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.