Sublime Forum

How to enable CSS highlighting in template literal strings?

#1

I have a file that enables HTML syntax highlighting in template strings but how can I also enable CSS highlighting?

var html = `
    <div>This works!! This is highlighted</div>
`

var css = `
  .myclass {
      But this does not work.... :(
  }
`

Here is my current file ES6.sublime-syntax file

%YAML 1.2
---

name: ES6
file_extensions:
  - js
  - component.js
  - page.js
scope: source.js.parasails
contexts:
  main:
    - match: ""
      push: scope:source.js
      with_prototype:
      - match: '`'
        push:
          - meta_content_scope: text.html.basic.embedded.js
          - include: 'scope:text.html.basic'
          - match: '`'
            pop: true

Untitled
Untitled.png860×386 6.69 KB

0 Likes
#2

Adding preceeding indicator such as css`MY_CSS_CODES` and html`MY_HTML_CODES` would be much easier?

0 Likes
#3

No, I would rather not add those. I just want to apply CSS highlighting to everything inside template literal strings `` just like with HTML it is already working.

0 Likes
#4

I guess you can check the first non-empty line

having \b\{\s*$ => assumed CSS
having \b<[a-zA-Z_] => assumed HTML
otherwise => just plain text string

0 Likes
#5

Not sure if I understand. Could you give an example of how I need to change my current .sublime-syntax file to include CSS?

0 Likes
#6

Something like

%YAML 1.2
---

name: ES6
file_extensions:
  - js
  - component.js
  - page.js
scope: source.js.parasails
contexts:
  main:
    - match: ""
      push: scope:source.js
      with_prototype:
      - match: '`'
        push:
          - meta_content_scope: text.html.basic.embedded.js
          - match: '`'
            pop: true
          - match: (?=.*<[a-zA-Z_])
            embed: scope:text.html.basic
            escape: (?=`)
          - match: (?=.*\{\s*$)
            embed: scope:source.css
            escape: (?=`)
          - match: '[^`]+'
            scope: string.template.js
1 Like
#7

JS Custom allows you to highlight template literals by tag. For instance, you could highlight templates like css`span { color: green }` as CSS. In the next release, I’m hoping to add comment-based highlighting, e.g. /* css */`span { color: green }`.

1 Like
#8

Thank you very much, this worked!

0 Likes
#9

It’s quite hacky. Using ThomSmith’s plugin would be better if add a preceding syntax hinter is acceptable.

0 Likes
#10

Ecmascript-Sublime has supported nested syntax highlighting for a while and accepts template tags such as html and css.

1 Like