Skip to content

Instantly share code, notes, and snippets.

@Ser-Gen

Ser-Gen/data-markdown.user.js

Forked from paulirish/data-markdown.user.js
Last active August 29, 2015 14:07
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save Ser-Gen/3a98dfb3328e23c2dd85 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save Ser-Gen/3a98dfb3328e23c2dd85 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
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. Drop in github flavored markdown's port of showdown.js into the page (after the content, before other scripts).
  2. Add the following script after that.
  3. 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)

Raw
data-markdown.js
[].forEach.call( 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;
});
Raw
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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment