Skip to content

Instantly share code, notes, and snippets.

@fuzzyfox
Forked from paulirish/data-markdown.user.js
Created June 23, 2013 00:45
Show Gist options
  • Save fuzzyfox/5843279 to your computer and use it in GitHub Desktop.
Save fuzzyfox/5843279 to your computer and use it in GitHub Desktop.
JavaScript: [data-markdown]

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