Dreamweaver CC 2017 - Language Aware Code Colouring - How To

Here's an example of how to get code colouring working on a per language basis, note this is different to the per file type basis, the scenario is  you have multiple languages in the same file and you want to distinguish each language with its own colours. This is not an extensive explanation but merely a starter (I know quite a few people have wanted more flexibility with code colouring and this feature specifically:

Firstly do NOT edit the original JSON and LESS theme files located in C:\Program Files\Adobe\Adobe Dreamweaver CC 2017\www\extensions\default\DarkTheme and C:\Program Files\Adobe\Adobe Dreamweaver CC 2017\www\extensions\default\LightTheme  instead do the following:

You need to enable the addModeClass flag in Dreamweaver code view themes with the following steps :

1. Create a custom code colour theme in Preferences->Interface -> +

2. Select the newly created theme and apply it

3. Quit Dreamweaver

4. Open package.json of your newly created theme which should be located at C:\Users\username\AppData\Roaming\Adobe\Dreamweaver CC 2017\en_US\Configuration\Brackets\extensions\user\YOUR_CUSTOM_THEME_NAME

5. To add the the addModeClass you need to add one line to the JSON file  "addModeClass": true and the JSON should look something like this:

{

    "title": "custom_theme",

    "name": "custom_theme",

    "description": "Built-in dark theme for Brackets",

    "version": "0.42.0",

    "author": "Miguel Castillo <mahchagnu@gmail.com>",

    "engines": {

        "brackets": ">=0.42.0"

    },

    "theme": {

        "file": "main.less",

        "addModeClass": true

    }

}

6. Save the JSON file

7.  Launch Dreamweaver and select the new theme  and click on Edit in Preferences->Interface

6. You can now add some mode specific styles, to the theme file, more info available here: Creating Themes · adobe/brackets Wiki · GitHub

Common modes-aware styles are:

• .cm-m-clike: PHP
• .cm-m-css: CSS, LESS, SASS
• .cm-m-javascript: JavaScript
• .cm-m-xml: HTML, XML

A basic example to colour entire PHP blocks in once colour

.cm-m-clike {

     color:#fff;

}

To colour individual components of a  language you'll need a bit of research to see which styles you need to use the syntax is like this:

.cm-m-clike.cm-string {

     color: #fff;

}

cm-m-clike.cm-comment {

     color:#ccc;

}

I hope that puts a few people on the right track and thanks to Yalpi for pointing me in the right direction to get this working.....

I believe the DW team will set the addModeClass flag TRUE by default in the next release.

Feel free to PM me if any questions .....