Sunday, October 31, 2010

syntax highlight with gist

Another much simpler way to add syntax highlight is using gist, which is a github tool to share code snippets. Each gist is basically a git repository that is versioned and forked. Syntax highlight happens to be a feature of it.

Simple head over to http://gist.github.com/, paste your code snippet there and select the language, then select "create public gist". On the next page, click on "embed" and it becomes a JavaScript snippet. Just embed it in your page and you are done!

No need to change Blogger template and no need to understand the configuration and syntax of SyntaxHighlighter ;-)

Here is a quick example:

<html>
<head>
<title>Equality</title>
<script type = "text/javascript">
var x = 42;
var y = "42";
if (x ===y) {
document.write("x is equal to y with a strict test.");
} else {
document.write("x is not equal to y");
}
</script>
</head>
<body>
</body>
</html>
view raw gistfile1.html hosted with ❤ by GitHub

2 comments:

  1. I am having tough time having to get syntax highlighting work. I posted a java gist here - https://gist.github.com/1399748 but it looks all black text. How did you get color highlight in your case?

    ReplyDelete
  2. Hi, Tarun

    I guess you forgot to specify the "Language" when you create the gist and instead used the default plain text?

    Another option is that you can also give a file name like foo.java and the syntax will be automatically detected.

    Here is the gist with your code: https://gist.github.com/1403646

    ReplyDelete