SyntaxHighlighter w blogerze

Blogger niestety nie ma w standardzie opcji kolorowania składni różnych języków programowania. Jedną z najbardziej znanych bibliotek do kolorowania składni jest SyntaxHighlighter.
Aby skonfigurować bloggera należy :

1. Przejść do edycji szablonu html bloggera.
2. Tuż przed tagiem </head> dodaj następujący kod :

<link href='http://alexgorbatchev.com/pub/sh/current/styles/shCore.css' rel='stylesheet' type='text/css'/> 
<link href='http://alexgorbatchev.com/pub/sh/current/styles/shThemeDefault.css' rel='stylesheet' type='text/css'/> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js' type='text/javascript'/> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCss.js' type='text/javascript'/> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushBash.js' type='text/javascript'/> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJava.js' type='text/javascript'/> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJScript.js' type='text/javascript'/> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPlain.js' type='text/javascript'/> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushSql.js' type='text/javascript'/> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js' type='text/javascript'/> 
<script language='javascript'> 
SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.config.clipboardSwf='http://alexgorbatchev.com/pub/sh/current/scripts/clipboard.swf';
SyntaxHighlighter.all();

Dzięki tym dwóm prostym krokom SyntaxHiglighter jest zainstalowany. Aby tekst był kolorowany należy umieścić go między tagami <pre></pre> z odpowiednią klasą która zależna jest od typu kodu który chcemy pokolorować.

Np. kolorowanie pliku javy wymaga dodania klasy brush: java :

<pre class="brush: java">
package com.foo.server.guice;

import java.io.IOException;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

public class HelloWorld extends HttpServlet {

private static final long serialVersionUID = 5702245225774030773L;

@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp)
throws ServletException, IOException {
resp.getWriter().println("Hello world");
super.doGet(req, resp);
}

}
</pre>

Rezultat :

package com.foo.server.guice;

import java.io.IOException;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

public class HelloWorld extends HttpServlet {

 private static final long serialVersionUID = 5702245225774030773L;

 @Override
 protected void doGet(HttpServletRequest req, HttpServletResponse resp)
   throws ServletException, IOException {
  resp.getWriter().println("Hello world");
  super.doGet(req, resp);
 }

}

Do wklejania kodu do bloggera można skorzystać z HTML Encoder

Ja dodałem jeszcze tuż przed linią kończącą definicję css skórki czyli ]]></b:skin>
następujący wpis

.overflow-auto {
 overflow: auto;
} 

oraz skonfigurowałem domyślne ustawienia SyntaxHighlighter'a aby dodawał tą klasę automatycznie.

SyntaxHighlighter.defaults['class-name'] = 'overflow-auto';
SyntaxHighlighter.all();

Dzięki temu jeśli kolorowana zawartość nie mieści się w szerokości kolumny (pomimo ustawienia wrap-lines na true), można zawartość przewijać suwakami.