The task is - I have sources in html, java and bash and I want to publish it here with pretty syntax highlighting.
The first way is using external tool http://tohtml.com/. This very simple online painter which supports many languages and colore scheme nevertheless. You send to it your source and get html which can be inserted (partially for most of us I suppose :) into blogger editor. There are some examples:
shell script (navy style):
... function getTempDir(){ #generate new name tempDir="${tmpPlace}/${RANDOM}" while [ -d "${tempDir}" ] ; do tempDir="${tmpPlace}/${RANDOM}" done echo "${tempDir}" } ...
java (black style):
import org.apache.commons.logging.Log; import org.apache.commons.logging.LogFactory; public class Main { /** * @param args */ public static void main(String[] args) { Log log = LogFactory.getLog(Main.class); log.debug("Test"); } }
html (eclipse style). Please pay attention to the sources was too long and last string is cutted (Actually it was cutted in old template. Now it is draw over right panel). Later we will see how it can be fixed.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>~/work/projects/dbProto/src/com/nicksoft/tests/Main.java.html</title> <meta name="Generator" content="Vim/7.1"> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> </head> <body bgcolor="#ffffff" text="#000000"><font face="monospace"> <br> <font color="#ff40ff">import</font> org.apache.commons.logging.Log;<br> <font color="#ff40ff">import</font> org.apache.commons.logging.LogFactory;<br> <br> <font color="#00ff00">public</font> <font color="#00ff00">static</font> <font color="#00ff00">void</font> main(String[] args) {<br> ...
The second way use VIM editor. It has command :TOhtml which produces HTML code for current buffer. You also can copy and paste it into blogger editor. A lot of people use this method usually with some modifications. For example as you can see here author defines special class for pre tag. As far as I know the pre-formatted by VIM html is just inserted by him into "pre" section with mentioned class. Bellow you can find my example or look at http://konishchevdmitry.blogspot.com for better then my formatted variants:
import org.apache.commons.logging.Log;
import org.apache.commons.logging.LogFactory;
......
public static void main(String[] args) {
Log log = LogFactory.getLog(Main.class);
log.debug("Test");
}
In this moment when I look at the post in my editor I see a lot of html code which was produced by the previous two approaches. Unfortunately I don't know html well enough and if I will want to change something in my scripts (let's imagine these was real code examples) then I have really trouble with finding needing place. From other hand if we can redefine pre tag why someone cannot write css/js library for us? And I've found at least two libraries - syntaxhighlighter and google-code-prettify.
The first library has complete documentations at wiki section (including SyntaxHighlighter alternatives which is very close to this post and making it almost unnecessary :). So I'll describing how can be used the second one. The main idea can be found here.
In my case I've inserted in my template before </head> tag:
<link href='http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.css' rel='stylesheet' type='text/css'/> <script src='http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.js' type='text/javascript'/>
and change <body> to <body onload='prettyPrint();'>. From this moment I can just add
<pre class="prettyprint">
...
function getTempDir(){
#generate new name
tempDir="${tmpPlace}/${RANDOM}"
while [ -d "${tempDir}" ] ; do
tempDir="${tmpPlace}/${RANDOM}"
done
echo "${tempDir}"
}
...
</pre>
to my post text and have the following at your screen:
...
function getTempDir(){
#generate new name
tempDir="${tmpPlace}/${RANDOM}"
while [ -d "${tempDir}" ] ; do
tempDir="${tmpPlace}/${RANDOM}"
done
echo "${tempDir}"
}
...
"Pretty print" try to gess what laguage was used but you can define it:
<pre class="prettyprint lang-bash">
(more details you will find here)
When we want to publish html or xml example we have to use html-escapes. I've found txt2html is good enough for my purposes:
$ txt2html --extract --nomake_links <fileName>
You also can use attribute style="overflow: auto;" in pre tag for too long piece of text. The following html example was produced by VIM from java code and published here with using txt2html into <pre class="prettyprint" style="overflow: auto;">...</pre> tags:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>~/work/projects/dbProto/src/com/nicksoft/tests/Main.java.html</title>
<meta name="Generator" content="Vim/7.1">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
</head>
<body bgcolor="ffffff" text="000000"><font face="monospace">
<br>
<font color="ff40ff">import</font> org.apache.commons.logging.Log;<br>
<font color="ff40ff">import</font> org.apache.commons.logging.LogFactory;<br>
<br>
<font color="#00ff00">public</font> <font color="#00ff00">static</font> <font color="#00ff00">void</font> main(String[] args) {<br>
...
No comments:
Post a Comment