Sublime Forum

Babel + pug syntax highlight?

#1

I am using babel-plugin-transform-react-pug
however babel-sublime package doesn’t recognize the pug syntax,

so i installed pug package and define the following syntax:

%YAML 1.2
---
# See http://www.sublimetext.com/docs/3/syntax.html
name: JS with Pug
file_extensions:
  - pug.js
scope: source.js.pug
contexts:
  main:
    - match: ""
      push: scope:source.js
      with_prototype:
      - match: "pug`"
        push:
          - meta_content_scope: text.pug.embedded.js
          - include: 'scope:text.pug'
          - match: "`"
            pop: true

it managed to highlight the pug part of my code:

Screen Shot 2018-02-13 at 1.34.38 PM.png704×215 11.6 KB

but failed to end the pug and resume to js:

0 Likes
#2

this sounds like a problem that JSCustom was designed to solve and make simple:
https://packagecontrol.io/packages/JSCustom

but if you don’t want to use that, probably your backtick match pop pattern needs to also be part of a with_prototype

4 Likes
#3

If you are using a dev build, the embed functionality seen at https://github.com/sublimehq/Packages/blob/c469cddbfb89bb6a8213cb6a5004fd34db94a85e/HTML/HTML.sublime-syntax#L584-L590 is designed for these types of “embedding” of one syntax within another.

However, as @kingkeith mentioned, JSCustom may be a better fit overall.

1 Like