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 divs 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.