Search code examples
htmlautomationmarkdowngoogleio

Automatically convert markdown to html on browser refresh


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


Solution

  • 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