Re: [O] Styling HTML output
Hi Ken, ken.willi...@thomsonreuters.com writes: I wanted to share some CSS code that I've found useful for exported HTML documents. It adds a little R or sh or Perl (etc.) label to the top of a source block. Cool - it deserves to be put on Worg org-hacks.org! Thanks, -- Bastien
Re: [O] Styling HTML output
ken.willi...@thomsonreuters.com writes: I wanted to share some CSS code that I've found useful for exported HTML documents. It adds a little R or sh or Perl (etc.) label to the top of a source block. [...] Very nice. Thanks. I've already started using it, having added some other languages. Thanks again, eric -- : Eric S Fraga (GnuPG: 0xC89193D8FFFCF67D) in Emacs 24.0.50.1 : using Org-mode version 7.7 (release_7.7.205.gce02a)
Re: [O] Styling HTML output
On 8/26/11 4:01 AM, Bastien b...@altern.org wrote: Cool - it deserves to be put on Worg org-hacks.org! Good idea, here's a patch (I hope attachments work on this list?) that adds it. -- Ken Williams Senior Research Scientist Thomson Reuters http://labs.thomsonreuters.com 0001-Add-an-entry-for-code-output-styling-in-HTML-CSS.patch Description: 0001-Add-an-entry-for-code-output-styling-in-HTML-CSS.patch
Re: [O] Styling HTML output
ken.willi...@thomsonreuters.com wrote: On 8/26/11 4:01 AM, Bastien b...@altern.org wrote: Cool - it deserves to be put on Worg org-hacks.org! Good idea, here's a patch (I hope attachments work on this list?) that adds it. Two things: o application/octet-stream is not the right MIME type for the attachment. If your mailer allows, patches should be text/plain or some other subtype of text (there is a list of patchwork-acceptable types here: http://orgmode.org/worg/org-contribute.html#sec-4-3 And although your patch is for Worg, not for core org, it would still be nice to have it tracked by patchwork.) o Presumaby the following should say pre class=src src-perl: --8---cut here---start-8--- ... +type. For example, Perl content will have an opening tag like +=pre class=src src-sh=. You can use those classes to add styling --8---cut here---end---8--- Nick
Re: [O] Styling HTML output
On 8/26/11 2:26 PM, Nick Dokos nicholas.do...@hp.com wrote:
Two things:
o application/octet-stream is not the right MIME type for the
attachment.[...]
o Presumaby the following should say pre class=src src-perl:[...]
Thanks, I think this update is better. Unfortunately I don't think my
mailer (stupid Outlook) can change the attachments, so I'll inline it here.
From c3fd3627d6f912fe1108eff1fc2893ff6c4631bb Mon Sep 17 00:00:00 2001
From: Ken Williams ken.willi...@thomsonreuters.com
Date: Fri, 26 Aug 2011 13:45:44 -0500
Subject: [PATCH] Add an entry for code-output styling in HTML/CSS.
---
org-hacks.org | 28
1 files changed, 28 insertions(+), 0 deletions(-)
diff --git a/org-hacks.org b/org-hacks.org
index 6c926a0..754d1a8 100644
--- a/org-hacks.org
+++ b/org-hacks.org
@@ -1618,6 +1618,34 @@ workaround, one can use the following:
,#+LATEX: }
#+end_src
+*** Styling code sections with CSS
+
+Code sections (marked with =#+begin_src= and =#+end_src=) are exported
+to HTML using =pre= tags, and assigned CSS classes by their content
+type. For example, Perl content will have an opening tag like
+=pre class=src src-perl=. You can use those classes to add styling
+to the output, such as here where a small language tag is added at the
+top of each kind of code box:
+
+#+begin_src lisp
+(setq org-export-html-style
+ style type=\text/css\
+!--/*--![CDATA[/*!--*/
+ .src { background-color: #F5FFF5; position: relative;
overflow: visible; }
+ .src:before { position: absolute; top: -15px; background:
#ff; padding: 1px; border: 1px solid #00; font-size: small; }
+ .src-sh:before { content: 'sh'; }
+ .src-bash:before { content: 'sh'; }
+ .src-R:before{ content: 'R'; }
+ .src-perl:before { content: 'Perl'; }
+ .src-sql:before { content: 'SQL'; }
+ .example { background-color: #FFF5F5; }
+/*]]*/--
+ /style)
+#+end_src
+
+Additionally, we use color to distinguish code output (the =.example=
+class) from input (all the =.src-*= classes).
+
* Hacking Org: Working with Org-mode and other Emacs Packages.
** org-remember-anything
--
1.7.5
--
Ken Williams
Senior Research Scientist
Thomson Reuters
http://labs.thomsonreuters.com
0001-Add-an-entry-for-code-output-styling-in-HTML-CSS.patch
Description: 0001-Add-an-entry-for-code-output-styling-in-HTML-CSS.patch
Re: [O] Styling HTML output
Hi Ken, ken.willi...@thomsonreuters.com writes: Thanks, I think this update is better. Unfortunately I don't think my mailer (stupid Outlook) can change the attachments, so I'll inline it here. Applied, thanks! -- Bastien
[O] Styling HTML output
I wanted to share some CSS code that I've found useful for exported HTML
documents. It adds a little R or sh or Perl (etc.) label to the top of a
source block.
(setq org-export-html-style
style type=\text/css\
!--/*--![CDATA[/*!--*/
.src { background-color: #F5FFF5; position: relative;
overflow: visible; }
.src:before { position: absolute; top: -15px; background: #ff;
padding: 1px; border: 1px solid #00; font-size: small; }
.src-sh:before { content: 'sh'; }
.src-bash:before { content: 'sh'; }
.src-R:before{ content: 'R'; }
.src-perl:before { content: 'Perl'; }
.src-sql:before { content: 'SQL'; }
.example { background-color: #FFF5F5; }
/*]]*/--
/style)
I got help on Stack Overflow to figure that out:
http://stackoverflow.com/questions/7192054/create-box-with-title-legend-in-css .
I stick that in my .emacs file and I get output with nice little labels.
Hopefully someone else will find it useful too.
--
Ken Williams
Senior Research Scientist
Thomson Reuters
http://labs.thomsonreuters.com
