Automatically convert markdown to html on browser refresh - html

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

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

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.

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.

Related

Can we use HTML features in TinyTex (R Markdown)

everyone!
I'm VERY new to Rmarkdown, so this may be a silly question. I was able to use HTML tags when kniting html file. However, I'm wondering If I could also use them when kniting a pdf file? I'm a bit used to HTML, so it would really help me if I could keep on with the HTML tags for my pdf reports as well. This post helped me a bit, but not quite.
For Example, when kniting a html file it works just fine, I'd like to use the same labels with TinyTex...is it possible?
Thanks in advance
Maybe these packages and this IF may be useful, but, I still cannot use the proper html labels..
You can not use HTML in the Markdown document and then render it directly to PDF.
However you could render the document to html and later covert it to pdf manually from browser print method or automatically e.g. with ‘pagedown::chrome_print’ package.
When the rmarkdown output is a pdf_output then a markdown is translated to latex and then rendered to pdf. There is no process to translate a part of the text from html to what … sth understandable and similar in latex.

Python jupyter notebook after converting to html , numbering of markdown disappeared

I used Table of Contents(2) of Nbextensions to create Table of Contents. And the titles were created using markdown.
Every thing is working fine. I mean , it looks pretty good in notebook modus.
But after I had converted the ipynb file to html file , then the number of each title dispeared . I used menu: File->Download as -> HTML to do this.
I tried to use another option "File->Download as ->HTML with toc" to convert to html. Although it generated desired numbering , this is still not what I want, because it will generate not only an html file but also multiple images file if there are some plots in the notebook.
Does anyone have a good idea?
I just need a SINGLE html file with everything embedded .
The numbering of the Nbextensions will be present if you'll download the notebook to PDF (after installing the relevant packages).
Regarding the HTML version, I didn't find an answer yet and will be happy for help either.
Notebook uses different formatting for the content. Exporting option only provide you to save your code. So, that you can send it to others.
Better save the data in the python notebook form itself to maintain formatting. Even exporting you to PDF won't provide you true formatting as the notebook does. But it will be better than HTML.
But if you still want the HTML format, you can format it manually as a webpage. May the formatting get improved in next version of nbconvert.

How to convert HTML to PDF with Bookmark

I am trying to save a customized html file as a pdf.. normally I would press ctrl-P at my browser (chrome) and print as pdf..
But when I open the pdf file, there is no bookmark tab on the left side of the pdf reader (adobe)..
What I want is to save an html file as a pdf and the bookmark should appear in the left side of the pdf reader:
I created the html file.. I added links to some parts of it using id and hyperlink:
part1
...some codes here...
<div id="part1">
and it works, but I don't know how to create a bookmark in pdf from an html... normally ms word or libre office can convert their documents to pdf with a bookmark..
But how can I made a pdf with a bookmark using HTML?
Okay, so I ran into this problem and really wanted there to be a solution here that worked. When there wasn't, I figured I should add what I found so that hopefully the next developer can benefit from it.
First up: HTML conversion to PDF isn't really up to the HTML itself - it's up to whatever the conversion engine decides to do with your HTML. So for instance, if your approach is: Open it in IE/Chrome/Firefox/whatever > File > Print > Microsoft Print to PDF - well, your conversion engine is 'Microsoft Print to PDF'. Doesn't matter what browser you were using at that point - all its doing is creating a print stream to send to a printer. So if Microsoft Print to PDF isn't going to make bookmarks for you (which it doesn't) then it doesn't matter which web browser you use to open the PDF.
And this is the critical problem with any Ctrl-P / Print avenues. The web browser is ultimately creating a print stream, which the conversion library simply streams into a PDF. And all the web browsers I looked at do not have native support built in to convert to PDF (why would they? 99% of the use cases are covered with a 'Print to PDF' functionality.) And the print drivers I tried (Microsoft Print to PDF, Adobe PDF Print) didn't manage to suss out bookmarks from the raw print stream. Which makes sense.
So, at this point, what you're looking for is a standalone PDF Conversion engine - something that can actively open the HTML file and convert from there, instead of going through a web browser. Are there PDF Conversion engines that do this and add Header-Tag based bookmarks? Possibly. The ones we had at our disposal (ABCPdf, Neevia) weren't able to do it, but it's certainly possible there's one out there.
So what now?
There are a few different options I explored.
Option #1: Separate Files, Combined With Adobe
Adobe Acrobat (non-viewer version), when it's the conversion engine, will automatically add bookmarks for each file it converts. So you can submit the HTML contents, not as a single HTML file, but as HTML files for each section you want a bookmark over.
The good news is that if a section has a hyperlink that points to another document its merging, it's smart enough to have that hyperlink point to the spot within the internal PDF its creating (it's not an external hyperlink like I expected it would be). There are two bits of bad news, though:
Each section has to be the start of a PDF page. If your section is
two inches tall, the rest of the page will be blank, and the next
section will start on the following page.
The bookmarks aren't clean. When I did it, each file had 3
bookmarks. Which is pretty darned ugly and off-putting.
Option #2: Separate Files, Combined With Another Library
The first 'downside' of Option #1 might not be a problem. But the second is pretty ugly. And other libraries definitely can create the bookmarks without creating 3-per-file. The main obstacle here is: the library has to be smart enough to resolve those 'external' hyperlinks to within the PDF that's created. One thing that often hurts is that those conversion libraries often want to convert each separate file to a PDF internally first and then merge the PDFs together... but that means that it won't handle the cross-file hyperlinks correctly. I wasn't able to find a way to make this work with our existing PDF conversion libraries.
Option #3: Different Origination Method
Instead of having a 'Help.html', which is then converted to PDF somehow, start with a format other than HTML. And the easiest source to get into PDF+Bookmarks is MSWord+Headers. Generally, for each PDF help file you want, you can have a master .DOCX sitting somewhere behind the scenes. We've used this approach before, and while it's not the most elegant, it at least works pretty well.
Option #4: Programmatic with Library
This might not be applicable for the OP's use case... but if you're generating the help, there's nothing to say you can't use the PDF Conversion library programatically to add whatever bookmarks you want. Pretty much every PDF engine I've seen allows API access to bookmarks, so if this avenue is open to you, it's almost certainly the cleanest solution-wise.
Option #5: PDF Conversion Scouring
Like I mentioned, it's possible there's a PDF conversion engine out there that has a good HTML parsing engine and can handle bookmarks from various HTML tags (like H1, H2, etc.) However, it's probably going to take a bit to find it, because it's so much easier for a potential engine-writer to allow the file to be rendered with a native viewer. Think about it. If you were writing a PDF Conversion Service, which would you rather do:
Develop routines that can accurately render an HTML document fed
into it - aka, basically write your own web browser from scratch.
Have IE/Chrome/Whatever render it and simply take their print output
to convert to PDF.
... that second option is so ridiculously easier than the first, that it's no surprise most PDF Conversion engines don't have their own internal HTML parser (or for that matter, Word parser, Excel parser, etc.)
The bookmarks in html input document are set like this:
....
...
...
...
<h1 id="marcador1"> Chapter 1 </h1>
...
Don't use chrome, although it is simple to convert a web page to a PDF file. If you want pdf bookmarks, you can try microsoft word (2010). Just save the web pages to local, and open it with MS word 2010, then save it as pdf. The bookmark is there. see also: https://www.w3.org/TR/WCAG20-TECHS/PDF2.html
App comparison for converting PDF (regarding bookmark & internal hyperlink)
I did some tests for different app, (results may not be accurate due to personal settings / mis-used)
pdf bookmark
internal hyperlink
downloaded as .htm
file format looking
Chrome (print as PDF)
N
Y
N
looks same as the webpage
Calibre
Y
N/Y
Y
looks same as the webpage
Print Friendly & PDF 2.8.1 (Chrome Extension)
N
Y
N
syntax color is changed
WPS docx
N/Y
N
Y
format is changed a lot
Foxit PDF
N
N
Y
looks same as the webpage
Adobe PDF
N
N
Y
looks same as the webpage
MS Word docx
Adobe PDF (Chrome Extension)
annotation:
pdf bookmark = contains bookmark in PDF file
internal hyperlink =
Y = the web hyperlinks inside jumps to the position in the PDF internally
N = the web hyperlinks inside opens an external web link in your browser
downloaded as .htm =
Y = the webpage is downloaded as .htm then converted to PDF
N = the webpage is directly converted in Chrome browser
file format looking
(Though I said "looks same as the webpage", its not "exactly" same as the webpage -- you need to config the settings when you convert.
Also some minor parts / components of the webpage may or may not be contained in the PDF.)
Calibre Usage
To use Calibre (As shown, Calibre contains the bookmark. But it doesnt have internal hyperlink.)
webpage is downloaded as .htm (along with a folder)
drag the .htm into Calibre, it becomes a .zip file
use Convert books to convert .zip to .pdf
You may need to set up the bookmark detection mechanism in Convert books > Table of Contents if Calibre doesnt detect it.
Calibre is highly customizable on the conversion
(wish I know how to solve the issue of "not having internal hyperlink" directly inside Calibre, without going through HTTrack)
To use Calibre, with HTTrack to add internal hyperlink:
use HTTrack to download the webpage
(with depth of level of 1 (--ie: just current webpage), should be enough)
(you may need to config it so that it captures external files like images / syntax-format files)
drag the index.html into Calibre ... (proceed same as [2~4] above)
(you need to enable the option of creating the index.html)
WPS docx Usage (not recommend)
webpage is downloaded as .htm (along with a folder)
save as .docx
output as .pdf (enable the option convert title style format to bookmark)
(if no title style format is detected, that may due to the title are actually in the style format of hyperlink style format, you need to manually remove all those hyperlink style format.)
note
testing subject weblink is this ; (testing result PDF are not posted here)
Again, I could be wrong -- results may not be accurate due to personal settings / mis-used
Personally, I believe big companies like Adobe should have such functionality to include bookmarks in PDF. It just I dont know how to do it...

how display html as plain text without modifying the .html

I teach GUI and use web pages rather than PP.
I am starting to add HTML5 and CSS instruction to the course.
for a file style_by_kind.html
CSS example style_by_kind.html
when student clicks on the link, obviously, runs the file and displays.
the students can use "save as" in their browser to get a copy for themselves.
I want to display the source as text so I can lecture about the html CSS code.
The link runs the code.
Physically including the file runs the html code.
does not applicable, output only
does not display, comment
Because of continuous updates, it is undesirable to copy the
file with another file type extension, and impossible to "quote" out the html.
Any easy syntax to put in the link or around a physically included copy,
so the student just sees plain text, would be greatly appreciated.
I would suggest changing the extension of the html file to txt.
So when u browse to the txt file, it will still get displayed in the browser with the exact same coding.
Depending on how the files are served up, you might be able to set a ContentType header as text/plain, but I suspect most browsers will still sniff the MIMETYPE of the file and render it as html.
Using the <pre> tag as #hamlin11 suggests is a good idea.
Use <plaintext></plaintext> tags
For example, "This is a lesson on bold tags: <plaintext><b>Bold Text</b></plaintext> will display as <b>Bold Text</b>"

Where to find HTML source code in document written with Word 2007?

In Word 2003 one can save as WEB PAGE and get document translatted into HTML coding.
You can use VIEW and see SOURCE CODE to get the HTML coding for that file.
In Word 2007 you can save as web page but I can't find how you VIEW the source code that was created with it.
What you need to do is right-click on the file and select Open With... and use notepad to view the HTML.
Shield your eyes; it's ugly, ugly code.
EDIT: To alleviate some of the bloat and make things more legible, I suggest http://textism.com/wordcleaner/ - I've had pretty good results with it in the past, but it only works for files up to 20kb.
For SO bonus points, check out Jeff's C# code here: Cleaning Word's Nasty HTML.
You can also change the extension of the .docx to zip, then view the contents. A .docx file is actually a zip file with several .xml files inside... but that probably won't give you what you're looking for.
If you've only got a simple HTML page (I can't imagine it being much more than that if it was wrote in Word) you can just view the source in your browser.