JavaScript: [data-markdown]

readme.md

*[data-markdown]

I just put some markdown in ur HTML

In prototypes and HTML-based slide decks, it's pleasant to write in markdown sometimes and avoid all those angle brackets.

So the idea is you're operating in an HTML environment but a few shortcuts would help so use markdown here and there.

To use:

1. Add the following script into your HTML after the content, before other scripts

• It automatically adds github flavored markdown's if it's not already in.

1. Add data-markdown attributes to any tags where you're gonna use markdown within. (see example)

Userscript or script-script

This script works fine in your page and can also be used as a userscript. Just click the raw link right below to install.

(As this requires some clientside js and can trigger FOUC, this is not for production use)

data-markdown.user.js

// ==UserScript==
// @name Use Markdown, sometimes, in your HTML.
// @author Paul Irish <http://paulirish.com/>
// @link http://git.io/data-markdown
// @match *
// ==/UserScript==


// If you're not using this as a userscript just delete from this line up. It's cool, homey.

(function boom(){
  
  if (!window.Showdown){
    var scr = document.createElement('script');
    scr.onload = boom;
    scr.src = 'https://raw.github.com/github/github-flavored-markdown/gh-pages/scripts/showdown.js';
    document.body.appendChild(scr);
    return;
  }

  [].forEach.call( document.querySelectorAll('[data-markdown]'), function  fn(elem){
      
    // strip leading whitespace so it isn't evaluated as code
    var text      = elem.innerHTML.replace(/\n\s*\n/g,'\n'),
        // set indentation level so your markdown can be indented within your HTML
        leadingws = text.match(/^\n?(\s*)/)[1].length,
        regex     = new RegExp('\\n?\\s{' + leadingws + '}','g'),
        md        = text.replace(regex,'\n'),
        html      = (new Showdown.converter()).makeHtml(md);

    // here, have sum HTML
    elem.innerHTML = html;

  });

}());

example.html

<div class="slide">
 <section class="hbox" data-markdown>
  ## Who Am I?

  * Lead developer of [Modernizr](//modernizr.com)
  * Project lead of [HTML5 Boilerplate](//h5bp.com)
  * I curate that [page of polyfills](//bit.ly/polyfills)
  * Member of jQuery Team
  * Developer Relations on Google Chrome team
  </section>
</div>



<script src="data-markdown.user.js"></script>