More decoration for babel output

More decoration for babel output

[Ken Williams]

[-- Attachment #1: Type: text/plain, Size: 884 bytes --]

Hi all,

When exporting to HTML I always add some extra CSS to my org-mode config, for the purpose of identifying which chunks are input vs. output, and for identifying the language of the code in code chunks.  Language is identified by a little label on the box, and input/output is identified by green/red.

Would this be helpful to include by default?  Patch attached.

--
Ken Williams, Senior Research Scientist
WindLogics
http://windlogics.com


________________________________

CONFIDENTIALITY NOTICE: This e-mail message is for the sole use of the intended recipient(s) and may contain confidential and privileged information. Any unauthorized review, use, disclosure or distribution of any kind is strictly prohibited. If you are not the intended recipient, please contact the sender via reply e-mail and destroy all copies of the original message. Thank you.

[-- Attachment #2: 0001-Add-background-color-and-language-label-to-CSS-for-bab.txt --]
[-- Type: text/plain, Size: 1384 bytes --]

From 37ba52c7911b88c6879179311571654ded0273dd Mon Sep 17 00:00:00 2001
From: Ken Williams <Ken.Williams@WindLogics.com>
Date: Wed, 23 Jan 2013 10:14:50 -0600
Subject: [PATCH 1/1] Add background color and language-label to CSS for babel
 blocks.

---
 lisp/org-html.el |   24 ++++++++++++++++++++++++
 1 files changed, 24 insertions(+), 0 deletions(-)

diff --git a/lisp/org-html.el b/lisp/org-html.el
index 224a103..5e34385 100644
--- a/lisp/org-html.el
+++ b/lisp/org-html.el
@@ -170,6 +170,30 @@ for the JavaScript code in this tag.
         font-size: 90%;
         overflow:auto;
   }
+
+  /* Some decoration for source code blocks and their output. */
+  pre.src {
+    background-color: #F5FFF5;
+    position: relative;
+    overflow: visible;
+    margin-right: auto;
+  }
+  pre.src:before {
+    position: absolute;
+    top: -15px;
+    background: #ffffff;
+    padding: 1px;
+    border: 1px solid #000000;
+    font-size: small;
+  }
+  pre.src-sh:before   { content: 'sh'; }
+  pre.src-bash:before { content: 'sh'; }
+  pre.src-R:before    { content: 'R'; }
+  pre.src-perl:before { content: 'Perl'; }
+  pre.src-java:before { content: 'Java'; }
+  pre.src-sql:before  { content: 'SQL'; }
+  pre.example         { background-color: #FFF5F5; }
+
   table { border-collapse: collapse; }
   td, th { vertical-align: top;  }
   th.right  { text-align:center;  }
-- 
1.7.9

Re: More decoration for babel output

[Gunnar Wolf]

Ken Williams dijo [Wed, Jan 23, 2013 at 04:26:54PM +0000]:
> Hi all,
> 
> When exporting to HTML I always add some extra CSS to my org-mode
> config, for the purpose of identifying which chunks are input
> vs. output, and for identifying the language of the code in code
> chunks.  Language is identified by a little label on the box, and
> input/output is identified by green/red.
> 
> Would this be helpful to include by default?  Patch attached.

As for me, with slight adaptations, I am including it in my operating
systems class notes. Thanks!

Re: More decoration for babel output

[Gunnar Wolf]

Gunnar Wolf dijo [Wed, Jan 23, 2013 at 11:25:43AM -0600]:
> > When exporting to HTML I always add some extra CSS to my org-mode
> > config, for the purpose of identifying which chunks are input
> > vs. output, and for identifying the language of the code in code
> > chunks.  Language is identified by a little label on the box, and
> > input/output is identified by green/red.
> > 
> > Would this be helpful to include by default?  Patch attached.
> 
> As for me, with slight adaptations, I am including it in my operating
> systems class notes. Thanks!

FWIW, the only changes I did to your css is to use darker backgrounds
(#336666 instead of #F5FFF5), as the code is hardwired to somewhat
inconvenient colors (some very dark, some very bright) and the result
was hard to read.

Re: More decoration for babel output

[Bastien]

Hi Ken,

Ken Williams <Ken.Williams@windlogics.com> writes:

> Hi all,
>
> When exporting to HTML I always add some extra CSS to my org-mode config,
> for the purpose of identifying which chunks are input vs. output, and for
> identifying the language of the code in code chunks.  Language is
> identified by a little label on the box, and input/output is identified by
> green/red.
>
> Would this be helpful to include by default?  Patch attached.

This look fine -- can you send a screenshot?

I cannot apply the patch until you assign your copyright to the FSF.
Would be nice if you can do it!  Here is the form:

http://orgmode.org/cgit.cgi/org-mode.git/plain/request-assign-future.txt

Thanks,

-- 
 Bastien

Re: More decoration for babel output

[Bastien]

Hi Ken,

Ken Williams <Ken.Williams@windlogics.com> writes:

> Would this be helpful to include by default?  Patch attached.

I committed something deeply inspired by your patch, 
but slightly different.  Please have a look (from master)
and let me know if you think this is okay.

Thanks for this idea!

-- 
 Bastien