Renders a markdown file as HTML and displays it. JavaScript loads a markdown file, parses it and displays it as HTML inside the index.html file. The index.html file includes 2 Javascript files:
-
The first --
js/stmd.js
-- loads the CommonMark library which can convert CommonMark (standardized markdown) to HTML. -
The second --
render.js
-- loads a specified markdown file (default isREADME.md
) via XHR then parses it and renders it with the CommonMark JS library.
I wanted a way to display markdown files as HTML on any website -- but in particular, I wanted to be able to use Github pages to render the README.md file for a repo. Mainly so I could use a repo as a way to create installation guides and other how-to's in a single markdown file.
I also wanted a way that was backend agnostic so it could all be handled via JavaScript without any server requirements.
I know Github has a markdown API but I wanted to try out the CommonMark library
- Throw the
index.html
file into the same folder as theREADME.md
(or other markdown file) - Add the
js
folder (or just place therender.js
andstmd.js
) in the same folder as the index.html. You may need to adjust the paths if you move the js files or the markdown file is in a different directory than the index.html file. - Open the index.html file. (Uses XHR so you have to view through a web server).
- Add more CSS to style this sucker better