Skip to content

Instantly share code, notes, and snippets.

@nfreear

nfreear/dashboard.markdown.template.html

Created March 15, 2018 15:53
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save nfreear/f0ae7d8108853fde10b98e68530651a6 to your computer and use it in GitHub Desktop.
Save nfreear/f0ae7d8108853fde10b98e68530651a6 to your computer and use it in GitHub Desktop.
Download ZIP
A template for a personal dashboard, built using Markdown (CommonMark)
Raw
dashboard.markdown.template.html
<!doctype html><html lang="en"> <title> *Nick's dashboard </title>
<base target="new" title="Opens in a new window" />
<div id="html-destination"></div>
<pre id="markdown-source" data-type="text/markdown">
# Nick's Dashboard #
* [Tool 1](https://example.org/tool1.html)
* [Web site 2](https://example.org/site2.html)
* [Tool 3](https://example.org/tool3.html)
* ...?
### (_All links open in a new window_)
---
#### © Nick Freear, 15-March-2018.
Uses:
* [CommonMark Spec.](http://spec.commonmark.org/0.28/#list-items)
* [markdown-it](https://npmjs.com/package/markdown-it#simple)
</pre>
<style>
body { font: 1em sans-serif; margin: 1em auto; max-width: 44em; color: #333; }
pre { border: 1px solid #ddd; color: #666; font-size: .88em; margin-top: 5em; padding: .7em; }
h1, h3, h4 { font-weight: normal; }
h3, h4, ul:nth-of-type( 2 ) { font-size: small; line-height: 1.3em; }
hr { margin-top: 2em; border: 1px solid #ccc; }
#html-destination, #md-dest { line-height: 1.5em; }
</style>
<script src="https://unpkg.com/markdown-it@^8.4/dist/markdown-it.min.js"></script>
<script>
(function (W, D) {
var markdownParser = W.markdownit();
var source = D.querySelector('#markdown-source');
var destination = D.querySelector('#html-destination');
console.warn('Markdown:', markdownParser, source, destination);
var htmlOutput = markdownParser.render(source.innerText);
destination.innerHTML = htmlOutput;
})(window, document);
</script>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment