Automatically convert markdown to html on browser refresh

Question

Paul Irish gave some amazing insight on web tooling this time during googleio 2013. So he was presenting some slides that had been parsed into html from a markdown source i.e a .md file.

However one thing that surprised me was when he edited the source markdown for the slides in the chrome dev tools sources panel and then hit refresh, the .md automatically compiled again into the html to be output on the browser. Now I understand that the changes he made to the markdown file in the chrome dev tools were made also on his local file saved on the computer, but how did the markdown file automatically get converted into the html file upon save and refreshing the browser?

I am a complete beginner with markdown and I would really like to have this functionality. Any help is deeply appreciated

Answer 1

The whole purpose of markdown is that it is both human readable and machine readable. It is designed to be converted to HTML.

Depending on the language you are using, there are markdown parsers that create HTML for you.

For example, for PHP.

So, as an example, to have your server show the contents of say, homepage.md, your index.php file could have something like this:

$filename = $_GET['file'];
$content  = markdown( file_get_contents( "path_to_markdown/{$filename}.md" ) );
print $content;

And, to see it in your browser you would go to example.com/?file=homepage

Answer 2

I will do my best to answer this.

HTML Mark down is a shorthand syntax that can be interpreted by a web browser to format or render the page in html.

this is taken from Stack Overflow. eg

The syntax is based on the way email programs usually do quotations. You don't need to hard-wrap the paragraphs in your blockquotes, but it looks much nicer if you do. Depends how lazy you feel.

So, like converting from a file in notepad ++ from text to html. The file will be formatted using the basic rules of that particular syntax.

It also must be remembered, that programs are not mind readers. If the mark down code is not valid, neither will the corresponding html code. Just as saving a text file that is "supposed" to be formatted in html. It won't save as a working html file if the syntax is incorrect.

Also, markdown is not a total replacement for real code. It cannot cover the breadth and depth of the true coding language. I could liken it to pseudocode, but that is more of a lateral example.

In answer to your latest comment, If a second file is created from a first file (and the format is altered) -( in this case from mark down to html) - If the first file is then edited, without overwriting the changes into the second file, it cannot expect to be altered.

This is a good link a fellow SO gave me:

https://stackoverflow.com/editing-help

Please feel free to edit, if I have made an error.

Answer 3

I haven't tried this extension for Chrome but it seems to automatically render markdown (.md) files in Chrome.

• https://chrome.google.com/webstore/detail/markdown-preview/jmchmkecamhbiokiopfpnfgbidieafmd?hl=en

In Firefox, I use the following extension for the same functionality.

• https://addons.mozilla.org/en-US/firefox/addon/markdown-viewer/

No need for a separate .html file, just save the text file with .md extension and open it in the browser.

Hope that helps.