Skip to content

Instantly share code, notes, and snippets.

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 <> and others
// @include *
// ==/UserScript==
// Contribs:
// Thaddee Tyl <>
// Digitalsabre <>
// Félix Saparelli <>
function X0() {
if (!window.Showdown) {
setTimeout(X0, 200);
} else {
[] 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 = "";
el = null;
el = document.createElement("script");
el.type = "application/javascript";
el.innerHTML = "(" + X0.toString() + ")();";
<div class="slide">
<section class="hbox" data-markdown>
## Who Am I?
* Lead developer of [Modernizr](//
* Project lead of [HTML5 Boilerplate](//
* I curate that [page of polyfills](//
* Member of jQuery Team
* Developer Relations on Google Chrome team

This comment has been minimized.

Copy link

@Digitalsabre Digitalsabre commented Nov 9, 2011

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


This comment has been minimized.

Copy link

@mathiasbynens mathiasbynens commented Nov 9, 2011

FWIW, here’s a generic unsafeWindow polyfill:

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