emacs-orgmode
[Top][All Lists]
Advanced

[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

Attachment: my.js.txt
Description: Text document

Attachment: my.css
Description: Text Data


reply via email to

[Prev in Thread] Current Thread [Next in Thread]