Markdown
Markdown is the PHP of markup languages.
Asciidoc is a more comprehensive alternative.
Markdown was initially meant for writing simple html webpages
as intended by its author.
It is now about to be standardized as an IETF standard.
That author is nowhere to be seen in the process, probably
because he is embarrassed by Markdown.
Worse is better precisely because the current Software Industry
thrives on non-engineering. It’s a market problem, where the
market is satisfied with the shiny.
Parsing Markdown
Regex
Old Markdown
Peg
MultiMarkdown
If you have to deal with markdown, use this.
Markdown Extensions
- typically pre/post processors
Markdown Conversion
Good
- html
- epub
Painful
- latex
Problems
nesting
This alone is enough to ignore Markdown.
whitespace
citations
typography
math
tables
code
Markdown Editors
One of myths used to keep Markdown alive is saying it’s
easy to build an editor for it.
IMHO that’s false.
Most editors are geared towards plain markdown, which is
useless.
Medium inspired editors
- medium-editor
- zenpen
- sofish
IDE-ish editors
- ace
- codemirror
Problems with Imeplementing a Markdown Editor
textarea
Too bland
HTML5 <div contenteditable=“true”>
IE, FF, Chrome all implement this differently
HTML5 spec for this is still alpha stage
Problems
Let’s suppose the user types the following text,
I loved to look upon him,
The Hunter near the Way.
So strong his arm and long his bow
And so bashful of the Day.
His courage never failed him
For he held his mace so high
This is stored in the div as
I loved to look upon him,
<p>The Hunter near the Way.</p>
<p>So strong his arm and long his bow</p>
<p><br></p>
<p>And so bashful of the Day.</p>
<p>His courage never failed him</p>
<p>or he held his mace so high</p>
The newlines are not preserved.
Notice the odd first line.
Let’s suppose the user copy pastes plain text, from a text editor
I loved to look upon him,
<p>The Hunter near the Way.</p>
<p>So strong his arm and long his bow</p>
<p><br></p>
<p>And so bashful of the Day.</p>
<p>His courage never failed him</p>
<p>or he held his mace so high</p>
<p>And glared at the Bull in the River</p>
<p>And ruled the whole breadth of the sky.</p>
<p>As a girl, young and silly,</p>
<p>I oft dreamed of being the Maid.</p>
Let’s suppose the user copy pastes from another html page
<p>The Hunter near the Way.</p>
<p>So strong his arm and long his bow</p>
<p><br></p>
<p>And so bashful of the Day.</p>
<p>His courage never failed him</p>
<p>or he held his mace so high</p>
<span>And glared at the Bull in the River</span>
<span>And ruled the whole breadth of the sky.</span>
<span>As a girl, young and silly,</span>
<span>I oft dreamed of being the Maid.</span>
You can even see table instead of span or the whole thing in a pre block.
Solution – Cursor API
There is no getCursorPosition(div) which means,
more hacks, from stackoverflow !
The hacks relate to Range and Selection DOM API
The idea of cursor is absent in HTML5 specification.
Windows 3.0 had an API for that probably.
How do others do it ?
All medium based editors suffer from this, but they are view-only
they don’t care about content.
How ace, codemirror do it
( Guesswork )
- Have two elements, a textarea and a editor#div
- Use <textarea> as a temporary buffer
- Direct all keyboard events to textarea
- Grab data from textarea and data structure
- render data structure and cursor position to editor#div
For copy paste,
- Redirect to textarea
- Copy to data structure
- Set cursor
For mouse events,
- Listen on editor#area
- Get co-ordinates
- Do characterWidth/lineHeight simulation on the text data structure
- Set mouse position
This means we will have have control over every character being rendered.
- setCursorPosition
- getCurrentCursorPositon
- insertLineBreakAtCursorPosition
- insertTextAtCursorPosition
- insertHTMLAtCursorPosition
- pastePlainTextFromClipboardAtCursor
How do I Publish ?
Just stick to Asciidoc / Latex.
What editor to use ?
Desktop editors.