SyntaxHighlighter integration in Blogger.com

In a earlier blogpost, we've talked about using SyntaxHighlighter to make your programming code snippets more readable on your web pages. This blogpost will integrate SyntaxHighlighter into a blog hosted on blogger.com (like this blog).

Simply said, SyntaxHighligther is a set of JavaScript/CSS files you have to include on your webpage. You can host it on your private server, or you can use the scripts already online. I linked to the files in the online SVN repository of SyntaxHighlighter: http://syntaxhighlighter.googlecode.com/svn-history/trunk/.

The first step is to edit the HTML template of your blog. Starting from your dashboard, go to Design and then Edit HTML. This will present a page where you can edit the template. Scroll to the end of the code, paste the following piece of code just before the </body>-tag:

<!-- START SyntaxHighlighter -->
<link href='http://alexgorbatchev.com/pub/sh/2.1.364/styles/shCore.css' rel='stylesheet' type='text/css'/> 
<link href='http://alexgorbatchev.com/pub/sh/2.1.364/styles/shThemeDefault.css' rel='stylesheet' type='text/css'/> 
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shCore.js' type='text/javascript'></script> 
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushCpp.js' type='text/javascript'></script> 
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushCSharp.js' type='text/javascript'></script> 
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushCss.js' type='text/javascript'></script> 
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushJava.js' type='text/javascript'></script> 
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushJScript.js' type='text/javascript'></script> 
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushPhp.js' type='text/javascript'></script> 
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushPython.js' type='text/javascript'></script> 
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushRuby.js' type='text/javascript'></script> 
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushSql.js' type='text/javascript'></script> 
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushVb.js' type='text/javascript'></script> 
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushXml.js' type='text/javascript'></script> 
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushPerl.js' type='text/javascript'></script> 
<script language='javascript'> 
SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.config.clipboardSwf = 'http://alexgorbatchev.com/pub/sh/2.1.364/scripts/clipboard.swf';
SyntaxHighlighter.all();
</script>
<!-- END SyntaxHighlighter -->

This piece of code will load the SyntaxHighlighter files, and update the markup of your code snippets enclosed by <pre> or <textarea>. Before it works, you have to mark them as code by supplying the following attributes to the mentioned two tags, like this:

<pre class="java" name="code"> ... </pre>

I have not included every syntax file available. If you need support for other programming languages, you have to extend the JavaScript code above to include them. The available scipts can be found here: http://syntaxhighlighter.googlecode.com/svn-history/trunk/Scripts/

Piwik - Web Analytics

Piwik is the open source alternative to Google Analytics. It's a GPL-licensed, real time web analytics software run on PHP and MySQL. It's not a SAAS (Software As A Service), so you have to download and install it on your own webserver.

The installation takes about five minute to complete. At the end, a JavaScript code is generated, which you need to include in the page you want to track.

For more information: http://piwik.org

WebScarab

WebScarab is a tool created by OWASP that can be used to analyze the HTTP(S) traffic between your browser and the web server. In order to intercept traffic, you have to configure WebScarab as a proxy server in your browser. Whenever a request is send to the web server by your browser, WebScarab intercepts the request and holds it for reviewing or even modifying before actually sending the request to the web server. The complete request can be analyzed in all its detail, which includes HTTP headers.



It's a great tool for debugging complex problems or reviewing the security of your applications. Download WebScarab here.

SyntaxHighlighter

I have a colleague, who is always monitoring 2392 blogs, 503 RSS-feeds, and 3922 websites. So he doesn't miss out on the little things that make life or work just a little bit more efficient. His laptop and PC have over 293 little tools installed, which enables him to get his work done three clicks faster than the regular guy. He is Tool Man Tony.

Yesterday, he forwarded me an e-mail notification of one of his (many) RSS-feeds, which drew my attention. It was a blog post about a syntax highlighter tool, like the one found in your favorite IDE (Integrated Development Environment). But this one is different. This one is meant for highlighting code in web pages.

The tool is called SyntaxHighlighter. It's basically JavaScript files you can include in your blog or website to highlight code fragments, which make your code much more readable. Additionally, it can also number the lines of your code fragments automatically. All of this happens client-side. A screenshot of highlighted code:



SyntaxHighlighter supports most popular programming languages. The complete list of supported languages can be found here.

Installing and using SyntaxHighLighter is easy, and consists of the following basic steps:

1. Download the installation files here.
   
2. Extract the files and include them to your web page: shCore.js and shCore.css.
   
3. Add brushes (syntax files) for the languages you want to highlight.
   
4. Use <pre> or <script> tags to enclose your code fragment.
   
5. Call the JavaScript method SyntaxHighlighter.all() to invoke SyntaxHighlighter.
   

As you can see, SyntaxHighlighter is loosely coupled to your web page, and is very easy to use.

Thanks Tool Man Tony for the tip!

Official SyntaxHighlighter site: http://alexgorbatchev.com/SyntaxHighlighter/

Setting response MIME-type in Java ServerFaces

To set the MIME-type in JSF, use the following code in your JSP-page:

<% response.setContentType("text/plain"); %>

In this example, the MIME-type is set to plain text. The browser will treat the page as plain text and will not render the page as a HTML-page.

Here is a list of common MIME-types.

Sending HTML email with images with JavaMail API

In this post, I will build on the previous post about sending attachments with JavaMail. We will send HTML-formatted email with images that we include as attachments with the email. The protocol also allows to link to images on a webserver, but because spammers use this method to validate working email addresses, most email clients block external images.

The main idea is to include images as attachments like we did before, but now we also include a content-id per image we attach. Use HTML-code to format our email and use the cid: prefix along with the content-id in the src-attribute of the img-tag to refer to the image attachment.

The example code:

// Create new message with mail session.
Message message = new MimeMessage(session);

// Create multipart message.
MimeMultipart multipart = new MimeMultipart();

// Create bodypart.
BodyPart bodyPart = new MimeBodyPart();

// Create the HTML with link to image CID.
// Prefix the link with "cid:".
String str = "<html><h1>Hello</h1>" +
            "<img src=\"cid:image_cid\"></html>";

// Set the MIME-type to HTML.
bodyPart.setContent(str, "text/html");

// Add the HTML bodypart to the multipart.
multipart.addBodyPart(bodyPart);

// Create another bodypart to include the image attachment.
bodyPart = new MimeBodyPart();

// Read image from file system.
DataSource ds = new FileDataSource("C:\\images\\image.png");
bodyPart.setDataHandler(new DataHandler(ds));

// Set the content-ID of the image attachment.
// Enclose the image CID with the lesser and greater signs.
bodyPart.setHeader("Content-ID", "<image_cid>");

// Add image attachment to multipart.
multipart.addBodyPart(bodyPart);

// Add multipart content to message.
message.setContent(multipart);

// Now set the header and send the email.
...

Must-have Firefox plugins

Firebug

This is probably the best plugin for web developers. It allows you to edit, debug, and monitor CSS, HTML, and JavaScript LIVE in any web page. You can hover with your mouse over the page and click any element on the page for inspection. The corresponding HTML-code will be displayed.

Web Developer

This is also a great plugin for web developers. Almost just as useful as Firebug. It adds a toolbar to your browser to access various web development tools. The tools include tools to manage: redirection, cookies, CSS, Forms, Image, and more... Great to be used together with Firebug.

Fasterfox Lite

This addon allows you to easily tweak many network and rendering settings to improve the browsing speed of your browser. When installed, a little timer is displayed on the bottom of the browser to measure page load time, which is very useful to get a sense of the performance of the site.

HTML Validator

This addons adds HTML validation capabilities to your browser. The number of errors will be displayed in the status bar of the browser as an clickable icon. Click to icon to view the source of the page. The errors will be high-lighted.

HttpFox

This addon is great for monitoring or debugging the traffic between the web server and browser. It can show: request and response headers, cookies, querystring GET/POST parameters, and response body.

IE Tab 2

This addon can be used to use the IE rendering engine in a Firefox tab. Useful for testing IE-browser compatibility.

JSView

This addon makes it much easier to view the source code of external JavaScript of CSS files linked from the web page. You can access them from the context menu, from the toolbar, from the view menu, or from the status bar.

Vacuum Places Improved

This addon defragments the Firefox URL database, which reduces the lag while typing an URL in the address bar. It also reduces start-up time of the browser.

Adblock Plus

Tired of advertisements in web sites? This addon can help you block commercial banners and even video commercials that preceed the actual video you want to see.

Easy Youtube Video Downloader

This addon adds additional direct download buttons to YouTube, which makes it possible to download the video in: FLV, 3GP, MP3, MP4, 720p HD and 1080 Full-HD formats. Perfect for saving the video locally.

Google Maps API

As a joke, I used Google Maps on the company's intranet to show where I was in real-time. This blog post will show you how it's done with the Google Maps API V3. The complete documentation of the API can be found here.

With Google Maps API you can create custom Google Maps applications that can include:

• Custom overlays
  
• Geocoding (translating place names to world coordinates and plot them or other way around)
  
• Showing user photos
  
• Street view
  
• Plotting directions to a coordinate
  

First, create or use an existing HTML-page to include the following lines of code in the HTML-header:

<meta name="viewport"
 content="initial-scale=1.0,
 user-scalable=no" />
<script type=\"text/javascript\"
 src="http://maps.google.com/maps/api/js?sensor=false"></script>

This will enable us to use the Google Map API. The first line specifies that the map should be displayed full-screen and that the user is not allowed to be resize the map. The second line loads the API. The sensor parameter is set to false, because we don't have a sensor to track the user's current location.

Second we create the initialization code in JavaScript. This fragment will load and draw the map. You can put the code in the HTML-header or in a separate file. The code is explained as comments.

<script type="text/javascript">

  function initialize() {
    // Our location.
    var latlng = new google.maps.LatLng(51.999018,4.374168);

    // Map display options.
    var myOptions = {
      zoom: 15,
      center: latlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };

    // The map object, which has to displayed in the div with
    // id="map_canvas".
    var map = new google.maps.Map(
      document.getElementById("map_canvas"),
      myOptions
    );

    // This is the URL to a small picture of me, which is used
    // as marker on the map.
    var myPicture = 'me.jpg';

    // Create the Marker object to be drawn on the map.
    // Use the coordinates and picture defined earlier.
    var chengMarker = new google.maps.Marker({
      position: latlng,
      map: map,
      icon: myPicture
    });

    // Only display the whole map during office hours
    // to increase realism.
    var d = new Date();
    if (d.getHours() < 10 || d.getHours() > 18) {
      var m = document.getElementById('map_canvas');
      //m.style.display = 'none';
    }
  }

</script>

Finally, we create a <div> with id="map_canvas" that will contain the map. Don't forget to put the initialization function in the onload-attribute, so the browser will initialize and draw the map when the page is fully loaded.

<body onload="initialize()">
  <div id="map_canvas" style="width: 600px; height: 250px"></div>
</body>

Online HTML escape tool

Does anyone know if there's a way to escape HTML-characters automatically when blogging on Blogspot?

I am currently using http://htmlescape.net/htmlescape_tool.html to escape code before posting on this blog.