Using PrettyCSS with Geany

A tutorial how to install and use PrettyCSS with CSS file within Geany:

Installation

Ubuntu

We are going to run PrettyCSS via Node.js. Everything is available to install through Ubuntu apt-get.

1. Install Node.js & npm (Node Package Manager):

   $ sudo apt-get install nodejs npm
   

2. Install prettycss (via npm):

   $ sudo npm install PrettyCSS -g
   

Set Up

Setup up custom build command in Geany for CSS file:

• Make sure no project is opened (so that the settings will be applied globally)
• Open any CSS file (*.css)
• Go to menu Build > Set Build Commands
• At CSS Commands, click on the first "Set menu item label" button, type in "PrettyCSS"
• For the command, type in:
  • Ubuntu/Linux: prettycss -c /path/to/your/personal/prettycss.conf --ignore-all %f > /tmp/prettycss.css && cp /tmp/prettycss.css %f && geany %f
• For the working directory, type in %d
• OK to apply and close the setting window

Here is a demo configuration file for PrettyCSS. You can put it in ~/.config/prettycss.conf for example.

Usage

From now you can run PrettyCSS on opening CSS file by clicking the Compile button on menu bar OR go to Build > PrettyCSS OR press F8. The current file will be prettified, saved to disk and a prompt will ask you if you want to reload the file to see changes.