Customize Individual HTML Tag colors?

[OhAdobeYouSoCrazy]

Good Morning Adobe Forum,

I am working to create "Dreamweaver 2015" style light and dark themes for Dreamweaver 2017-18's code view.

However, I have hit a roadblock. Dreamweaver 2017-18 use brackets as the code editor, and one can create a custom theme by overriding the CSS in the main.less file. However, I can't find any way to target individual HTML tags. For instance, in DW15 the form and input tags take a dark yellow color, where the div tags take a purple color and the table tags takes a teal color.

I am working to recreate these colors but I cannot find a way to target anything more specific than the .cm-tag elements in the main.less file.

Further research shows that brackets doesn't support this by default, but a plugin has been built on github to add this functionality to Brackets. I tried to install the code from this plugin into the Theme folder but to no avail. I tried copying the main.js file and the folders from this plugin into the copy of the light theme I was using to edit the main.less file, but I don't think the main.js file gets fired even if you point to that instead of the main.less file in the package.json file.

GitHub - jzmstrjp/brackets---color-the-tag-name: brackets extension - color the tag name

So, on to my questions:

1. Is there a way to target the colors of individual HTML tag types in DW2017-18 main.less files? Any class more specific than .cm-tag like maybe .cm-tag-form or .cm-tag-input?

or

2. Can anybody figure out a way to install the above plugin into the brackets version that DW 2017-18 leverages for code editing? Or any Brackets plugins at all?

Thanks All!

[Preran]

If I understood your request correctly, I don't think this workflow is supported in DW. But I am checking with team members for confirmation.

Thanks,

Preran

[OhAdobeYouSoCrazy]

Thanks Preran,

Just to clarify, so I create a new duplicate theme of the Light theme. Then edit it.

In the main.less file I can target .cm-tag class to set the color/style/font etc for ALL html tags.

I could even set it on a per-language basis with for instance to target just HTML tags in PHP files: .php { .cm-tag { color: red; }}

However, in trying to duplicate the look of code in DW15 I would need to color input/form, and div, and anchor, and several other tags different colors.

But I can't find a way to target the CSS with more specificity than the .cm-tag level. I'm looking for some class or ID that would let me set the styles based on what kind of HTML tag it is.

Or barring that, I'm looking for a way to install third party Brackets extensions into the Brackets version that DW 2018 uses for a code editor.

I realize I'm on the fringe of what can even be accomplished here, and thank you for your time and consideration.

[Niharika_Jha · Accepted solution]

Hi,

The implementation of Code Coloring in CC 2017 differs from Dw CC 2015, so we can't change colors of specific tags in CC 2017. The most you can go is set a color value to .cm-tag

Regards,

Niharika Gupta

Adobe Dreamweaver

[OhAdobeYouSoCrazy]

I thought so. How about the ability to instal 3rd party Brackets extensions to the Brackets that Dreamweaver uses?

For instance, this brackets plug-in gives each tag it's own class name, so they could then be targeted with CSS from the main.less file.

GitHub - jzmstrjp/brackets---color-the-tag-name: brackets extension - color the tag name

I actually tried to shoehorn this extension into the Brackets extension that DW creates when you copy and edit a theme, but even when I pointed the package.json to the main.js file, instead of the main.less file, I couldn't get any javascript to run in this way.

Thoughts?

Thanks again.

[ジャズマス界隈]

You can use that plugin (Color The Tag Name) with Dreamweaver.

Please try to copy the plugin directory into here.

C:\Users\XXXX\AppData\Roaming\Adobe\Dreamweaver CC 2018\Configuration\Brackets\extensions\user

[garya55570120]

It works for 2020 too. The only thing is that you need to restart DW every time you make a change. The plugin is very easy to customise, you can select which tags you want to override.