[CLOSED] Set language name as class to CM display wrapper - enable mode specific code coloring

[core-ai-bot]

Issue by swmitra Friday Aug 11, 2017 at 09:08 GMT Originally opened as https://github.com/adobe/brackets/pull/13607

---

This will enable theme developers and contributors to design code themes for a particular doc mode by using descendant selectors. For example consider the following HTML snippet -

    <div>
        My Sample content
    </div>

And the following CSS snippet -

    div {
        color: #00f;
    }

In both HTML and CSS doc modes 'div' has been assigned '.cm-tag' selector. This implies that if in this LESS file the selector group containing '.cm-tag' is assigned a color value '#446fbd', the tag name 'div' in HTML and the selector name 'div' in CSS will have the same color.

However it's possible to specify different color values for these selectors targetting different language modes. What needs to be done is identify the tokens what's being used in a particular doc mode and target the corresponding selectors by nesting them under the MODE selector.

For example let's take the snippets and case described above. If we want to override the default color of tag only in HTML mode, we need to append this selector after the "custom" marker in this LESS file.

   .HTML {
        .cm-tag {
            color: <custom color here>;
        }
   }

This example can be expanded to include individual selectors or certain selectors grouped together.

These are the list of popular language modes along with the file extensions which they are associated with. Any of these modes can be used as parent selectors and then the individual token color can be nested inside to make sure that we change only the targetted modes coloring.

->Groovy(groovy,gradle)
->Properties(ini,properties)
->CSS(css,css.erb)
->SCSS(scss,scss.erb)
->Stylus(styl)
->JavaScript(js,js.erb,jsm,_js)
->JSON(json)
->VBScript(vbs)
->VB(vb)
->XML(xml,wxs,wxl,wsdl,rss,atom,rdf,xslt,xsl,xul,xsd,xbl,mathml,config,plist,xaml)
->SVG(svg)
->HTML(html,htm,shtm,shtml,xhtml,cfm,cfml,cfc,dhtml,xht,tpl,twig,kit,jsp,aspx,ascx,asp,master,cshtml,vbhtml)
->EJS(ejs,dust)
->Embedded-Ruby(erb,html.erb,htm.erb)
->JSX(jsx)
->C(c,h,i)
->C++(cc,cp,cpp,c++,cxx,hh,hpp,hxx,h++,ii,ino)
->C#(cs,asax,ashx)
->Java(java)
->Scala(scala,sbt)
->Dart(dart)
->PHP(php,php3,php4,php5,phtm,phtml,ctp)
->CoffeeScript(coffee,cf,cson,_coffee)
->Clojure(clj,cljs,cljx)
->Perl(pl,pm,t)
->Ruby(rb,ru,gemspec,rake)
->Python(py,pyw,wsgi,gyp,gypi)
->SASS(sass)
->Diff(diff,patch)
->Lua(lua)
->YAML(yaml,yml)
->SQL(sql)
->Haxe(hx)
->Bash(sh,command,bash)
->Haskell(hs)
->RDF-Turtle(ttl)
->Markdown(md,markdown,mdown,mkdn)
->Markdown-(GitHub)
->LESS(less)
->Handlebars(hbs,handlebars)

---

swmitra included the following code: https://github.com/adobe/brackets/pull/13607/commits

[core-ai-bot]

Comment by ficristo Friday Aug 11, 2017 at 09:58 GMT

---

Is the addModeClass option not enough?

[core-ai-bot]

Comment by swmitra Friday Aug 11, 2017 at 10:45 GMT

---

@ficristo Thanks a lot for pointing it out 👍. I needed this for JavaScript specific code coloring but missed the 'addModeClass' option completely. Closing this PR, I will enable the option in theme config json.