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