13ac58b237 | 9 years ago | |
---|---|---|
source files | 9 years ago | |
LICENSE | 9 years ago | |
README.md | 9 years ago | |
markdownify.min.css | 9 years ago | |
markdownify.min.js | 9 years ago |
README.md
Markdownify - Markdown Editor
A drop-in JavaScript textarea replacement for writing beautiful and understandable markdown. The WYSIWYG-esque editor allows you to modify the markdown with toolbar buttons and shortcuts. It has been designed to be easy to use by users who are less technical.
Quickstart
<link rel="stylesheet" href="/PATH/TO/markdownify.min.css">
<script src="/PATH/TO/markdownify.min.js"></script>
And then load Markdownify on the first textarea on a page
var markdownify = new Markdownify();
markdownify.render();
Use a specific textarea
Pure JavaScript method
var markdownify = new Markdownify(document.getElementById("MyID"));
markdownify.render();
jQuery method
var markdownify = new Markdownify($("#MyID")[0]);
markdownify.render();
Get the content
markdownify.codemirror.getValue();
Configuration
- element: The DOM element for the textarea to use. Defaults to the first textarea on the page.
- status: If set false, hide the statusbar. Defaults to true.
- tools: If set false, hide the toolbar. Defaults to true.
new Markdownify({
element: document.getElementById("MyID"),
status: false,
tools: false,
});
How it works
Markdownify is an improvement of lepture's Editor project and includes a great many number of changes. It is bundled with CodeMirror and Font Awesome.
CodeMirror is the backbone of the project and parses much of the markdown syntax as it's being written. This allows us to add styles to the markdown that's being written. Additionally, a toolbar and statusbar has been added to the top and bottom, respectively. Previews are rendered by Marked.
What's changed?
As mentioned earlier, Markdownify is an improvement of lepture's Editor project. So you might be wondering, what's changed? Quite a bit actually. Here's some notable changes:
- Upgraded from CodeMirror 3 to CodeMirror 5
- Many changes to the style, appearance, and userfriendliness
- Interface more closely resembles Bootstrap
- Now mobile friendly
- The text editor now automatically grows as you type more
- Fixed a large amount of bugs
- Switched to Font Awesome icons
- Improved preview rendering in many ways
- Improved as-you-type appearance of headers and code blocks
- Simplified the toolbar