Markdown Ace Editor
URL: http://www.phillypham.com/post
By Philip Pham
Markdown Ace Editor is the textarea
editor on this site, which is used for comments, posts, and biographies. As you may be able to tell, it's heavily influenced by the editor at Mathematics Stack Exchange. While visually appearing similar, under the hood, I've replaced the Markdown converter with marked and the textarea
editor with Ace Editor.
The main reason for the Ace Editor was the Emacs keybindings. However, it provides many extra features like line numbers, code highlighting, and syntax checking in JavaScript mode.
Currently, initialization is rather complex. You need to create 3 div
s with ids, wmd-editor-postfix
, wmd-button-bar-postfix
, and wmd-preview-postfix
. You need an additional textarea
with id wmd-input-postfix
. -postfix
can be replaced with anything including an empty string. For the buttons, to work, you'll need to set the stylesheet correctly. Moreover, you need a script tag with the Ace Editor. After that, you can initialize with
var markdown = require('../../lib/markdown');
var MarkdownAceEditor = require('./markdownAceEditor');
var editor = new MarkdownAceEditor(markdown.Converter, '-postfix');
if you are using Browserify. See loadMarkdown.js for how make it work with MathJax and highlight.js and how to add a custom help function. See markdown.js for how to wrap marked
with a makeHtml
function. The converter works both server-side and client-side.
I've kept a simplified version of the hook system of the original PageDown converter and editor. The converter now just has two hooks, preConversion
and postConversion
, which passes a state
object that must have property text
. I've added an additional property mathJaxMath
. MathJax works by subsituting all the math blocks, doing the conversion, and then, restoring the math blocks. mathJaxMath
keeps track of these math blocks. The editor has an onPreviewRefresh
hook that passes around the editor itself.
See a working example here, and find the code on GitHub. Click the help button in the upper-right to see some features. The auto-preview can become annoying and slow if you're rendering a lot of math, so I added a toggle to disable it. If anyone else actually wants to use the editor, let me know, and I'll be happy to assist in refactoring the code.