3

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

Annihilator8080
  • 2,019
  • 3
  • 21
  • 20
  • Exactly I am interested in knowing HOW does he generate the html from the markdown source on save without having to compile it or typing anything from the terminal. He just saves the file and refreshes the browser. Are there some javascript libraries that can do this? I hope I made myself clear @yvtty, I am sorry if the question seemed ambiguous. – Annihilator8080 May 25 '13 at 12:01
  • Did you ever try asking Paul Irish ? Your question obviously is really old, so he might not even remember today, but his solution / tool might be much simpler than what it looked like... – ssc Mar 18 '19 at 17:10

3 Answers3

3

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

DannyB
  • 12,810
  • 5
  • 55
  • 65
  • Thanks for your response @DannyB , I know that markdown is designed to be parsed into HTML. But I am more interested in how is he achieving this automatically in this case. He just modifies the markdown source in chrome dev tools and saves it and then on refreshing the browser, the changes are reflected in the html code. How's that happening? – Annihilator8080 May 25 '13 at 12:03
  • Well, I was not there so cannot comment on that. But what are you looking for, other than the ability to have your server read markdown file, and display HTML as a result? – DannyB May 25 '13 at 12:07
  • I just want that whenever my markdown file is modified, the corresponding HTML output should also be modified **automatically** without me having to compile the .md file again to generate the required output on every modification. I do not really care if this happens at the client or server side. I just want the conversion to be automatic whenever the .md file is modified. – Annihilator8080 May 25 '13 at 12:13
  • 1
    Why do you need to compile hard versions of the markdown? Read it on the fly. If you do want to take an action whenever a file changes in the OS, then this is a different question and depends on your operating system. You would put a process that watches for file changes and invoke that mini-compilation (which would do the same thing - just take that md, put it through the parser and save the output). – DannyB May 25 '13 at 12:16
  • Thanks a lot for your edited solution @DannyB! Pardon my choice of words, I agree with you that it's much more effecient to read the .md file on the file. – Annihilator8080 May 25 '13 at 12:26
1

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.

Community
  • 1
  • 1
  • Thanks a lot for your help @yvytty but I understand what markdown is. Imagine you have a markdown file, you compile it using markdown or someother compiler out there to generate the corresponding html which you include in your webpage which is hosted locally(let's assume). If you edit some of the code in the markdown file, those changes won't be visible automatically in the browser i suppose because you haven't really compiled the new .md file into the html file. So you will have to do this over and over again after any modification to your source markdown. I want to achieve this automatically – Annihilator8080 May 25 '13 at 12:20
  • 1
    you are absolutely right in what you say. If there are some errors in the markdown, i won't get the desired html. I am however more interested in reading the markdown files and parsing them on the fly. – Annihilator8080 May 25 '13 at 12:32
1

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

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

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

Hope that helps.

chishaku
  • 4,577
  • 3
  • 25
  • 33