How to activate pre.src in org-babel html output? Can only get class=example

How to activate pre.src in org-babel html output? Can only get class=example

[Giovanni Moretti]

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

Using org-babel, I'm wanting to output Python fragments along with the resultant 
output to HTML.

That bit's easy, and the following works as expected:

    #+options: toc:nil num:nil
    * Using Python interactively
    Any commands typed into the console executed immediately.

    #+begin_src python :results output :exports both
    print 355/113

    print 17/2
    print 17/2.0
    #+end_src python

However, although I find references to various styling mechanisms (e.g 
*pre.src*) in the orgmode documentation, I can't find any way to get any more 
CSS selectors on both the src and output blocks. The only one that ever appears 
is "example" as shown here:

    <pre class="example">print 355/113
    print 17/2
    print 17/2.0
    </pre>
    <pre class="example">
       3
       8
       8.5
    </pre>
    </div>

If I can find out how to make "pre.src" appear (hopefully only on the source 
block) , then I can change the background colours or fonts to make the output 
visibly distinct from the source code.

The full HTML output I get is at 
http://dl.dropbox.com/u/2671560/org-py-babel.html contains lots of CSS 
selectors, and I can easily include my my own using #+STYLE lines, but I need 
some way to differentiate the two blocks.

I'm using Emacs 23.1.50.1 and the lastest orgmode  commit 
b5082974c83a3a4838db86025edce857b11e5847 (Fri Feb 3 15:18:05 2012 +0100)

Any tips?

Thanks
Giovanni

-- 
======================================================================
Dr Giovanni Moretti | School of Engineering and Advanced Technology
Senior Lecturer     | Massey University, Palmerston North, New Zealand
Computer Science    | Ph +64-6-3505799x2474  Fax +64-6-3502259 - ZL2GX
======================================================================
http://seat.massey.ac.nz/moretti                G.Moretti@massey.ac.nz



[-- Attachment #2: Type: text/html, Size: 2693 bytes --]

Re: How to activate pre.src in org-babel html output? Can only get class=example

[Eric Schulte]

Hi Giovanni,

When I export the following code block

,----
| #+begin_src emacs-lisp :exports both
|   :foo
| #+end_src
`----

it generates the following HTML.

,----
| <pre class="src src-emacs-lisp"><span style="color: #d0d0ff;">:foo</span>
| </pre>
| 
| 
| <pre class="example">
| :foo
| </pre>
`----

My guess is that during export you get a message along the lines of
"htmlize is required for export".  Try explicitly loading htmlize.el (in
the contrib/lisp directory of org) and then re-exporting and you should
get the desired output.

Best,

Giovanni Moretti <g.moretti@massey.ac.nz> writes:

> Using org-babel, I'm wanting to output Python fragments along with the resultant 
> output to HTML.
>
> That bit's easy, and the following works as expected:
>
>     #+options: toc:nil num:nil
>     * Using Python interactively
>     Any commands typed into the console executed immediately.
>
>     #+begin_src python :results output :exports both
>     print 355/113
>
>     print 17/2
>     print 17/2.0
>     #+end_src python
>
> However, although I find references to various styling mechanisms (e.g 
> *pre.src*) in the orgmode documentation, I can't find any way to get any more 
> CSS selectors on both the src and output blocks. The only one that ever appears 
> is "example" as shown here:
>
>     <pre class="example">print 355/113
>     print 17/2
>     print 17/2.0
>     </pre>
>     <pre class="example">
>        3
>        8
>        8.5
>     </pre>
>     </div>
>
> If I can find out how to make "pre.src" appear (hopefully only on the source 
> block) , then I can change the background colours or fonts to make the output 
> visibly distinct from the source code.
>
> The full HTML output I get is at 
> http://dl.dropbox.com/u/2671560/org-py-babel.html contains lots of CSS 
> selectors, and I can easily include my my own using #+STYLE lines, but I need 
> some way to differentiate the two blocks.
>
> I'm using Emacs 23.1.50.1 and the lastest orgmode  commit 
> b5082974c83a3a4838db86025edce857b11e5847 (Fri Feb 3 15:18:05 2012 +0100)
>
> Any tips?
>
> Thanks
> Giovanni

-- 
Eric Schulte
http://cs.unm.edu/~eschulte/

Re: How to activate pre.src in org-babel html output? Can only get class=example

[Giovanni Moretti]

Hi Eric

>  My guess is that during export you get a message along the lines of
>  "htmlize is required for export".  Try explicitly loading htmlize.el
>  (in the contrib/lisp directory of org) and then re-exporting ...

You're spot on - importing htmlize.el did the trick. However, before importing 
it, there weren't any error messages about it being missing. All would work 
happily, but the source block didn't have the additional src and src-python tags.

To me, this seems like a bug or at least not ideal, as the src tag and the 
src-<language> tag are related to the HTML export of #+begin_src block, not on 
*how* the HTML is styled (i.e. by the user or htmlize).

For those searching the mailing list later:

; For pretty-printed formatted source code on HTML export,
; load htmlize.el in init.el or the emacs config file

(load-file "~/.emacs.d/orgmode/contrib/lisp/htmlize.el")

I've got the orgmode source in the .emacs.d directory so I can pull updates 
using git, otherwise look for contrib/lisp/htmlize.el in the main Emacs directory.

With htmlize.el loaded, exporting:
,============
| #+begin_src python :results output :exports both
| print "Pi = ", 355/113.0
| #+end_src python
`============

Results in the src block having the src and src-python CSS tags:
,============
|<pre  class="src src-python">
|<span  style="color: #a020f0;">print</span>
|<span  style="color: #8b2252;">"Pi ="</span>, 355/113.0
|</pre>
|
|
|<pre  class="example">
| Pi =  3.14159292035
|</pre>
`============

with an automatically added little "Python" flag box on the Python src block.

Some custom CSS can be used to make the src and output a little more distinct. A 
simple way is it place these lines at the top of the file:

#+style:<style>  pre.src  {background-color: #DDFFFF;}</style>
#+style:<style>  .example {background-color: #FFFFCC;}</style>

However, you have to be consistent about using #+begin_src blocks rather than 
just a colon or using begin_example at the beginning of lines for src fragments 
that don't output anything, otherwise Python src they'll come out with the 
output colouring. The keyboard shortcut (< s tab) for getting a 
#+begin_src---#+end_src block is handy here.

Although the example above relates to #+begin_src python blocks, the fix should 
work with other languages.

Cheers and thanks
Giovanni

======================================================================
Dr Giovanni Moretti | School of Engineering and Advanced Technology
Senior Lecturer     | Massey University, Palmerston North, New Zealand
Computer Science    | Ph +64-6-3505799x2474  Fax +64-6-3502259 - ZL2GX
======================================================================
http://seat.massey.ac.nz/moretti                G.Moretti@massey.ac.nz