Styling HTML output

Styling HTML output

[Ken.Williams]

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: #ffffff; padding: 1px; border: 1px solid #000000; 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

Re: Styling HTML output

[Jason Dunsmore]

Very nice, thanks!

Re: Styling HTML output

[Bastien]

Hi Ken,

<Ken.Williams@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: Styling HTML output

[Eric S Fraga]

<Ken.Williams@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: Styling HTML output

[Ken.Williams]

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


On 8/26/11 4:01 AM, "Bastien" <bzg@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



[-- Attachment #2: 0001-Add-an-entry-for-code-output-styling-in-HTML-CSS.patch --]
[-- Type: application/octet-stream, Size: 1842 bytes --]

From d6caa7674c7c848bad36688c0adb83ed35172ec9 Mon Sep 17 00:00:00 2001
From: Ken Williams <ken.williams@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..2791edc 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-sh">=.  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: #ffffff; padding: 1px; border: 1px solid #000000; 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

Re: Styling HTML output

[Nick Dokos]

<Ken.Williams@thomsonreuters.com> wrote:

> 
> On 8/26/11 4:01 AM, "Bastien" <bzg@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: Styling HTML output

[Ken.Williams]

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


On 8/26/11 2:26 PM, "Nick Dokos" <nicholas.dokos@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.williams@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:
#ffffff; padding: 1px; border: 1px solid #000000; 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



>


[-- Attachment #2: 0001-Add-an-entry-for-code-output-styling-in-HTML-CSS.patch --]
[-- Type: application/octet-stream, Size: 1844 bytes --]

From c3fd3627d6f912fe1108eff1fc2893ff6c4631bb Mon Sep 17 00:00:00 2001
From: Ken Williams <ken.williams@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: #ffffff; padding: 1px; border: 1px solid #000000; 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

Re: Styling HTML output

[Bastien]

Hi Ken,

<Ken.Williams@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