PyCharm - Is community edition able to highlight css/javascript?

Question

I'm exploring the features of PyCharm to decide if I should use it(now PyDev). All looks great, but I haven't find a way to make PyCharm highlight css or js files:

Is this a functionality which only provided in the commercial edition?

Solution 1

Web development with JavaScript, CoffeeScript, TypeScript, HTML/CSS supported by Professional Edition only. They are edited as text files with no mark-up in Community Edition.

PyCharm Editions Comparison

Solution 2

If you create css.xml with this content then you'll get css highlighting and code-completion:

<?xml version="1.0" encoding="UTF-8"?>
<filetype binary="false" default_extension="" description="css" name="css">
  <highlighting>
    <options>
      <option name="LINE_COMMENT" value="" />
      <option name="COMMENT_START" value="/*" />
      <option name="COMMENT_END" value="*/" />
      <option name="HEX_PREFIX" value="" />
      <option name="NUM_POSTFIXES" value="" />
      <option name="HAS_BRACES" value="true" />
      <option name="HAS_PARENS" value="true" />
    </options>
    <keywords keywords="@font-face;@keyframes;@media;align-content;align-items;align-self;animation;animation-delay;animation-direction;animation-duration;animation-fill-mode;animation-iteration-count;animation-name;animation-play-state;animation-timing-function;backface-visibility;background;background-attachment;background-clip;background-color;background-image;background-origin;background-position;background-repeat;background-size;border;border-bottom;border-bottom-color;border-bottom-left-radius;border-bottom-right-radius;border-bottom-style;border-bottom-width;border-collapse;border-color;border-image;border-image-outset;border-image-repeat;border-image-slice;border-image-source;border-image-width;border-left;border-left-color;border-left-style;border-left-width;border-radius;border-right;border-right-color;border-right-style;border-right-width;border-spacing;border-style;border-top;border-top-color;border-top-left-radius;border-top-right-radius;border-top-style;border-top-width;border-width;bottom;box-shadow;box-sizing;caption-side;clear;clip;color;column-count;column-fill;column-gap;column-rule;column-rule-color;column-rule-style;column-rule-width;column-span;column-width;columns;content;counter-increment;counter-reset;cursor;direction;display;empty-cells;flex;flex-basis;flex-direction;flex-flow;flex-grow;flex-shrink;flex-wrap;float;font;font-family;font-size;font-size-adjust;font-stretch;font-style;font-variant;font-weight;hanging-punctuation;height;icon;justify-content;left;letter-spacing;line-height;list-style;list-style-image;list-style-position;list-style-type;margin;margin-bottom;margin-left;margin-right;margin-top;max-height;max-width;min-height;min-width;nav-down;nav-index;nav-left;nav-right;nav-up;opacity;order;outline;outline-color;outline-offset;outline-style;outline-width;overflow;overflow-x;overflow-y;padding;padding-bottom;padding-left;padding-right;padding-top;page-break-after;page-break-before;page-break-inside;perspective;perspective-origin;position;quotes;resize;right;tab-size;table-layout;text-align;text-align-last;text-decoration;text-decoration-color;text-decoration-line;text-decoration-style;text-indent;text-justify;text-overflow;text-shadow;text-transform;top;transform;transform-origin;transform-style;transition;transition-delay;transition-duration;transition-property;transition-timing-function;unicode-bidi;vertical-align;visibility;white-space;width;word-break;word-spacing;word-wrap;z-index" ignore_case="false" />
  </highlighting>
  <extensionMap>
    <mapping ext="css" />
  </extensionMap>
</filetype>

Solution 3

You can create a new syntax definition via Settings / Editor / File and Code Templates.

Alternatively create a javascript.xml file in C:\Users\%USERNAME%.PyCharm30\config\filetypes with this content:

<?xml version="1.0" encoding="UTF-8"?>
<filetype binary="false" default_extension="" description="Javascript" name="Javascript">
  <highlighting>
    <options>
      <option name="LINE_COMMENT" value="//" />
      <option name="COMMENT_START" value="/*" />
      <option name="COMMENT_END" value="*/" />
      <option name="HEX_PREFIX" value="" />
      <option name="NUM_POSTFIXES" value="" />
      <option name="HAS_BRACES" value="true" />
      <option name="HAS_BRACKETS" value="true" />
      <option name="HAS_PARENS" value="true" />
      <option name="HAS_STRING_ESCAPES" value="true" />
    </options>
    <keywords keywords="break;case;catch;class;const;continue;debugger;default;delete;do;else;export;extends;finally;for;function;if;import;in;instanceof;let;new;return;super;switch;this;throw;try;typeof;var;void;while;with;yield" ignore_case="false" />
  </highlighting>
  <extensionMap>
    <mapping ext="js" />
  </extensionMap>
</filetype>

Solution 4

The easier solution is going to Settings -> Editor -> File Types, and add a new configuration named CSS. Remove association with *.css of the default profile. Associate the new profile with extension *.css, set the block comments start and end with /* and */, finally add the keywords for each level of highlight, that are the following.

Keywords 1

a
body
button
div
font
font-face
form
frame
h1
h2
h3
h4
iframe
img
import
input
li
link
media
nav
ol
option
p
select
span
table
td
th
title
tr
u
ul
video

Keywords 2

background
background-color
border
border-radius
bottom
box-shadow
color
content
cursor
display
float
font-family
font-size
font-weight
height
left
line-height
list-style-type
margin
margin-bottom
margin-left
margin-right
margin-top
outline
overflow
padding
padding-bottom
padding-left
padding-right
padding-top
position
right
text-align
text-decoration
text-transform
top
vertical-align
white-space
width
z-index
zoom

Keywords 3

em
pt
px
rgb
rgba

Keywords 4

!important
active
after
before
hover
none
visited

Solution 5

Install the Dart Plugin. And remove *.js from JavaScript file types, then add *.js to Dart file types. It works!

FYI: coffee plugin doesn't work

View more solutions

Comments

[laike9m]

found this jetbrains.com/pycharm/webhelp/…, it shows that CSS should be supported.

[kukido]

Supported filetype means that PyCharm understands the format. As I understand, you are interested in mark-up (colorization, syntax, suggestions).

[laike9m]

uhmmm, I thought they are the same things. Alright, thank you.

[Mark Ribau]

I would note that for all other "supported" formats, it appears to do colorization and such. It seems that CSS is not /actually/ supported in community edition (it doesn't get it's own icon as the docs would indicate). It must be opened as "text", as all non-supported formats need to be.

[Ahmad Muzakki]

where should I put it?

[jurasource]

Can you be a bit more specific on what you're tying to do and what isn't working?

[xtrinch]

Trying to make syntax highliting work on javascript files and its not working? I put the file into the config folder

[Adam Ranganathan]

I installed PyCharm Community Edition 2017.1, which did not have the filetypes folder by default in C:\Users\<username>\.PyCharmCE2017.1\config\ folder. So I had to create filetypes folder here and then drop in the above xml.

[Brent Washburne]

On a Mac, put the above XML content into /Users/<username>/Library/Preferences/PyCharm30/filetypes/ja‌​vascript.xml

[Jakob]

Mac: ~/Library/Preferences/<PRODUCT><VERSION>

[Jerther]

Well, some basic keywords are missing from syntax highlighting like function and let but code completion does work. Better than nothing I guess.

[joke4me]

For PyCharm 2020 Community Edition, create the file css.xml at /Users/username/Library/Application Support/JetBrains/PyCharmCE2020.1/filetypes/

[Armster]

What about for Windows? Where should I keep it?

[Alex]

Maybe you have the same solution for JavaScript?

[Andrea]

Unfortunately I don't, but I suppose that this kind of basic mapping would not work well with JavaScript, due to its complexity. Edit: with a quick google search it looks that someone tried to use the dart plugin, mapping it's file type for *.js files. I have not tested it yet so I don't know if it works well.

[Andrew Einhorn]

Hmm, kind of disappointing. I really like Pycharm, but for web dev, I've switched over to Visual Studio Code for this reason - no native css markup