Org Babel Browser - Render HTML in org-mode

Do you want to write HTML blocks in org-mode and have them automagically rendered as screenshots? Yes, I thought so. Me too. Here we go…

Demo

<!DOCTYPE html>
<html>
    <head>
        <link href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/css/bootstrap.min.css" rel="stylesheet" media="screen">
    </head>
    <body>
        <div class="row">
            <div class="span6 offset1">
                <h1>Rendered PNG</h1>
                
                <button class="btn btn-primary">You Can't Press This</button>
            </div>
        </div>
    </body>
</html>

Installation

Prerequisite

You must have PhantomJS installed on your machine and available on the Emacs env path. I do something like this:

From the terminal:

sudo port install phantomjs

In .emacs:

(add-to-list 'exec-path "/opt/local/bin")
(setenv "PATH" (mapconcat 'identity exec-path ":"))

Then

If you’re hooked up to MELPA:

M-x package-refresh-contents
M-x package-install RET ob-browser

Options

Each block supports the following arguments:

Argument	Description	Example
`:out`	Output filename.	`#+BEGIN_SRC browser :out demo.png`

The :out argument is mandatory. The file format will be chosen automatically based on the extension, and may be any of:

.png
.gif
.jpg
.pdf

Cheap and reliable Node.js hosting starts at $3/month, and $1/month static HTML hosting