*[data-markdown] - use markdown, sometimes, in your HTML

readme.md

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

• It automatically adds github flavored markdown's if it's not already in.

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)

data-markdown.user.js

// ==UserScript==
// @name Use Markdown, sometimes, in your HTML.
// @author Paul Irish <http://paulirish.com/>, bits by Thaddee Tyl <http://espadrine.github.com/>
// @link http://git.io/data-markdown
// @include *
// ==/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>');
  
  (function doDown() {
    if (!window.Showdown) { setTimeout(doDown, 500); return; }
    // 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;
  })();

});

example.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>

@espadrine You may need to add // @include * to the header, too.

@Digitalsabre done!

@espadrine Is it working?

@Digitalsabre See for yourself: http://jsbin.com/orikot
(tl;dr: no...)

@espadrine You're right. That bug is gone. Now it's left with no functionality at all. xD I've done something similar... And it still doesn't do jack diddly in Firefox.

I haven't tried it yet, but usually when you add an external script file (document.write in this case) you have to wait for it to download and be parsed.

Normally I do (pseudocode):

document.write('showdown.js')

function MDtoHTML() { /* Paul's four lines here... */ }

(function checkShowdown() {
  if (!window.Showdown) { setTimeout(checkShowdown, 200); }
  else { MDtoHTML(); }
})();

So basically it just keeps checking for the script to have been loaded before running.

@CPATIK That's what I am doing here, am I not?

@espadrine Um, yeah... I swear I read it before commenting ;)

@CPATIK @espadrine But the problem is that it never parses. So basically, that recursive function recurses indefinitely.