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…
<!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>
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 phantomjsIn .emacs:
(add-to-list 'exec-path "/opt/local/bin")
(setenv "PATH" (mapconcat 'identity exec-path ":"))If you’re hooked up to MELPA:
M-x package-refresh-contents M-x package-install RET ob-browser
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
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent