This README is out of date
Markdown Editor, developed with pure HTML5. Support real time preview and code hightlighting. This repo is inspired by marked, and is actually use it to render the markdown codes to html.
The reason for developing this repo is that I find it painful when rendering the md code to html elements with marked while keeping their coresponding
relationship, i.e. which markdown code block is rendered into which html element. This repo is built upon marked and provides a ready-to-use
editor which is able to show real time preview. hightlight.js is also put into use for code rendering.
MDEditor now only supports limited syntax:
Headingshould only starts with several hash symbols#tableshould be wrapped with|in every linecode blockshould be wrapped with```horizontal splittershould use 3 or more-list**there should be 2spaces between.and content, eg.1.[space][space]something
It is a bug that list syntax requires 2 spaces, I will fix it as soon as I find out what the hell is going wrong.
- MDEditor can easily align the markdown code block and its corresponding html representation, by double click the line of code or representing html element (default)
- Use capital space
(just press
spacekey after pressingCapskey) to simulate pressingTabkey. helpful when writing codes.
More under go...
| dependency | version |
|---|---|
| jquery | 3.2.1 |
| marked | 0.3.4 |
| highlight.js | 9.12.0 |
style.css is customized style for html
tomorrow-night-eighties.css is one of the themes for hightlight.js
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="lib/highlightjs/styles/tomorrow-night-eighties.css">
<script src="lib/jquery/dist/jquery.js"></script>
<script src="lib/marked/marked.min.js"></script>
<script src="lib/highlightjs/highlight.pack.js"></script>You can use any id for your element, just pass them to Editor and Previewer when initialising.
** Please ensure to set
contenteditable='true'for your editor element**
<body>
<div id="container">
<div id="editor" contenteditable="true">
</div>
<div id="previewer">
</div>
</div>
<script src="MDEditor.js"></script>
<script>
let editor = new Editor('editor');
let previewer = new Previewer('previewer');
editor.setPreviewer(previewer);
</script>
</body>
</html>