无法解决pycharm 社区版不能链接使用 css的问题

仅专业版支持使用 JavaScript、CoffeeScript、TypeScript、HTML/CSS 进行 Web 开发。它们在 社区版 中被编辑为没有标记的文本文件。

我的最终解决方法是换专业版。

软件商好像在告诉我：穷人不配用pycharm开发web。

还好能够找到pj的版本，白白浪费了大好时光。

下面是折腾了好几个小时以后看上去似乎有效的方法，供参考。

第一种方法，css高亮显示，但引用依然无效，且重启pycharm后设置被重置。

第一步，打开设置→编辑→文件类型

•  Settings -> Editor -> File Type.

第二步，修改css设置

 keywords1-4分别填入以下内容

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

方法二：和上面结果类似，还是不能链接

在安装目录下的 filetypes里添加css.xml 文件

 文件代码

<span style="background-color:var(--highlight-bg)"><span style="color:var(--highlight-color)"><code class="language-python"><?xml version=<span style="color:var(--highlight-variable)">"1.0"</span> encoding=<span style="color:var(--highlight-variable)">"UTF-8"</span>?>
<filetype binary=<span style="color:var(--highlight-variable)">"false"</span> default_extension=<span style="color:var(--highlight-variable)">""</span> description=<span style="color:var(--highlight-variable)">"css"</span> name=<span style="color:var(--highlight-variable)">"css"</span>>
  <highlighting>
    <options>
      <option name=<span style="color:var(--highlight-variable)">"LINE_COMMENT"</span> value=<span style="color:var(--highlight-variable)">""</span> />
      <option name=<span style="color:var(--highlight-variable)">"COMMENT_START"</span> value=<span style="color:var(--highlight-variable)">"/*"</span> />
      <option name=<span style="color:var(--highlight-variable)">"COMMENT_END"</span> value=<span style="color:var(--highlight-variable)">"*/"</span> />
      <option name=<span style="color:var(--highlight-variable)">"HEX_PREFIX"</span> value=<span style="color:var(--highlight-variable)">""</span> />
      <option name=<span style="color:var(--highlight-variable)">"NUM_POSTFIXES"</span> value=<span style="color:var(--highlight-variable)">""</span> />
      <option name=<span style="color:var(--highlight-variable)">"HAS_BRACES"</span> value=<span style="color:var(--highlight-variable)">"true"</span> />
      <option name=<span style="color:var(--highlight-variable)">"HAS_PARENS"</span> value=<span style="color:var(--highlight-variable)">"true"</span> />
    </options>
    <keywords keywords=<span style="color:var(--highlight-variable)">"@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"</span> ignore_case=<span style="color:var(--highlight-variable)">"false"</span> />
  </highlighting>
  <extensionMap>
    <mapping ext=<span style="color:var(--highlight-variable)">"css"</span> />
  </extensionMap>
</filetype></code></span></span>

解决方法来源：python - Is PyCharm's community edition able to highlight CSS and JavaScript? - Stack Overflow