Skip to content
Render HTML inside Emacs' org-mode
Emacs Lisp JavaScript
Latest commit 9271453 Nov 19, 2015 @krisajenkins Merge pull request #2 from syohex/update-url
Update MELPA URL.
Failed to load latest commit information.
.gitignore
README.org Update MELPA URL Nov 19, 2015
demo.png Fixing load-timing issues, tidying up the code and creating a more in… Jul 24, 2013
ob-browser.el
ob-browser.js Renaming the project to something a teensy bit catchier. Jul 24, 2013

README.org

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:

ArgumentDescriptionExample
:outOutput 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
Something went wrong with that request. Please try again.