Sunday, 9 October 2011

Syntax Highlighting Objective C code on your blog

Update: 2nd January 2016 The Objective C brush no longer works easily, haven't managed to fix it so for this blog have changed all Objective C snippets to use the C++ (cpp) brush.

Syntax highlighting code in your blog posts is a great way to increase the visibility and readability of your posts. Since I have been working with Objective C a lot nowadays and hope to spit out a lot of blog posts about developing using Objective C and Cocoa Touch I went ahead and set up syntax color highlighting for the code snippets. Here's how you can do it for yourself on Google's Blogger (blogspot).

You need to install Syntax Highlighter for blogger. Syntax Highlighter comes with brushes for different languages, Objective C however is not one of them. An open source Objective C brush written by Scott Densmore is what I use. Add this brush to your Syntax Highlighter brush collection. Using this brush is similar to how you would use any Syntax Highlighter brush. Here's an example.
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {    
    
    // Override point for customization after application launch.
    
    // Converting RGBA color for use with UIColor
    UIColor *colorFromRgba = [UIColor colorWithRed:23/255.0f green:45/255.0f blue:145/255.0f alpha:1];
    NSLog(@"converted rgba color is: %@", colorFromRgba);
                             
    [self.window makeKeyAndVisible];
    
    return YES;
}
Basically you include your code segments inside a pre block and set its (CSS) class to the Objective C brush. The above snippet, for example, was created with the following

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {    
    
    // Override point for customization after application launch.
    
    // Converting RGBA color for use with UIColor
    UIColor *colorFromRgba = [UIColor colorWithRed:23/255.0f green:45/255.0f blue:145/255.0f alpha:1];
    NSLog(@"converted rgba color is: %@", colorFromRgba);
                             
    [self.window makeKeyAndVisible];
    
    return YES;
}

8 comments:

  1. Hello Anuj,
    I tried adding it to my blog ,but its not working ,can you explain these steps in detail please.

    ReplyDelete
  2. What part isn't clear ? Did you get the default syntax highlighter brushes working alright ?

    ReplyDelete
  3. The thing is,neither I am able to link Objbrush in template's html nor able to fetch the code in pre tag..
    From where can I objective C brush to my code ?
    I hope you got my question..

    ReplyDelete
  4. I'm not sure what you mean but you need to include the Obj C (and other brushes) in your templates html file. This is under Design -> Template -> Edit HTML (or something similar) in blogger. Here is what mine looks like (inside the head tag) :

    <!-- added by anuj seth, 20 Feb 2010, for using syntax highlighter -->
    <!-- added objc brush by scott densmore, anuj seth 4th july 2011 -->
    <!-- moved sh to head tab, anuj seth 5th july 2011 -->

    <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 language='javascript' src='http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js'/>
    <script language='javascript' src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJScript.js'/>
    <script language='javascript' src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCpp.js'/>
    <script language='javascript' src='http://pathtoyourobjcbrushhere/syntaxhighlighter_withobjc/shBrushObjC.js'/>
    <script language='javascript' src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushBash.js'/>
    <script language='javascript' src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPython.js'/>
    <script language='javascript' src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPhp.js'/>
    <script language='javascript' src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPerl.js'/>
    <script language='javascript' src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJava.js'/>
    <script language='javascript' src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCSharp.js'/>
    <script language='javascript' src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPlain.js'/>
    <script language='javascript' src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCss.js'/>
    <script language='javascript' src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js'/>
    <script type='text/javascript'>
    SyntaxHighlighter.config.bloggerMode = true;
    SyntaxHighlighter.config.clipboardSwf = &#39;http://alexgorbatchev.com/pub/sh/current/scripts/clipboard.swf&#39;;
    SyntaxHighlighter.defaults[&#39;wrap-lines&#39;]=false;
    SyntaxHighlighter.allundefined);
    </script>

    ReplyDelete
  5. http://pathtoyourobjcbrushhere/syntaxhighlighter_withobjc/shBrushObjC.js for objective C brush.
    Well one of my issue is at this line,as there is no web url for this file .

    ReplyDelete
  6. HI anuj,i am not able to get the javascript file of shBrushObjC.js.Is there any URL to fetch the file globally ,like other file available from http://alexgorbatchev.com

    ReplyDelete
  7. You need to upload it somewhere, a server you have perhaps.

    ReplyDelete
  8. Hey,i did it ,thank you.
    One last question,how to remove small green question mark that is appearing on my code at top right side ?

    ReplyDelete