Skip to content

Instantly share code, notes, and snippets.

@danshearmur
Forked from paulirish/data-markdown.user.js
Created November 8, 2011 22:05
Show Gist options
  • Save danshearmur/1349420 to your computer and use it in GitHub Desktop.
Save danshearmur/1349420 to your computer and use it in GitHub Desktop.
*[data-markdown] - use markdown, sometimes, in your HTML

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

// ==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;
});
<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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment