syntax highligted source code snippets in HTML

Add syntax highlighted source code snippets in HTML documents.

In Vim

:TOhtml
TOhtml is a standard plugin and produces source code snippets in HTML that look like the syntax highlighting in Vim.

By default :TOhtml produces (good to inline ) source code snippets that look like this:

/*#g0 hi.c*/
#include <stdio.h>
#include <stdlib.h>

int main()
{
  printf ("Hola %s.\n", getenv("USER"));
  return 0;
}



syntax highligted source code snippets in HTML



and HTML source code that looks like:


<font face="monospace">
<font color="#8080ff">/*</font><font color="#8080ff">#g0 hi.c</font><font color="#8080ff">*/</font><br>
<font color="#ff40ff">#include </font><font color="#ff6060">&lt;stdio.h&gt;</font><br>
<font color="#ff40ff">#include </font><font color="#ff6060">&lt;stdlib.h&gt;</font><br>
<br>
<font color="#00ff00">int</font>&nbsp;main()<br>
{<br>
&nbsp;&nbsp;printf (<font color="#ff6060">&quot;Hola </font><font color="#ff40ff">%s</font><font color="#ff6060">.</font><font color="#ff40ff">\n</font><font color="#ff6060">&quot;</font>, getenv(<font color="#ff6060">&quot;USER&quot;</font>));<br>
&nbsp;&nbsp;<font color="#ffff00">return</font>&nbsp;<font color="#ff6060">0</font>;<br>
}<br>
<br>
</font>


which is very easy to use within another HTML document.

To produce a snippet from a section of code use
:n,mTOhtml
where n is the first line code and m the last line of source code you want to HTMLify.

To produce HTML source code with CSS enable it with
:let html_use_css = 1
before
:TOhtml


:TOhtml with html_use_css enabled produces great looking highlighted source code snippets that look like:



and HTML that looks like:





HTML source code snippets with CSS can be 'inlined' in an HTML document with an iframe eg:

<iframe src="http://kod.ipduh.com/alogsup/hi.c.html"></iframe>




If a site contains many snippets of the same language it would be better to use an external style-sheet and just inline the pre blocks in HTML.

To add number lines in your source snippets
:let html_number_lines = 1
before
:TOhtml


To learn more about converting source code to HTML in Vim use:
:help 2html



source-highlight

GNU Source-highlight is a nice piece of software that highlights source code and produces HTML among other outputs. Source-Highlight is a library and a standalone program that it is easy to use. Many Source highlighting capable programs use Source-Highlight one way or another. -- src-highlite

In debian based systems you could:
$ sudo apt-get install source-highlight
$ source-highlight -s c hi.c
Processing hi.c ... created hi.c.html


Source-highlight produces by default great looking source code snippets that look like this:

/*#g0 hi.c*/
#include <stdio.h>
#include <stdlib.h>

int main()
{
  printf ("Hola %s.\n", getenv("USER"));
  return 0;
}




and HTML source code with no CSS that looks like

<pre><tt><i><font color="#9A1900">/*#g0 hi.c*/</font></i>
<b><font color="#000080">#include</font></b> <font color="#FF0000">&lt;stdio.h&gt;</font>
<b><font color="#000080">#include</font></b> <font color="#FF0000">&lt;stdlib.h&gt;</font>

<font color="#009900">int</font> <b><font color="#000000">main</font></b><font color="#990000">()</font>
<font color="#FF0000">{</font>
  <b><font color="#000000">printf</font></b> <font color="#990000">(</font><font color="#FF0000">"Hola %s.</font><font color="#CC33CC">\n</font><font color="#FF0000">"</font><font color="#990000">,</font> <b><font color="#000000">getenv</font></b><font color="#990000">(</font><font color="#FF0000">"USER"</font><font color="#990000">));</font>
  <b><font color="#0000FF">return</font></b> <font color="#993399">0</font><font color="#990000">;</font>
<font color="#FF0000">}</font>

</tt></pre>
which is easy to inline


Online Services

People allergic to Vim or the command line could use an online service to produce the HTML and store their snippets and just link to them. A few that rock:

pb.rbfh.de like in http://pb.rbfh.de/25y1ogkDJriCd

gist.github.com and public gists like this


CSS Containers used for the inline source code snippets at aLog.IPduh

The .code class

.code {
         font-size: 1em;
         padding: 0; margin: 0; 
         /*background: #F6F6F6; if yellow on white is hard to see */
         background: #FFFFFF;
         line-height: 20px;
         font-family: "Terminal" , "VT-100" , "System" , "monospace";
         /*width: 640px;*/ /*don't if you use a div hover pseudo class*/
         overflow:auto;
         border: 1px solid black;
         
}



The div container and the hover pseudoclass

div.div {
        z-index: 2; /*no cigar*/
        width:640px;
        overflow:auto;
        border: 1px solid black;
}

div.div:hover {
         z-index: 2;/*fails in most templates*/
         width:900px;
}


At aLog I use the .code class for sections of source code that are not very wide or I don't want them to expand on hover eg:

<pre class=code>
  
  source code snippet in html here

</pre>
.code may be used in div containers as well.

For sections of source code with long lines that I want to be expanded at hover I use the following scheme.

        
           
<div class='div'>
    <pre class='code'>
        source code snippet in html with wide lines that I want them seen oooooon hoooooover
     </pre>
</div> 


     


Javascript Source Highlighters

I would not use them in a blog or some code archive but I can see many cool uses for them.

One that I like is called SHJS, uses source-highlight language definitions and it is GNU licensed -- SHJS

My bad joke for the day

I am pretty sure that there is at least one emacs meta yoga finger exercise that HTMLifies source code while it takes out the trash and makes coffee.
But if you are an emacs user you already know it.

Hey, I love emacs users --If I was smarter I would use it too.




syntax highligted source code snippets in HTML