• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
2

Dreamweaver CC 2017 - Language Aware Code Colouring - How To

Community Expert ,
Jan 04, 2017 Jan 04, 2017

Copy link to clipboard

Copied

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 .....

Paul-M - Community Expert

Views

2.1K

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Jan 05, 2017 Jan 05, 2017

Copy link to clipboard

Copied

This is great work! Thank you for your persistence and your positive input.

Wappler, the only real Dreamweaver alternative.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Jan 05, 2017 Jan 05, 2017

Copy link to clipboard

Copied

Excellent!

Post bookmarked.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Employee ,
Jan 06, 2017 Jan 06, 2017

Copy link to clipboard

Copied

I am thinking that this will make for a wonderful blog post. Let me know if you are OK with the idea, and I can check with the team on creating one on the DW blog while giving you all credit.

Thanks,

Preran

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Jan 06, 2017 Jan 06, 2017

Copy link to clipboard

Copied

No problem Preran, use as needed ...

Paul-M - Community Expert

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Employee ,
Jan 06, 2017 Jan 06, 2017

Copy link to clipboard

Copied

Thank you. I have written to the team, and I should hear something from them by Monday.

Happy Weekend!

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Jan 06, 2017 Jan 06, 2017

Copy link to clipboard

Copied

Good work - I'm still not sure why using that method fails to color the opening <?php tag but it colors the closing ?> tag. Seems like I have to have my doctype colored the same as the <?php ?> tags which is a bit annoying but better that the php tags getting buried in amongst the other code.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Jan 06, 2017 Jan 06, 2017

Copy link to clipboard

Copied

I know the cm-m-clike class doesn't colour the opening <?php which must be a limitation of CodeMirror. The only workaround I know is setting cm-meta and cm-m.clike classes to  the same colour. The only draw-back as you say is the doctype tag will be the same colour as your PHP code which is a minor irritant. If anyone finds another way round it let me know.

Paul-M - Community Expert

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Feb 21, 2017 Feb 21, 2017

Copy link to clipboard

Copied

Is there any way we can get a .cm-m-cfml: CFM CFC

I have searched for days... and it looks like mixed color mode is not supported with ColdFusion in DW 2017.0.1

Can we pay to have this implemented? If we get it implemented in the CodeMirror Project  Mode wish list · codemirror/CodeMirror Wiki · GitHub will it automatically be updated in DW?

ACP or STAFF please help!

Thanks in advance.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Employee ,
Feb 21, 2017 Feb 21, 2017

Copy link to clipboard

Copied

I suggest posting your request on the Adobe Dreamweaver CC: Feature Ideas to have it directly registered with the product team for their observations. You can also canvass for your request to help the team prioritize it. Usually feature requests with many votes tend to make it to development faster.

Thanks,

Preran

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Feb 21, 2017 Feb 21, 2017

Copy link to clipboard

Copied

As the OP has hi-jacked a number of other discussions, I feel no restriction in myself doing so here.

Preran  wrote

Usually feature requests with many votes tend to make it to development faster.

That's the problem with Dreamweaver.

Even if almost no one wants a feature included in Dreamweaver except for the creator. If the creator of a feature request knows enough people to artificially push-up the votes for a feature, that feature gets priority over other much needed improvements.

The FR system requires a rethink.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Employee ,
Feb 21, 2017 Feb 21, 2017

Copy link to clipboard

Copied

Thank you, Paula. I could be completely wrong here, but from what I understand, votes help catch the team's attention. After that, the team does its own evaluation of the feasibility of the feature and its use cases. The product team regularly meets with us to understand top concerns on social media and forums.

If there are instances where you think that the system is being rigged, do bring that to my notice. I will share that with the product team for their observations. No system is perfect, and if there is a flaw, I will make sure that the team knows about it.

Thanks,

Preran

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Feb 21, 2017 Feb 21, 2017

Copy link to clipboard

Copied

LATEST

Thank you for answering Preran,

I have not looked at what is happening lately, but can remember pointing this problem out when CMS support, (wordpress, etc) was introduced. That time I found a lot of user forums, (not Adobe) asking users to post FR's for Dreamweaver support.

I also do not think it is good practice to tell people to get others, (friends, etc) to vote for a feature, as happened in one recent discussion.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines