Skip to main content

Making Code Samples Readable Online

After lazily just pasting code in <pre> blocks for years, this morning I finally got around to researching a code highlighter like you see on almost all the programming websites.

Thanks to SyntaxHighlighter adding this feature was embarrassingly easy. It is self-contained javascript that works on a pre or script tag decorated with a html class calling a brush alias, e.g.
<pre class="brush: sql">
   INSERT INTO MyWebsite (pre, script)
      VALUES (complete, awesomeness)
</pre>

Oh, but it's not just SQL, no there's a whole easel of brushes included:
Brush name
Brush aliases
File name
ActionScript3
as3, actionscript3
shBrushAS3.js
Bash/shell
bash, shell
shBrushBash.js
C#
c-sharp, csharp
shBrushCSharp.js

C++
cpp, c
shBrushCpp.js
CSS
css
shBrushCss.js

Delphi
delphi, pas, pascal
shBrushDelphi.js
Diff
diff, patch
shBrushDiff.js

Groovy
groovy
shBrushGroovy.js
JavaScript
js, jscript, javascript
shBrushJScript.js

Java
java
shBrushJava.js
JavaFX
jfx, javafx
shBrushJavaFX.js

Perl
perl, pl
shBrushPerl.js
PHP
php
shBrushPhp.js

Plain Text
plain, text
shBrushPlain.js
PowerShell
ps, powershell
shBrushPowerShell.js

Python
py, python
shBrushPython.js
Ruby
rails, ror, ruby
shBrushRuby.js

Scala
scala
shBrushScala.js
SQL
sql
shBrushSql.js

Visual Basic
vb, vbnet
shBrushVb.js
XML
xml, xhtml, xslt, html, xhtml
shBrushXml.js



Steps to install Syntax Highlighter
  1. Go to http://alexgorbatchev.com/wiki/SyntaxHighlighter and download the source code
  2. Upload the source code to somewhere accessible on the internet, note the url
  3. Follow the installation instructions for blogger available here http://geektalkin.blogspot.com/2009/11/embed-code-syntax-highlighting-in-blog.html (general installation and usage here http://alexgorbatchev.com/wiki/SyntaxHighlighter:Usage).
  4. Was it good for you? Send Alex a beer.

Thanks Alex! I sent you enough to cover a pizza.

Comments

Popular posts from this blog

Auto Format (and Color) Outlook Appointments

A few years ago I got turned on to the idea of indexing your life by color. In a quick glance your mind can comprehend really complex patterns. By coloring entries in my calendar I am able to tell immediately if I am available or if a future appointment conflicts with a work meeting. There are a number of ways to set this up. Outlook allows you to add a label to every appointment. However this is an Outlook specific feature and I sync my calendar across Outlook, Yahoo! and iCalendar. The later two don't even have labels. Besides, calendars should be simple. Complexity only hinders usability, so I prefer an automated solution. How to color appointments in Outlook automatically: In Calendar, right-click the calendar grid, and then click Automatic Formatting on the shortcut menu. Click Add, and then type a name for the rule. In the Label list, click a color. Click Condition to specify the conditions under which the color will be applied. Note: If you manually assign a color to a

Attachment Reminder - and more for MS Outlook

I just did it again. We don't like to admit it, but we all have. You write a long letter describing the attachment, press send and then 10 seconds later remember you didn't actually attach the message. I finally decided to do something about it. Turns out it isn't too hard. Chiefly because Jimmy Peña at Code for Excel and Outlook already did all the hard work of writing up an excellent MS Outlook Etiquette Check Macro that does all the dirty work for you. What's left for you to do? In MS Outlook go to Tools > Macros > Visual Basic Editor Under the Project Panel (far left) Browse to Project1 > Microsoft Office Outlook Objects > ThisOutlookSession Double-click ThisOutlookSesson to Open (if you haven't been here before this will be a big blank canvas) Visit Code for Excel and Outlook Etiquette Check Code and select "Copy to Clipboard" at the top of the code. Or you can also copy from the code I've modified below if you prefer.

Simple HTTP Redirect with Querystring in IIS7

HTTP Redirect seems simple enough. Always was in IIS6 and in IIS7 there's even a button labeled HTTP Redirect that promises relative redirects.  It looks like it'll be as easy Apache finally.  That is until you try to redirect a querystring.  Then everything bombs. Turns out it still is relatively easy, except you have to know that Microsoft changed $S$Q to $V$Q. Why? $Ss and $Gs I suspect. And How. In our example we'll redirect all pages under http://olddomain.com/content to http://mydomain.com/content. Pick the virtual directory you want to redirect. e.g. http://olddomain.com/content Click HTTP Redirect under IIS in the IIS management console. In the HTTP Redirect Dialog: Check Redirect requests to this destination Enter your new path ending with $V$Q.  e.g. http://mydomain.com$V$Q Counter-intuitively check Redirect all request to exact destination (instead of relative destination) Choose the appropriate Status Code (Permanent or Temporary)