A Markdown live editor in JS !

JS> Node > How to make a live WYSIWYG editor with Mardown syntax in javascript ?

A Markdown live editor in JS !

How to make a live WYSIWYG editor with Mardown syntax in javascript ?

Why markdown ?

For this blog, I've build a post admin based on Markdown syntax used for github readme.md files.

I found this writing method really simple and fast for creating posts, and as it's a part of my blog engine, I'll share you one of my secret :)

Presentation

You'll see a demo below : interface is a vertical splited view with on the left the editing zone and preview render on the right.

Auto markdown : All your markdown wrote into the editing zone is immediately converted into html as you wrote.

Code highlighter : Markdown also highlight your code, just add css for a better render.

Scroll spy : An interesting feature which allow to follow the scrolling height for each zone. As this, you always see what renders your post.

Markdown addon : I've hacked markdown library to effects on embed tags client side and server side (with nodejs) for SEO.

Demo

If you want to use it : don't forget to include assets linked in resources tab !

Requirements

Javascript

// -> Get doms
var textarea = $("#input-content"),
    preview = $('#input-preview');

// -> Bind textarea edit
var textarea_delay = null; 
textarea.off('keyup').live('keyup', function(e) {
    var el = $(this) ;
    if ( textarea_delay ) clearTimeout(textarea_delay) ;
    textarea_delay = setTimeout(function() {
        preview.html(marked(el.val()));
        preview.find('.oembed').oembed();
        preview.find('pre code').each(function(i, e) {hljs.highlightBlock(e)});
    }, 200) ;
}) ;    

// -> Support tab in textarea and trigger a keyup to init preview
textarea.tabby().trigger('keyup') ;  

// -> Follow scrolling on textarea
var scrollArea = null, els = textarea.add(preview) ;
els.on('scroll', function(e) {

    // -> Get scrolling area ID
    var scrollId = this.getAttribute('id') ;

    // -> Get other DOM & ID
    var other = (function() {
        var its = null ;
        els.each(function() {
            if ( this.getAttribute('id') != scrollId ) its = this;
        })
        return its;
    })(); 
    var otherId = other.getAttribute('id') ;

    // -> Block scroll change on current scrolling zone
    if ( scrollArea == otherId ) return false;

    // -> Scroll other view
    scrollArea = scrollId ;
    other.scrollTop =  this.scrollTop * other.scrollHeight / this.scrollHeight ;

    // -> Disable blocking after 200ms of no scroll
    setTimeout(function() {scrollArea=null}, 200) ;

}) ;

Markdown syntax

A title :

# Main title
<h1>Main title</h1>

## Secondary title
<h2>Secondary title</h2>

### ... 
<h3>Other title</h3><h4>Other title</h4>...

A link :

(http://linkurl.com/)
[Link text](http://linkurl.com/)
[Link text](http://linkurl.com/ "Title of the link")

Effects on text :

*Text in Italic*
**Text in Bold**

Lists :

 - First element of the list
 - Second element...

Embed a youtube video or any other medias :

[embed http://www.youtube.com/watch?v=nWVrUcmYa6M]
Par Guillaume DE LA RUE, 24 Sep 2012 22:03