\_@yarmand coding tales_/

Old school programmer adventures in a world of stratuper.

Embed Markdown Into Your HTML

| Comments

Sometime when you write documentation or HTML5 presentation (using slide.js for instance), you want to write a part of the document an easier way.

What about embeding directly some markdown code into you HTML and convert it on the flight on the browser when displaying ?

What I’d like to write

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
<html>
  <body>
      <article>
         <script type="text/markdown">
The nice title here
=
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus diam sem.

then a little list
. item 1
. item2
        </script>
      </article>
  </body>
</html>

The on the flight conversion

showdown is the javascript markdown converter I will use.

At the end of my HTML file and before presentation runtime do its magick, I do the conversion on all markdown I can find in the file :

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
  <script src="http://www.showdown.im/showdown/example/showdown.js"> </script>
  <script>
    $(function() {
      // replace markdown text 
      $('script[type="text/markdown"]').after(function(index){
        converter = new Showdown.converter();
        return converter.makeHtml(this.textContent);
      });
    });
 </script>

Comments