Hmm, perhaps it isn’t that obvious, but in Nova (as well as many other code editors and some IDEs) there is a clear separation between ‘theme’ (what colour palette is available) and ‘syntax highlighting’ (i.e. identifying all keywords, assigning meaning to the symbols/letter sequences, figure out the difference between ‘third-party extensions’ and official ones, and so forth).
Unless I totally misunderstand your question, what you wish is basically to change your programming language’s features so that things are rendered differently, i.e. making a clear separation between (
, {
and [
for instance, as opposed to grouping them all together in the over-arching classification of, well, ‘brackets’.
This can certainly be done, of course, since you can pretty much install your own programming language syntax highlighter. A few — like the one you appear to be using for CSS — are pre-installed and are maintained by Panic themselves (e.g. HTML, CSS, PHP, and a few more). Nevertheless, the language files are stored in your system, and they can be copied, modified, and added (with a slightly different name, of course) as a new ‘extension’.
You can take a look at how Panic does the CSS formatting by taking a look at their own CSS extension. It is located on /Applications/Nova.app/Contents/SharedSupport/Extensions/CSS.novaextension
. Be careful — never edit these files manually, since they’re cryptographically signed with Nova’s and Apple’s keys, and the slightest change will obviously break the digital signature, and immediately make macOS quarantine the entire application!
Instead, make a copy of that folder, and place it within your own user’s home directory, such as, say, ~/Developer/
. The first thing to do is to change the folder’s name to something different (so that there are no conflicts), e.g. myCSS.novaextension
. Then you can actually launch Nova, point it to that directory, and activate/deactivate it as an extension (while you’re testing it out and making changes). I believe it will ask you on the first time if it should open the directory as an extension — say ‘no’, since you want to change it first. Subsequently, when you wish to try out your changes, you need to go to the top menu and pick Extensions > Activate/Deactivate Project as Extension
every time you’re ready to test out your work.
That’s for CSS, of course, but you’ll need to do the same for every other language you wish to change.
The only thing that, at the time of writing, doesn’t seem to be obvious to do is to disable the color picker pop-up programatically. The only options I can see are on the Preferences
pane, under the first tab (Display
), where there (currently) are just two possible options for the Color Previews: Show in Gutter Show in Editor.
Well, since these are checkboxes, you actually have 4 options But, for instance, you might just have the colour displaying on the gutter, where it won’t interfere with your typing.
If you most definitely want the coloured square next to the hex number, and if you just have a few colours which are your corporate colours, you could, alternatively, create a new Swatch with just the 2-3 colours you need. This is done from the Color Previews Editor itself. You may have noticed that you have two tabs, one for ‘Picker’, another for ‘Swatches’. Under Swatches you’re able to add your own — with just the handful of colours you need — instead of ‘thousands’. Nova will remember the choice you made, and the next time it pops up, it will go straight to the Picker and keep your chosen Swatch active.
Beyond that… well, ‘hacking’ the actual UI is certainly possible in Nova (with a few limitations!), and is achieved programmatically, but I humbly admit that I have never seriously used the JavaScript API for that.
Since you’ve been left clueless for a week, the best I can do is to give you some pointers.
First, take a good read at the many packages that include the ‘Color’ word in them — all of these contribute, to an extent, to dealing with colours on the text, from detecting a specific pattern that should be recognised as a valid colour, to assigning an object to such a colour, so that it can be used from different parts of the code, to actually launch a pop-up (CompletionColorPop()
) to give the user a chance to visually pick a colour they want.
To see these in action, you can take a look at the actual JS used by the CSS Nova extension; for instance, open ../myCSS.novaextension/Scripts/Completions.js
, where you should have a call to CompletionColorPop()
around line 44 or so. This is where you start to hacking into the UI itself!
… sadly, though, it’s also where I cannot help you further since I’m ignorant about all those vast possibilities of changing the UI and tweak it to do whatever you wish.
Oh, BTW, I don’t know if it was obvious that you will need to change the code not only on the CSS extension, but rather on all other extensions, for whatever programming language you usually work with. Also, it means maintaining all those extensions on your own — the original ones will get updated from time to time, so you’ll have to adapt yours to continue to work with whatever the latest & greatest changes that Nova has introduced in whatever future version they launch…
I hope this is somewhat helpful to you and I wish you good luck!