*[data-markdown] - use markdown, sometimes, in your HTML

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.

[].forEach.call( document.querySelectorAll('[data-markdown]'), function(elem){

  if (!window.Showdown)
    document.write('<script src="https://raw.github.com/github/' + 
                   'github-flavored-markdown/gh-pages/scripts/showdown.js">\x3C/script>');

  // strip leading whitespace so it isn't evaluated as code
  var md      = elem.textContent.replace(/(^\s+)|(\n\s+)/g,'\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>