Vim Syntax Highlighting For Google Gadgets

I started developing Google Gadgets for LabPixies, so one of the first thing I looked for was syntax highlighting. Vim recognized the gadgets’ code as XML file (which is correct), but I wanted also HTML syntax highlighting for the HTML part. So after searching a bit for some existing solution, I found one, but I didn’t like as it required me to wrap the HTML code with a specific comment. As I don’t like this kind of solution, I’ve decided to create my own syntax highlighting file for Vim.

Save the following code under ~/.vim/syntax/google_gadgets.vim:

" Vim syntax file for Google gadgets module files.
" Maintainer: Guy Rutenberg <>
" Last Change: 2008 Mar 28

:syntax clear

runtime! syntax/xml.vim

unlet b:current_syntax
:syntax include @HTML syntax/html.vim
:syntax region HTMLcode matchgroup=CDATA start=/<Content\s\+type="html"\s*>\_s*<!\[CDATA\[/ end=/\]\]>\_s*<\/Content>/ contains=@HTML

syn keyword javaScriptReserved _IG_Prefs getString getInt getBool getArray set setArray dump _IG_FetchContent _IG_FetchXmlContent _IG_FetchFeedAsJSON _IG_RegisterOnloadHandler _gel _gelstn _esc _unesc _trim _uc _min _max _hesc _args _toggle _IG_GetImage _IG_GetCachedUrl
let b:current_syntax = "google_gadgets"

And add the following line to your .vimrc

au BufRead <google_gadgets> runtime! syntax/google_gadgets.vim

The current syntax highlighting will highlight the XML part as XML, and if your gadget contains an HTML part, it will highlight it too (including CSS and JavaScript). I’ve also registered the core JavaScript library of the Google Gadgets API as JavaScript keywords so they will get highlighted too.

The line you added to the .vimrc file will automatically load the syntax highlighting for files of type google_gadgets. While this file type isn’t automatically detected, you can easily set one by typing :set filetype=google_gadget.

Tip: If you want some file to always be detected as google_gadget add the following modeline to it:

<!-- vim: set filetype=google_gadgets : -->

(you got to have modelines enabled for this to work).

Some things are still missing, such as highlighting for all the keywords and methods of the API, and automatic file type detection. I plan to address those issue as time will permit me. If you think I’ve left out some important functionality that should belong with this code, please comment or contact me.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.