# HTML formated Ruby code

**URL:** <https://rubytalk.org/t/html-formated-ruby-code/37435>\
**Category:** ruby-talk\
**Created:** [7 May 2007 08:58 UTC](https://rubytalk.org/t/html-formated-ruby-code/37435 "2007-05-07T08:58:05Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![Felipe\_Contreras](https://yyz1.discourse-cdn.com/flex029/user_avatar/rubytalk.org/felipe_contreras/32/2355_2.png) [@Felipe\_Contreras](https://rubytalk.org/u/Felipe_Contreras)\
**Post date:** [7 May 2007 08:58 UTC](https://rubytalk.org/t/html-formated-ruby-code/37435/1 "2007-05-07T08:58:05Z")

</div>

Hi,

Does anyone knows how all that beautiful HTML formated Ruby code on  
[ruby-lang.org](http://ruby-lang.org) is generated?

Like this:

\<div id="code"\>

\<div class="comment"\># Output "I love Ruby"\</div\>  
\<div\>say \<span class="op"\>=\</span\> \<span class="string"\>"I love  
Ruby"\</span\>\</div\>  
\<div\>puts say\</div\>  
\<div class="blank-line"\>&nbsp;\</div\>  
\<div class="comment"\># Output "I \*LOVE\* RUBY"\</div\>

\<div\>say\<span class="op"\>[\</span\>\<span  
class="string"\>'love'\</span\>\<span class="op"\>]\</span\> = \<span  
class="string"\>"\*love\*"\</span\>\</div\>  
\<div\>puts say\<span class="op"\>.\</span\>upcase\</div\>  
\<div class="blank-line"\>&nbsp;\</div\>  
\<div class="comment"\># Output "I \*love\* Ruby"\</div\>

\<div class="comment"\># five times\</div\>  
\<div\>\<span class="numeric"\>5\</span\>\<span class="op"\>.\</span\>times  
\<span class="op"\>{\</span\> puts say \<span class="op"\>}\</span\>\</div\>

\</div\>

> **···**
>
> --  
> Felipe Contreras

---

<div class="post-metadata">

**Author:** ![akbarhome](https://avatars.discourse-cdn.com/v4/letter/a/58956e/32.png) [@akbarhome](https://rubytalk.org/u/akbarhome)\
**Post date:** [7 May 2007 09:05 UTC](https://rubytalk.org/t/html-formated-ruby-code/37435/2 "2007-05-07T09:05:23Z")

</div>

My guess is they make it manually. If not, it is a part of RadiantCMS  
project that they use it.

> **···**
>
> On May 7, 3:58 pm, "Felipe Contreras" \<felipe.contre...@gmail.com\> wrote:
> 
> > Hi,
> > 
> > Does anyone knows how all that beautiful HTML formated Ruby code on  
> > ruby-lang.org is generated?
> > 
> > Like this:
> > 
> > \<div id="code"\>
> > 
> > \<div class="comment"\># Output "I love Ruby"\</div\>  
> > \<div\>say \<span class="op"\>=\</span\> \<span class="string"\>"I love  
> > Ruby"\</span\>\</div\>  
> > \<div\>puts say\</div\>  
> > \<div class="blank-line"\>&nbsp;\</div\>  
> > \<div class="comment"\># Output "I \*LOVE\* RUBY"\</div\>
> > 
> > \<div\>say\<span class="op"\>[\</span\>\<span  
> > class="string"\>'love'\</span\>\<span class="op"\>]\</span\> = \<span  
> > class="string"\>"\*love\*"\</span\>\</div\>  
> > \<div\>puts say\<span class="op"\>.\</span\>upcase\</div\>  
> > \<div class="blank-line"\>&nbsp;\</div\>  
> > \<div class="comment"\># Output "I \*love\* Ruby"\</div\>
> > 
> > \<div class="comment"\># five times\</div\>  
> > \<div\>\<span class="numeric"\>5\</span\>\<span class="op"\>.\</span\>times  
> > \<span class="op"\>{\</span\> puts say \<span class="op"\>}\</span\>\</div\>
> > 
> > \</div\>
> > 
> > --  
> > Felipe Contreras

---

<div class="post-metadata">

**Author:** ![Peter\_Cooper](https://avatars.discourse-cdn.com/v4/letter/p/db5fbb/32.png) [@Peter\_Cooper](https://rubytalk.org/u/Peter_Cooper)\
**Post date:** [7 May 2007 09:10 UTC](https://rubytalk.org/t/html-formated-ruby-code/37435/3 "2007-05-07T09:10:53Z")

</div>

I don't know exactly how they do it, but I do the same thing using this:

[http://rubyinside.com/syntax.cgi](http://rubyinside.com/syntax.cgi)

It's really just a Ruby script you could hook up yourself, but I'm too lazy  
to remember how to do it, so I let people use mine on Ruby Inside instead 🙂  
The CSS needed and further instructions can be found here:  
[http://www.rubyinside.com/advent2006/7-coloring.html](http://www.rubyinside.com/advent2006/7-coloring.html)

Cheers,  
Peter Cooper

> **[Ruby Inside: The Ruby Blog](http://www.rubyinside.com/)**
>
> The biggest Ruby and Rails blog since 2006 - tutorials, news, and lots more

> **···**
>
> On 5/7/07, Felipe Contreras \<felipe.contreras@gmail.com\> wrote:
> 
> > Hi,
> > 
> > Does anyone knows how all that beautiful HTML formated Ruby code on  
> > ruby-lang.org is generated?

---

<div class="post-metadata">

**Author:** ![James\_Edward\_Gray\_II](https://avatars.discourse-cdn.com/v4/letter/j/ea5d25/32.png) [@James\_Edward\_Gray\_II](https://rubytalk.org/u/James_Edward_Gray_II)\
**Post date:** [7 May 2007 11:52 UTC](https://rubytalk.org/t/html-formated-ruby-code/37435/4 "2007-05-07T11:52:54Z")

</div>

I've hand edited most of the code on that site for various reasons, but TextMate can be used to generate HTML pretty close to it. The site's syntax coloring has been made into a TextMate theme called Ruby Blue:

[http://wiseheartdesign.com/2006/03/11/ruby-blue-textmate-theme](http://wiseheartdesign.com/2006/03/11/ruby-blue-textmate-theme)

When you have code open with that theme on, you can use commands in the TextMate bundle to convert it to HTML.

James Edward Gray II

> **···**
>
> On May 7, 2007, at 3:58 AM, Felipe Contreras wrote:
> 
> > Does anyone knows how all that beautiful HTML formated Ruby code on  
> > ruby-lang.org is generated?

---

<div class="post-metadata">

**Author:** ![Gregory\_Seidman](https://avatars.discourse-cdn.com/v4/letter/g/eb9ed0/32.png) [@Gregory\_Seidman](https://rubytalk.org/u/Gregory_Seidman)\
**Post date:** [7 May 2007 13:32 UTC](https://rubytalk.org/t/html-formated-ruby-code/37435/5 "2007-05-07T13:32:36Z")

</div>

> Hi,
> 
> Does anyone knows how all that beautiful HTML formated Ruby code on  
> ruby-lang.org is generated?

[...]

I don't know exactly how they do it, but I wrote up how I do it here:

[http://redcorundum.blogspot.com/2006/07/syntax-coloring.html](http://redcorundum.blogspot.com/2006/07/syntax-coloring.html)

> Felipe Contreras

--Greg

> **···**
>
> On Mon, May 07, 2007 at 05:58:05PM +0900, Felipe Contreras wrote:

---

<div class="post-metadata">

**Author:** ![Daniel\_Leidisch](https://avatars.discourse-cdn.com/v4/letter/d/3da27b/32.png) [@Daniel\_Leidisch](https://rubytalk.org/u/Daniel_Leidisch)\
**Post date:** [7 May 2007 13:42 UTC](https://rubytalk.org/t/html-formated-ruby-code/37435/6 "2007-05-07T13:42:15Z")

</div>

I don't know how they did it, but you can run

:so $VIMRUNTIME/syntax/2html.vim

from inside vim and have all the available color themes output as  
HTML. In Emacs I use htmlize.el. Another option would be highlight,  
which is run from the command line.

> **···**
>
> Felipe Contreras \<felipe.contreras@gmail.com\> wrote on Mon, May 07, 2007 at 05:58:05PM +0900:
> 
> > Hi,
> > 
> > Does anyone knows how all that beautiful HTML formated Ruby code on  
> > ruby-lang.org is generated?

---

<div class="post-metadata">

**Author:** ![Jeremy\_Hinegardner](https://avatars.discourse-cdn.com/v4/letter/j/65b543/32.png) [@Jeremy\_Hinegardner](https://rubytalk.org/u/Jeremy_Hinegardner)\
**Post date:** [7 May 2007 21:34 UTC](https://rubytalk.org/t/html-formated-ruby-code/37435/7 "2007-05-07T21:34:55Z")

</div>

You could also try CodeRay [http://coderay.rubychan.de/](http://coderay.rubychan.de/)

enjoy,

-jeremy

> **···**
>
> On Mon, May 07, 2007 at 05:58:05PM +0900, Felipe Contreras wrote:
> 
> > Hi,
> > 
> > Does anyone knows how all that beautiful HTML formated Ruby code on  
> > ruby-lang.org is generated?
> 
> # --
> 
> Jeremy Hinegardner jeremy@hinegardner.org

---

<div class="post-metadata">

**Author:** ![come](https://avatars.discourse-cdn.com/v4/letter/c/9f8e36/32.png) [@come](https://rubytalk.org/u/come)\
**Post date:** [9 May 2007 09:50 UTC](https://rubytalk.org/t/html-formated-ruby-code/37435/8 "2007-05-09T09:50:05Z")

</div>

Hi,

For my HTML output, I use the ScreenShot plugin with vim. It comes  
with the "TOhtml" command which produce an HTML output on my windows  
computer. It should works on Linux, too.

The output looks like this :  
\<pre\>  
search\_engines =  
&nbsp;&nbsp;\<font color="#6a5acd"\>%w[\</font\>\<font color="#ff00ff"\>Google Yahoo  
MSN\</font\>\<font color="#6a5acd"\>]\</font\>.map \<font  
color="#804040"\>\<b\>do\</b\>\</font\> |\<font color="#008080"\>engine\</font\>|  
&nbsp;&nbsp;&nbsp;&nbsp;\<font color="#6a5acd"\>&quot;\</font\>\<font color="#ff00ff"\>\<a  
href="[http://www](http://www)."\>[http://www](http://www).\</a\>\</font\>\<font color="#6a5acd"\>&quot;\</

> + engine.downcase + \<font color="#6a5acd"\>&quot;\</font\>\<font

color="#ff00ff"\>.com\</font\>\<font color="#6a5acd"\>&quot;\</font\>  
&nbsp;&nbsp;\<font color="#804040"\>\<b\>end\</b\>\</font\>  
\</pre\>

For my output on doc Word, It is possible to insert HTML output, but  
SciTE has a "Copy to RTF" command which is a litte faster.

Come

> **···**
>
> On 7 mai, 10:58, "Felipe Contreras" \<felipe.contre...@gmail.com\> wrote:
> 
> > Hi,
> > 
> > Does anyone knows how all that beautiful HTML formated Ruby code on  
> > ruby-lang.org is generated?

---

<div class="post-metadata">

**Author:** ![Felipe\_Contreras](https://yyz1.discourse-cdn.com/flex029/user_avatar/rubytalk.org/felipe_contreras/32/2355_2.png) [@Felipe\_Contreras](https://rubytalk.org/u/Felipe_Contreras)\
**Post date:** [8 May 2007 14:13 UTC](https://rubytalk.org/t/html-formated-ruby-code/37435/9 "2007-05-08T14:13:02Z")

</div>

Thanks!

Unfortunately I don't have TextMate since I'm on Linux.

I really really like VIM, but I'm starting to feel it has a lot of shortcomings.

Hmm, maybe some Ruby extensions inside VIM is just what I need...

/me drools

> **···**
>
> On 5/7/07, James Edward Gray II \<james@grayproductions.net\> wrote:
> 
> > On May 7, 2007, at 3:58 AM, Felipe Contreras wrote:
> > 
> > \> Does anyone knows how all that beautiful HTML formated Ruby code on  
> > \> ruby-lang.org is generated?
> > 
> > I've hand edited most of the code on that site for various reasons,  
> > but TextMate can be used to generate HTML pretty close to it. The  
> > site's syntax coloring has been made into a TextMate theme called  
> > Ruby Blue:
> > 
> > [http://wiseheartdesign.com/2006/03/11/ruby-blue-textmate-theme](http://wiseheartdesign.com/2006/03/11/ruby-blue-textmate-theme)
> > 
> > When you have code open with that theme on, you can use commands in  
> > the TextMate bundle to convert it to HTML.
> 
> --  
> Felipe Contreras

---

<div class="post-metadata">

**Author:** ![Gavin\_Kistner2](https://avatars.discourse-cdn.com/v4/letter/g/b9e5f3/32.png) [@Gavin\_Kistner2](https://rubytalk.org/u/Gavin_Kistner2)\
**Post date:** [9 May 2007 13:45 UTC](https://rubytalk.org/t/html-formated-ruby-code/37435/10 "2007-05-09T13:45:11Z")

</div>

I've been wanting to write a Lua scanner for CodeRay, but haven't been  
able (in mere minutes of exploration) to figure out where to begin.  
Has anyone worked with CodeRay as a language author, and could provide  
some tips/webpages/articles/documentation on how to write a plugin for  
a new language for it?

> **···**
>
> On May 7, 3:34 pm, Jeremy Hinegardner \<jer...@hinegardner.org\> wrote:
> 
> > You could also try CodeRayhttp://coderay.rubychan.de/