HOWTO: Hack a makeshift CSSTidy plugin for Notepad++
January 22, 2009


You say you’d like to right-click on the stylesheet you’re editing in Notepad++ and run it through CSSTidy, and that you also need a corresponding keyboard shortcut? Do you have three minutes?

Download CSSTidy to your Notepad++ program directory. If you’re not running the portable version, you’ll need to be Administrator to place csstidy.exe under %PROGRAMFILES%\Notepad++.

Next, edit your shortcut settings file, found at %USERPROFILE%\AppData\Roaming\Notepad++\shortcuts.xml, by adding this line under ‘User Defined Commands’:

<Command name=”Run CSSTidy on File” Ctrl=”yes” Alt=”yes” Shift=”yes” Key=”67″>$(NPP_DIRECTORY)\csstidy.exe &quot;$(FULL_CURRENT_PATH)&quot; &quot;$(FULL_CURRENT_PATH)&quot;</Command>

This adds a ‘Run CSSTidy on File’ entry to your menubar, under ‘Run’, and also assigns it the keyboard shortcut Ctl+Alt+Shift+C. You can also add it to your right-click menu by adding this line to your contextMenu.xml file (which you’ll find in the same directory as shortcuts.xml), within the ‘Scintilla Context Menu’ node:

<Item MenuEntryName=”Run” MenuItemName=”Run CSSTidy on File”/>

In your Notepad++ settings, under the ‘MISC’ tab, make certain you have Notepad++ set to update files automatically, as well as silently, and that ‘Scroll to the last line after update’ is checked. This provides some confirmation that your file was modified outside of the editor. As we’re providing CSSTidy with the same filename for both input and output, the file will be quietly overwritten and reloaded in Notepad++.

Also, make sure you’re editing your Notepad++ settings files with something other than Notepad++. For editing XML, I like Microsoft’s free XMLNotepad.

For an online CSS optimizer/compressor that makes use of the PHP version of CSSTidy, try CleanCSS or CSS Portal.