[Top][All Lists]
[Date Prev][Date Next][Thread Prev][Thread Next][Date Index][Thread Index]
[O] [babel, html, howto] Saving vertical space in exported HTML or resul
From: |
Mikhail Titov |
Subject: |
[O] [babel, html, howto] Saving vertical space in exported HTML or result thumbnails & excerpts |
Date: |
Tue, 5 Jun 2012 14:50:11 -0500 |
Hello!
I decided to share a recipe and I think the mailing list is a good place for
that.
The waste of vertical space “really grinds my gears”. I mean whenever I want a
high-def image from babel or tons of detailed text on output from some code
blocks, I get it there making it hard to navigate over the rest of the
document. I saw [1] uses lightbox [2] but uses MACRO for that. This is not
quite usable for babel output which inserts just plain images. I did not feel
like hacking exporter. So I dived into jquery and lightbox manual and came up
with some JS code and CSS that I think make final output look awesome if many
high-resolution images are present. To save on space occupied by long code
block text results, I reused [3] with some changes (probably because of jquery
changes…. I don’t know that stuff).
Include something like the following in the header of your org doc. Look into
my.js (renamed to txt to pass MUA/MTA) for details.
#+STYLE: <script
src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
#+STYLE: <script src="js/lightbox.js"></script>
#+STYLE: <script src="js/my.js"></script>
Make sure you do use #+Caption: before your figures to make a title for
lightbox otherwise you won’t get <div class=”figure”> and things will break.
[1] http://orgmode.org/worg/color-themes-screenshot.html
[2] http://lokeshdhakar.com/projects/lightbox2/
[3] http://be.twixt.us/jquery/codeExpander.php
Mikhail
my.js.txt
Description: Text document
my.css
Description: Text Data
[Prev in Thread] |
Current Thread |
[Next in Thread] |
- [O] [babel, html, howto] Saving vertical space in exported HTML or result thumbnails & excerpts,
Mikhail Titov <=