My JavaScript book is out! Don't miss the opportunity to upgrade your beginner or average dev skills.

Thursday, April 11, 2013

Writing Markdown In Blogger

Update

Added tests and support for nested blocks and lists plus youtube video and gists instead of just images.
Here, have a look at tinydown, compatible with both node and web.
Something I've been thinking about since last year JS1K contest ... what if I could just write mark down on internet and let crawlers and bots do the math while I just write all I need to?

tinydown and CloudReflection

This is basically all it took to create a markdown blogger enabled service as CloudReflection is.
That's correct, if I edit that post the text I gonna deal with is this one:
Isn't a tiny markdown parser lovely ?
=====================================

A markdown is an _easy to read and quite easy to parse_ syntax, ideal for documents
that could be understood by human, and easily converted by machines.

You are reading markdown now!
-----------------------------
This blogpost is generated on the fly via the proposed script.  
Here the code **example** used for this page:

    this.onload = function () {
      document.body.innerHTML = tinydown(
        document.body.textContent
      );
    };

You can find a very nice guide about [how to markdown here](http://daringfireball.net/projects/markdown/syntax "markdown style guide").

### What is supported ?
  * headers with = or - notation
  * headers with # notation
  * blockquotes and nested blockquotes
  * ordered and unordered lists
  * images with optional alt ant title
  * inline links with arbitrary title
  * <em> via single asterisks/underscore, or double for <strong> tag
  * inline `code` via `` ` `` backtick

### What is not supported ? ###
  * paragraphs are missings
  * nested lists and nested markdown inside lists
  * links with references and/or id
  * raw html is not recognized, validated, parsed

> and just to demonstrate it works
> > this is a nested blockquote example :-)
> have a lovely day

- - -
© WebReflection
This is basically the same text I've used in the original demo page, except links and images are now finalyl supported.
That is going to look exactly the same way you look at it in the following iframe:

What Else On Blogger Side

So I had to include a couple of scripts:
  1. <script src='http://webreflection.github.io/tinydown/test/build/tinydown.js'/>
  2. <script src='http://webreflection.github.io/tinydown/test/build/onstuff.js'/>
While the first one is the actual tinydown parser, the second one is just some logic to parse the right content at the right time.
If you want to play with npm install tinydown parser consider that's just a function and is not as complet eas any other fully compatible markdown parsers ... it just gives me basically everything I need to write my technical posts on blogger ... can I ask anything more? I don't think so!
Bear in mind you should not use same scripts with github external repository file in your production code/blog ... just follow these direction, and stay tuned with the tiny down repository.

7 comments:

PeterStJ said...

Uhm.. sorry to ruin it for you (or maybe not) but this all works only when people actually go to your blogger site. You are actually screwing everyone with RSS readers.

So yeah, its not such a big win I'd say..

Benweet said...

A way to post markdown document on Blogger is to use StackEdit. It's a web-based Markdown editor that can publish documents on different web sites.

Andrea Giammarchi said...

does that support editing too?

can you customize tags like using gists and youtube video the way I do?

I strongly doubt the gist part ...

Benweet said...

With StackEdit, you can create a new Blogger's post or edit an existing one by providing a post ID. No, gists and youtube links are not (yet) available. But StackEdit supports Markdown Extra which means you can put fenced code blocks and perform syntax highlighting in the output html using Prettify. This last feature has to be enabled in the settings.

Andrea Giammarchi said...

thanks but those extras are old and pointless, IMHO

@handlers #events and gists are a blocking must have feature.

I also want to be able to edit on the fly and reading PHP I guess that's not the case?

Benweet said...

I don't know about @handlers, #events or PHP. The best thing to do is to try it I suppose.

Unknown said...

We recently launched a new product : Logdown ,
This missing blogging platform for Hackers


Maybe it can solve your problems