markdown

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
pdf

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.