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

readme.markdown

*[data-markdown] userscript

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. Install this userscript (click the 'raw' link for the user.js file below).

• It automatically adds github flavored markdown's to every page.

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

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

data-markdown.user.js

// ==UserScript==
// @name           *[data-markdown]
// @version        2.0
// @description    Use Markdown, sometimes, in your HTML.
// @author         Paul Irish <http://paulirish.com/> and others
// @include        *
// ==/UserScript==

// Contribs:
// Thaddee Tyl <http://espadrine.github.com/>
// Digitalsabre <https://github.com/Digitalsabre>
// Félix Saparelli <http://passcod.net/>
// Mathias Bynens <http://mathiasbynens.be/>

window.unsafeWindow || (
	unsafeWindow = (function() {
		var el = document.createElement('p');
		el.setAttribute('onclick', 'return window;');
		return el.onclick();
	}())
);

unsafeWindow.X0 = function () {
  if (!window.Showdown) {
    setTimeout(unsafeWindow.X0, 200);
  } else {
    [].forEach.call( document.querySelectorAll('[data-markdown]'), function(elem){
      // 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;
    });
  }
}

unsafeWindow.el = document.createElement("script");
el.type = "application/javascript";
el.src = "https://raw.github.com/github/github-flavored-markdown/gh-pages/scripts/showdown.js";
document.body.appendChild(el);

el.innerHTML = "(" + unsafeWindow.X0.toString() + ")();";
document.body.appendChild(el);

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>