Skip to content. | Skip to navigation

Sections
Personal tools
You are here: Home / Users / Bahman Movaqar / Site Admin Stuff / Syntax Highlighting On This Website
About Me

Programming has always been one my favourites and I deeply enjoyed system programming until I came to know about this ERP thing.  Since then my focus in programming has been on finding ways to develop business applications more efficiently.

 

I blog on http://BahmanM.com.

 

Syntax Highlighting On This Website

As a website for programmers it is necessary to provide users with some kind of syntax highlighting mechanism.

Dictator's Note

Syntax highlighting on the client-side is usually slow and limited in number of languages it supports and requires the website's templates to be modified. So as the administrator of this website, I have benevolently decided to disable client-side highlighting at all.  But there's a solution which is based on Pygemnts and a Bash script.

 

With this approach over 70 languages are supported and you can choose among 18 colouring styles. Also line numbering is included.

 

How To?

First install python-setuptools on your system and install Pygements ($ easy_install Pygments). Then Grab the synhi Bash script I've written and put it somewhere in your path.

Now suppose you wish to syntax highlight the file bootstrap.py. All you need to do is invoke synhi like this: $ synhi -i bootstrap.py -n > t.html, open t.html, copy its full contents and paste it into your page.

 

Note: Before pasting make sure to switch to "Source" view by clicking on the "Source" button on the editor's toolbar.

 

Example

The following is the source of synhi highlighted by $ synhi -i synhi.sh -n -s tango > t.html. Don't forget to take a look at synhi's help (synhi -h or synhi --help).

Note: I had to rename a copy of synhi to synhi.sh because right now synhi doesn't allow you pass any language option to Pygments.  As a result Pygments has to guess the language by the file extension. I'll fix this in synhi later.

 

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
#!/bin/bash
# Author:  Bahman Movaqar (Bahman [AT] BahmanM.com)

# Read options from command line.
# i = input file
# s = pygment style
# n = line numbers
# h = help
#
cd `pwd`
LINE_NO=
STYLE='emacs'
TEMP=`getopt -o i:s:nh \
--long input:,style:,with-line-no,help -n 'Syntax Highlighter' -- "$@"`
if [ $? == 1 ] ; then echo "ERROR: parsing options." >&2 ; exit 1 ; fi
eval set -- "$TEMP"

while true ; do
	case "$1" in
		-i|--input) INPUT="$2" ; shift 2 ;;
		-s|--style) STYLE=$2 ; shift 2 ;;
		-n|--with-line-no) LINE_NO=',linenos=1' ; shift ;;
		-h|--help)
			echo 'Syntax highlights a file and prints the result to stdout.' ;
			echo '-i --input : the file to be highlighted' ;
			echo '-s --style : highlight style which defaults to "emacs" \
(monokai/manni/perldoc/borland/colorful/default/murphy/vs/trac/tango/ \
fruity/autumn/bw/emacs/vim/pastie/friendly/native' ;
			echo '-n --with-line-no : include line numbers (defaults to FALSE)' ;
			echo '-h --help : Show this help' ;
			exit 0 ;;
		--) shift ; break ;;
		*) exit 1 ;;
	esac
done

if [ ! $INPUT ] ; then
	echo "ERROR: Please specify the input file." >&2 ;
	exit ;
fi

if [ ! -e $INPUT ] ; then
	echo "ERROR: Input file does not exist." >&2 ;
	exit ;
fi

START="echo -e <!-- ***CODE BLOCK*** -->\n"
END="echo -e <!-- ***END OF CODE BLOCK*** -->\n"
PYGMENT="pygmentize -f html -O full,style=${STYLE}${LINE_NO} $INPUT"
TAIL="tail -n +8"
SED_CMD1='-e s/body  \{ background/table.highlighttable\{border-radius:4px;width:90%;margin-left:14px;background/'
SED_CMD2='-e s/td.linenos \{/td.linenos\{text-align:right;/'
SED_CMD3='-e s/pre \{/pre\{margin:0;background-color:\#f0f0f0;color:black;/'
SED_CMD4='-e s/(<\/head>)|(<body>)|(<\/body>)|(<h2>)|(<\/h2>)|(<\/html>)//g'

$START
$PYGMENT | $TAIL | sed -r "$SED_CMD1" "$SED_CMD2" "$SED_CMD3" "$SED_CMD4"
$END