Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
*[data-markdown] - use markdown, sometimes, in your HTML

*[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).
  1. 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)

// ==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/>
function X0() {
if (!window.Showdown) {
setTimeout(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;
});
}
}
var el;
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 = null;
el = document.createElement("script");
el.type = "application/javascript";
el.innerHTML = "(" + X0.toString() + ")();";
document.body.appendChild(el);
<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>
@Digitalsabre

This comment has been minimized.

Copy link

@Digitalsabre Digitalsabre commented Nov 9, 2011

@passcod Beautiful! Now how do I trash my forks?

@mathiasbynens

This comment has been minimized.

Copy link

@mathiasbynens mathiasbynens commented Nov 9, 2011

FWIW, here’s a generic unsafeWindow polyfill: https://gist.github.com/1143845

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment