I wanted to create a webpage from Markdown with minimal effort, just through a script tag at the top of a page, and write pure Markdown & it should work right out of the box. There are plenty of alternatives, and for most situations, using something like Jekyll or server-side Markdown will give a more consistent result, but setting this up takes some time/skill.
- For people who are not "tech savy" but can write markdown. No learning hurdle, just add one line at the top of the page.
- If you don't have server access
- Minimal effort to get decent looking text on the web
- Creating semi secure (hidden by long url) pages, such as http://oscarmorrison.com/md-page/oimasdoijasdmadeupurl-0123123#stuff-to-show-you
- Create a github repo
- Add a
gh-pagesbranch - Drag and drop pages created using
md-pages
Just create a blank file whatever.html and add the script tag (current version <script src="https://cdn.rawgit.com/oscarmorrison/md-page/c72eb9e9/md-page.js"></script><noscript> ) to the top of the page, then write markdown
It uses GitHub flavour markdown https://guides.github.com/features/mastering-markdown/
It's pretty basic, all the custom code lives here https://github.com/oscarmorrison/md-page/blob/master/script.js, but mainly it just adds some style, then uses the incredible https://github.com/showdownjs/showdown to convert text from markdown to HTML and replaces that in the DOM (this is included in the md-page.js file)
Yep. I have added a couple of extra convenience features (mainly for my use case)
You can manually set a title using the <title> tag. Otherwise, it will use the first dom element (e.g., a header if you start with a header)
It modifies any link, and checks it again with the current host; if it's a different link, or not relative, it will add a target="_blank" to the link. All other links with the same hostname, or starting with /, ./, # will not open in a new window.
Not sure why GitHub doesn't have this, but it's nice ___underline___
This adds some basic styles to the header. Mainly it just changes the font family, and the minimal amount of styles for each of the markdown features
Added a bit of code to be able to deep link to ids in page headers e.g., http://oscarmorrison.com/md-page/#tables