The flicker when loading the page sucks. I guess displaying Markdown in case of failure is not the worst thing, but it would be nice if there was a possible way to allow getting rid of the flicker at the cost of not having a graceful fallback.
One way you could accomplish this is by supporting script tags for this, like wrapping the page in:
<script type="text/markdown">...</script>
...as an optional way to use the library. Browsers won't (shouldn't?) try to render the contents of the script tag before you get to it, so it would act like a typical SPA.
Yesss, finally a use-case for the `<noframes>`-hack! This is actually even better than the approach of OP since we're guaranteed to get a plain text representation of the text (instead of the browser parsing it as HTML).
example.html:
<script src="mdpage.js"></script><noframes>
# Header
Welcome to my simplest site
- A
- awesome
- list
mdpage.js:
document.write("<div id=main></div>");
document.addEventListener("DOMContentLoaded", function() {
var script = document.createElement('script');
script.src = "https://unpkg.com/showdown";
document.head.appendChild(script);
var noframes = document.querySelector('noframes');
script.onload = function() {
var converter = new showdown.Converter({
emoji: true,
underline: true,
})
converter.setFlavor('github')
main.innerHTML = converter.makeHtml(noframes.textContent)
};
});
Thanks @judofyr + @matt-tingen. I just updated it to use the 'noscript' opening tag. Good idea, and solved my normal html not working problem! Thanks a bunch!
One way you could accomplish this is by supporting script tags for this, like wrapping the page in:
...as an optional way to use the library. Browsers won't (shouldn't?) try to render the contents of the script tag before you get to it, so it would act like a typical SPA.