*[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 PageDown's Markdown Converter to every page.

2. Add data-markdown attributes to any tags where you're gonna use markdown within, like so:

<div class="slide">
    <section class="hbox" data-markdown>
## This is a level two header (h2)

* This is a list item (li) inside an unordered list (ul)
* This is a list item inside the same unordered list.
It contains an anchor tag (a) here --&gt; [Some Link](http://www.example.com/)
* This is another list item inside the same unordered list.
    1. This list item is inside another list, this time ordered (ol), nested
	inside the previous list item, nested inside the previous unordered list.

> Here's a blockquote with some **“stylistically offset” text.**
  </section>
</div>

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

Editorial: PageDown is a more reliable Markdown parser outside of Github than Github Flavored Markdown.

Revision 2: Changed PageDown URL to https to fix "insecure content" notifications in secure pages. Hope it works...

data-markdown.user.js

// ==UserScript==
// @name           *[data-markdown]
// @version        2.0.2
// @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/>
// The guys at StackExchange

function X0() {
  if (!window.Markdown) {
    setTimeout(X0, 200);
  } else {
    [].forEach.call( document.querySelectorAll('[data-markdown]'), function(elem){
      // strip leading whitespace so it isn't evaluated as code
      html = (new Markdown.Converter()).makeHtml(elem.textContent);

      // here, have sum HTML
      elem.innerHTML = html;
    });
  }
}

var el;

el = document.createElement("script");
el.type = "application/javascript";
el.src = "https://pagedown.googlecode.com/hg/Markdown.Converter.js";
document.body.appendChild(el);

el = null;

el = document.createElement("script");
el.type = "application/javascript";
el.innerHTML = "(" + X0.toString() + ")();";
document.body.appendChild(el);

@passcod, @espadrine, forked and updated the code with a more reliable Markdown parser. Now, when I do this:

* List item 1
* List item 2
* List item 3

>Blockquote

it doesn't do this:

• List item 1

• List item 2

• List item 3

  Blockquote