Add support for CSS and JS syntax highlighting inside Visualforce components and pages

[Nathen Drees]

Currently, if you add css or JS in your visualforce pages, there is no syntax highlighting. Is it possible to add this in?

CSS:

JS:

[Scott Wells]

Are you on IDEA Community Edition or Ultimate Edition? This is one of the major feature content differences between CE and UE aside from support for major Enterprise-class frameworks and commercial SCM tools...full HTML5 editor support with highlighting/completion/navigation/etc. for Javascript and CSS. Here's a screenshot from IDEA Ultimate Edition with Illuminated Cloud editing a Visualforce page with CSS and Javascript:

Unfortunately I'm not aware of much I can do to support this in Community Edition without a HUGE investment outside of the core Force.com-oriented feature set of Illuminated Cloud.

[Nathen Drees]

I am on CE right now. If this is something core in IDEA then feel free to ignore this.

[Scott Wells]

I'm going to resolve this as wont fix right now since it's really an IDEA Community Edition vs. Ultimate Edition thing. If you're seeing this lack of highlighting in UE as well, please feel free to reopen the issue.

I haven't tried this myself, but a quick search produced this:

http://stackoverflow.com/questions/18661145/intellij-community-edition-javascript-syntax-highlighting

which seems to indicate that the TextMate Bundles plugin:

https://plugins.jetbrains.com/plugin/7221?pr=idea_ce

might be able to help provide syntax highlighting in the free versions of the JetBrains tools. If you try that and find that it works, or perhaps doesn't work in Visualforce but does in HTML, let me know and I'll see if there's anything I can do to at least bridge the two plugins to provide syntax highlighting for embedded CSS/JS.

[Nathen Drees]

Thanks Scott, i'll give it a try. Ultimately I think we'll just buy some UE licenses since we'd like the javascript intellisense support as well, we just haven't yet since we're still in an evaluation phase.

This may be worth something putting on your FAQ on your site, since I'm sure others who aren't familiar with IDEA will have the same question?

[Michael Williams]

Hey Scott, I got the TextMate plugin working in my IntelliJ. It's not perfect - for instance, you need to have a standard theme enabled for it to override js - but it's a big upgrade over the minimalistic highlighting pictured above. I know this is an old thread, but I'd be interested in helping you link IC2 with the TextMate plugin.

Let me know if I can answer any questions or be of help in any way.

Edit: I have it working for .js files in lightning bundles. HTML highlighting is unchanged.

[Scott Wells]

Hi, Michael. Sure, pass on what you've done. I did implement decent syntax highlighting for both JavaScript and CSS in Community Edition, but if this is better, I'd at least like to document what you've done for others who are using CE. Much appreciated!

[Michael Williams]

Before:

After:

1. Get Textmate bundles support plugin for IntelliJ
2. Get JS Textmate bundle https://github.com/textmate/javascript.tmbundle
3. Get any themes you want, save them in javascript.tmbundle-master/Themes
   • I'm using https://github.com/memco/Oceanic-tmTheme/blob/master/Themes/Oceanic%20-%20Eighties.tmTheme
4. Go to Preferences > Editor > TextMate Bundles in IntelliJ, click the '+' icon
5. Find the JS bundle on your computer and upload, click apply
6. In the IDE Color Scheme vs TextMate Color Scheme you should see whatever themes you installed available
   • Ideally you could override any theme, but only overriding the Standard and Darcula themes has worked for me

7. Next go to Preferences > Editor > File Types, find "Files Supported Via TextMate Bundles"
8. Add "*.js" as a registered pattern
   • IntelliJ will probably warn you this wildcard is used elsewhere. You should reassign the wildcard, but if you want to undo this change simply find "JavaScript Files" in this list and re-add "*.js"
9. Go ahead and restart IntelliJ, and enjoy full syntax highlighting!

ISSUES 1. Editor theme must be Standard or Darcula 2. Need to change background color of tmTheme to that of IntelliJ to avoid this ugly bar effect

[Scott Wells]

FYI, this also works well for CSS using this bundle:

https://github.com/textmate/css.tmbundle

I think I'm going to add this to the FAQ soon as it definitely improves the appearance of JS and CSS in Community Edition. Nice work, Michael!

[Michael Williams]

Thanks, Scott. Are there any items in your backlog I can assist on? I'd love to help out some more.

[Scott Wells]

For anyone that was following the TextMate Bundles aspect of this, 2019.2 adds native support for them. I've logged a separate enhancement request (#1393) to integrate that feature more tightly into IC when used with a Community Edition IDE. Of course, if you're on something earlier than 2019.2 the approach documented by Michael above still works wonderfully as well!

[Scott Wells]

Removing version: Unassigned (automated comment)