html export with htmlized code blocks

html export with htmlized code blocks

[Dirk-Jan C. Binnema]

Hi all,

I sometimes use blocks of code in my org-files; currently, to make them
look nice, I put the code in a buffer with their major mode (e.g, a blog
perl in a buffer with perl-mode), then convert it to html with htmlize,
and copy the result html back in an org-mode html block.

#+BEGIN_HTML
<pre></pre>
#+END_HTML

I seems that I should be able to automate that a bit... ie., maybe
something like:

#+BEGIN_CODE(perl)
print "hello, world!";
#+END_CODE

And *somehow* make that execute the steps I mentioned, and get something
like; so I'd need to cut-out only the stuff within <pre></pre> the
htmlize-generated html (it generates top-level html stuff which we
should ignore I guess).
 
<pre>
<span class="cperl-nonoverridable">print</span> <span class="string">"hello, world!\n"</span>;</pre>


But I'm not really sure if that would be the best approach. Did anyone
do something like this before? Any tips?

Thanks,
Dirk.

-- 
Dirk-Jan C. Binnema                  Helsinki, Finland
e:djcb@djcbsoftware.nl           w:www.djcbsoftware.nl
pgp: D09C E664 897D 7D39 5047 A178 E96A C7A1 017D DA3C

Re: html export with htmlized code blocks

[Dan Davison]

"Dirk-Jan C. Binnema" <djcb.bulk@gmail.com> writes:

> Hi all,
>
> I sometimes use blocks of code in my org-files; currently, to make them
> look nice, I put the code in a buffer with their major mode (e.g, a blog
> perl in a buffer with perl-mode), then convert it to html with htmlize,
> and copy the result html back in an org-mode html block.
>
> #+BEGIN_HTML
> <pre></pre>
> #+END_HTML
>
> I seems that I should be able to automate that a bit... ie., maybe
> something like:
>
> #+BEGIN_CODE(perl)
> print "hello, world!";
> #+END_CODE
>
> And *somehow* make that execute the steps I mentioned, and get something
> like; so I'd need to cut-out only the stuff within <pre></pre> the
> htmlize-generated html (it generates top-level html stuff which we
> should ignore I guess).
>  
> <pre>
> <span class="cperl-nonoverridable">print</span> <span class="string">"hello, world!\n"</span>;</pre>
>
>
> But I'm not really sure if that would be the best approach. Did anyone
> do something like this before?

Hi Dirk,

I think what you are describing is achieved by

* some heading
#+BEGIN_SRC perl
print "hello, world!";
#+END_SRC

Then you just export the buffer as HTML.

See 

http://orgmode.org/manual/Literal-examples.html#Literal-examples

Sorry if I've misunderstood.

Dan


>  Any tips?
>
> Thanks,
> Dirk.

Re: html export with htmlized code blocks [SOLVED]

[Dirk-Jan C. Binnema]

Hi Dan,

Op Tue 19 May 2009, om 21:10 (+0200) schreef Dan Davison:

> 
> "Dirk-Jan C. Binnema" <djcb.bulk@gmail.com> writes:
> 
> >
> > I seems that I should be able to automate that a bit... ie., maybe
> > something like:
> >
> > #+BEGIN_CODE(perl)
> > print "hello, world!";
> > #+END_CODE
> >
> >
> > But I'm not really sure if that would be the best approach. Did anyone
> > do something like this before?
> 
> Hi Dirk,
> 
> I think what you are describing is achieved by
> 
> * some heading
> #+BEGIN_SRC perl
> print "hello, world!";
> #+END_SRC
> 
> Then you just export the buffer as HTML.
> 
> See 
> 
> http://orgmode.org/manual/Literal-examples.html#Literal-examples
> 
> Sorry if I've misunderstood.

Wow, exactly what I was looking for! [/me falls from chair in
amazement]. Org-mode is even more fantastic than I thought. Silly me for
not finding that in the docs.

Thanks!!
Dirk.

-- 
Dirk-Jan C. Binnema                  Helsinki, Finland
e:djcb@djcbsoftware.nl           w:www.djcbsoftware.nl
pgp: D09C E664 897D 7D39 5047 A178 E96A C7A1 017D DA3C

Re: html export with htmlized code blocks [SOLVED]

[Dirk-Jan C. Binnema]

Hi Dan,

Op Tue 19 May 2009, om 21:10 (+0200) schreef Dan Davison:

> 
> "Dirk-Jan C. Binnema" <djcb.bulk@gmail.com> writes:
> 
> >
> > I seems that I should be able to automate that a bit... ie., maybe
> > something like:
> >
> > #+BEGIN_CODE(perl)
> > print "hello, world!";
> > #+END_CODE
> >
> >
> > But I'm not really sure if that would be the best approach. Did anyone
> > do something like this before?
> 
> Hi Dirk,
> 
> I think what you are describing is achieved by
> 
> * some heading
> #+BEGIN_SRC perl
> print "hello, world!";
> #+END_SRC
> 
> Then you just export the buffer as HTML.
> 
> See 
> 
> http://orgmode.org/manual/Literal-examples.html#Literal-examples
> 
> Sorry if I've misunderstood.

Wow, exactly what I was looking for! [/me falls from chair in
amazement]. Org-mode is even more fantastic than I thought. Silly me for
not finding that in the docs.

Thanks!!
Dirk.

-- 
Dirk-Jan C. Binnema                  Helsinki, Finland
e:djcb@djcbsoftware.nl           w:www.djcbsoftware.nl
pgp: D09C E664 897D 7D39 5047 A178 E96A C7A1 017D DA3C

Re: html export with htmlized code blocks [SOLVED, but...]

[Dirk-Jan C. Binnema]

Dave already gave the excellent #+BEGIN_SRC tip and I have happily
included it in my workflow:
http://emacs-fu.blogspot.com/2009/05/writing-and-blogging-with-org-mode.html

One small remaining question...

he html for the code blocks looks something like:

<pre class="src src-emacs-lisp">
<span style="color: #666666;">;; </span><span style="color: #bbbbbb; font-style: italic;">some comment

So, the code has all of it's CSS inline -- which is nice because that
way people who read through aggregators or feed readers also get the
colors.

*however* the <pre class="src src-emacs-lisp"> expects to find its style
information in <head>. And that part is not used by RSS / aggregators --
I am using a dark color theme in my emacs, which is reflect in the
colors in use for code: the whole <pre> block should
have a black background, so people can read my light-yellow code...

So, either I'd like the <pre> to have the styles inline (like the rest
of the code, I think this is the nicer solution) *or* make the 'pre'
element do something like:
   "<pre class="src src-emacs-lisp" style="color:#edebc4; background-color:black>"

Sure, I could hack it but has anyone already solved this problem?

Thanks in advance!!
Dirk.


Op Tue 19 May 2009, om 23:07 (+0300) schreef Dirk-Jan C. Binnema:

> Op Tue 19 May 2009, om 21:10 (+0200) schreef Dan Davison:
> > 
> > I think what you are describing is achieved by
> > 
> > * some heading
> > #+BEGIN_SRC perl
> > print "hello, world!";
> > #+END_SRC
> > 
> > Then you just export the buffer as HTML.
> > 
> > See 
> > 
> > http://orgmode.org/manual/Literal-examples.html#Literal-examples




-- 
Dirk-Jan C. Binnema                  Helsinki, Finland
e:djcb@djcbsoftware.nl           w:www.djcbsoftware.nl
pgp: D09C E664 897D 7D39 5047 A178 E96A C7A1 017D DA3C

Re: html export with htmlized code blocks [SOLVED, but...]

[Sebastian Rose]

M-x customize-variable RET org-export-htmlize-output-type

Set the value to CSS and see what style classes are used.

I've set org-export-htmlize-css-font-prefix empty, so I can use the same
styles for org-export as I do for htmlized stuff that's floating around
on my computer from the pre-Org years.


   Sebastian





"Dirk-Jan C. Binnema" <djcb.bulk@gmail.com> writes:
> Dave already gave the excellent #+BEGIN_SRC tip and I have happily
> included it in my workflow:
> http://emacs-fu.blogspot.com/2009/05/writing-and-blogging-with-org-mode.html
>
> One small remaining question...
>
> he html for the code blocks looks something like:
>
> <pre class="src src-emacs-lisp">
> <span style="color: #666666;">;; </span><span style="color: #bbbbbb; font-style: italic;">some comment
>
> So, the code has all of it's CSS inline -- which is nice because that
> way people who read through aggregators or feed readers also get the
> colors.
>
> *however* the <pre class="src src-emacs-lisp"> expects to find its style
> information in <head>. And that part is not used by RSS / aggregators --
> I am using a dark color theme in my emacs, which is reflect in the
> colors in use for code: the whole <pre> block should
> have a black background, so people can read my light-yellow code...
>
> So, either I'd like the <pre> to have the styles inline (like the rest
> of the code, I think this is the nicer solution) *or* make the 'pre'
> element do something like:
>    "<pre class="src src-emacs-lisp" style="color:#edebc4; background-color:black>"
>
> Sure, I could hack it but has anyone already solved this problem?
>
> Thanks in advance!!
> Dirk.
>
>
> Op Tue 19 May 2009, om 23:07 (+0300) schreef Dirk-Jan C. Binnema:
>
>> Op Tue 19 May 2009, om 21:10 (+0200) schreef Dan Davison:
>> > 
>> > I think what you are describing is achieved by
>> > 
>> > * some heading
>> > #+BEGIN_SRC perl
>> > print "hello, world!";
>> > #+END_SRC
>> > 
>> > Then you just export the buffer as HTML.
>> > 
>> > See 
>> > 
>> > http://orgmode.org/manual/Literal-examples.html#Literal-examples

-- 
Sebastian Rose, EMMA STIL - mediendesign, Niemeyerstr.6, 30449 Hannover
Tel.:  +49 (0)511 - 36 58 472
Fax:   +49 (0)1805 - 233633 - 11044
mobil: +49 (0)173 - 83 93 417
Email: s.rose@emma-stil.de, sebastian_rose@gmx.de
Http:  www.emma-stil.de

Re: html export with htmlized code blocks [SOLVED, but...]

[Sebastian Rose]

"Dirk-Jan C. Binnema" <djcb.bulk@gmail.com> writes:
> So, the code has all of it's CSS inline -- which is nice because that
> way people who read through aggregators or feed readers also get the
> colors.
>
> *however* the <pre class="src src-emacs-lisp"> expects to find its style
> information in <head>. And that part is not used by RSS / aggregators --
> I am using a dark color theme in my emacs, which is reflect in the
> colors in use for code: the whole <pre> block should
> have a black background, so people can read my light-yellow code...


pre.src
{
  background-color:#000000;
}


should do it.


    Sebastian

Re: html export with htmlized code blocks [SOLVED, but...]

[Sebastian Rose]

"Dirk-Jan C. Binnema" <djcb.bulk@gmail.com> writes:
> So, either I'd like the <pre> to have the styles inline (like the rest
> of the code, I think this is the nicer solution) *or* make the 'pre'
> element do something like:
>    "<pre class="src src-emacs-lisp" style="color:#edebc4; background-color:black>"

Nice, until you change your style (or spread your HTML over the
world). Then all that hardcoded colors get in the way. I'd strongly
recommend the CSS version of highlighting.

The coloring depends on the environment. I sometimes switch to dark
background colors (bash alias: dmacs) at night and light background in
the day time for readability. I could even change the colors of my code
depending on the time of day by serving different stylesheets.



Untested:




In the HTML files:

   <link rel="stylesheet" type="text/css" href="css.php" />



<?php
/*
    css.php 
    Prints our stylesheets depending of the time of day.
*/


header("Contet-Type: text/css");

$t = date("H");

if ( $t > 7 && $t < 20)
{
  fpassthrough("/var/www/daylight.css");
}
else if ( ($t > 6 && $t < 7) ||  ($t > 20 && $t < 21))
{
  fpassthrough("/var/www/twighlight.css");
}
else
{
  fpassthrough("/var/www/nighttime.css");
}

?>




Or how about different themes for the users to choose from, like many
CMS systems provide?



This can be done on any standard Linux installation in about half an
hour (apt-get install apache2 libapache2-mod-php5  - done). I couldn't
live without a database, php and apache (as a minimum).


The are so many goooood arguments to use css.

Readable HTML code or detecting the syntax of a token inside the code
block through the style class assigned to it. CSS classes are no color
values. CSS classes `classify' a container/string/token so we can learn
something more usefull about it, then just the color it has.

Please, use CSS. You won't regret it!


See:

http://cloud.github.com/downloads/SebastianRose/org-search.php/list-snippets.png




    Sebastian

Re: html export with htmlized code blocks

[Sebastian Rose]

Hi Dirk,


if you _really_ do this (it's not first of april, is it?) it's about time
to join this list ;-)

...and take a look into

  * the great Org-mode manual:
    http://orgmode.org/manual/HTML-export.html#HTML-export
    http://orgmode.org/manual/Publishing.html#Publishing 

  * the tutorials on Worg:
    http://orgmode.org/worg/
    http://orgmode.org/worg/org-tutorials/
    http://orgmode.org/worg/org-tutorials/org-publish-html-tutorial.php

  * and type `M-x org-export-htmlize-generate-css RET'


Regards

   Sebastian


"Dirk-Jan C. Binnema" <djcb.bulk@gmail.com> writes:
> Hi all,
>
> I sometimes use blocks of code in my org-files; currently, to make them
> look nice, I put the code in a buffer with their major mode (e.g, a blog
> perl in a buffer with perl-mode), then convert it to html with htmlize,
> and copy the result html back in an org-mode html block.
>
> #+BEGIN_HTML
> <pre></pre>
> #+END_HTML
>
> I seems that I should be able to automate that a bit... ie., maybe
> something like:
>
> #+BEGIN_CODE(perl)
> print "hello, world!";
> #+END_CODE
>
> And *somehow* make that execute the steps I mentioned, and get something
> like; so I'd need to cut-out only the stuff within <pre></pre> the
> htmlize-generated html (it generates top-level html stuff which we
> should ignore I guess).
>  
> <pre>
> <span class="cperl-nonoverridable">print</span> <span class="string">"hello, world!\n"</span>;</pre>
>
>
> But I'm not really sure if that would be the best approach. Did anyone
> do something like this before? Any tips?
>
> Thanks,
> Dirk.