So, I searched for tools that can do this work for me and found 2 types of tools:
- Tools that take your code snippet and produce HTML that can be embedded into any blog post
- Tools that do this transformation at runtime, so the code snippet remains clear text.
The tools of the first type are often very flexible and support various color themes but have a serious disadvantage: they generate almost not editable HTML. If you want to change your code snippet you mostly have to regenerate its HTML representation. This also mean that you have to store your original snippet for future use, for example as a GitHub gist. It is not a show stopper but an obvious disadvantage.
The tools of the second type do their magic at runtime. The code snippet remains human readable. The injected java script runs when page is loaded and changes color of reserved words of the programming language used for the embedded code snippet.
The most popular and good looking syntax highlighter that I found is one created by Alex Gorbabchev.
Here is an example of code snippet highlighted by this tool:
public class MyTest {
@Test
public void multiply() {
assertEquals(4, 2* 2);
}
}
There are 2 things I had to do to make this magic happen:
Typically external resources (either scripts or CSS) are included by reference, i.e.
- Include several scripts and CSS files into HTML header
- Write the code snippet into <pre> tag with specific style:
public class MyTest {
@Test
public void multiply() {
assertEquals(4, 2* 2);
}
}
<script src='http://domain.com/path/script.js' type='text/javascript'></script> <link href='http://domain.com/path/style.css' rel='stylesheet' type='text/css'/>This works perfectly with Syntax highlighter scripts in stand alone HTML document but did not work when I added the scripts to the themes of my blog. Discovery showed that blogger.com for some reason changed absolute resource references to relative once, so they did not work. Instead of src="http://domain.com/path/script.js" that I have written the following appeared: src="//domain.com/path/script.js", i.e. the http is omitted.
So, I have downloaded all scripts to be able to put their source code directly as a body of tag <script>. For convenience and better performance I have minimized the scripts using one of online tools available in web. The code is available here. This code should be added to <head> of the HTML page.
Now I can enjoy the great syntax highlighter.
No comments:
Post a Comment