Sublime text syntax highlighting

[actuallymentor]

Hello!

Thank you for this wonderful plugin.

Do you know how to get Sublime Text to syntax highlight pug'... template literals?

[ezhlobo]

@actuallymentor cool, I believe that the idea will be as simple as for Atom, but will try to help you with that soon.

[ezhlobo]

@actuallymentor I had a chance to make small research. Here is what I found: to get correct syntax highlighting for Flow (and maybe more things) there is a plugin borela/naomi.

To get syntax highlighting for pug in js we can create own syntax there and inherit existed one: — Example: https://gist.github.com/subhaze/a754c8d17906f2a25ce2 — Documentation: http://www.sublimetext.com/docs/3/syntax.html

[actuallymentor]

Thank you for helping out so quickly!

I've read the documentation, but I don't fully understand it yet, could you elaborate on:

• What you mean by 'Flow'?
• In the .sublime-syntax:
  • How does one set the 'parent' highlight? I want to use Babel + this custom template literal. I'm guessing the gist sets it with meta_content_scope: text.html.basic.embedded.js
  • How does one include pug into the template literal scope? With the gist you link I am managing to make the literal highlight html (probably because of include: 'scope:text.html.basic') but I have no idea what the scope name of other syntaxes is supposed to be

[actuallymentor]

So I figured out how to make the literal understand pug:

%YAML 1.2
---
# See http://www.sublimetext.com/docs/3/syntax.html
name: Js with Template Literals
file_extensions:
  - js
scope: source.js.literal
contexts:
  main:
    - match: ""
      push: scope:source.js
      with_prototype:
      - match: 'pug`' <-- this matched a literal only if it is prepended by pug
        push:
          - meta_content_scope: text.html.basic.embedded.js
          - include: 'scope:text.pug' <-- This sets the highlighting ro pug
          - match: '`'
            pop: true

I still don't really understand how to involve babel in all of this...

[tgenuino]

I managed to highlight pug` with JSCustom https://packagecontrol.io/packages/JSCustom

{
  "configurations": {
    "Default": {}, "React": {"file_extensions": ["js", "jsx"], "flow_types": true, "jsx": true}
    , "ReactPug": {
      "file_extensions": ["js", "jsx"], "flow_types": true, "jsx": true,
      "custom_template_tags": {
        "pug": "scope:text.pug"
      }
    }
  }

}

[freemember007]

I have resovle it perfectly by use Ecmascript-Sublime sublime extentsion!

git clone https://github.com/bathos/Ecmascript-Sublime to you sublime Packages path, then modify its ecmascript.sublime-syntax source file.

@see: https://github.com/bathos/Ecmascript-Sublime/issues/62

this is the appearance:

[jimmychu0807]

I managed to highlight pug` with JSCustom https://packagecontrol.io/packages/JSCustom

{
  "configurations": {
    "Default": {}, "React": {"file_extensions": ["js", "jsx"], "flow_types": true, "jsx": true}
    , "ReactPug": {
      "file_extensions": ["js", "jsx"], "flow_types": true, "jsx": true,
      "custom_template_tags": {
        "pug": "scope:text.pug"
      }
    }
  }

}

@tgenuino Hi, I tried your method, but it does nothing for me. I am using Ecmascript-Sublime for js by default. Do I need some other way to turn the JSCustom config on?

This is my config on JSCustom. Thanks.

[tgenuino]

I managed to highlight pug` with JSCustom https://packagecontrol.io/packages/JSCustom

{
  "configurations": {
    "Default": {}, "React": {"file_extensions": ["js", "jsx"], "flow_types": true, "jsx": true}
    , "ReactPug": {
      "file_extensions": ["js", "jsx"], "flow_types": true, "jsx": true,
      "custom_template_tags": {
        "pug": "scope:text.pug"
      }
    }
  }

}

@tgenuino Hi, I tried your method, but it does nothing for me. I am using Ecmascript-Sublime for js by default. Do I need some other way to turn the JSCustom config on?

This is my config on JSCustom. Thanks.

Select the sintax "JS Custom - ReactPug"

On windows, I think its inside User -> Js Cust...

[jimmychu0807]

@tgenuino, thank you

[JGJP]

Does anybody here have any luck getting LSP-Typescript to show type hints inside js attributes in pug?