Sublime Forum

Seeing colored JS inside HTML <script> tag

#21

You should save it in your local Packages directory, which on OS X is (IIRC) ~/Library/Application Support/Sublime Text 3/Packages. You shouldn’t modify the contents of the Sublime Text application itself.

0 Likes

#22

I followed your instruction above and saved the HTML.sublime-syntax in a new HTML directory inside PACKAGES directory. I restarted my Sublime text, but i cannot see color effects for paperscript

0 Likes

#23

Can you post the exact code that you expect to be highlighted? e.g.:

<script type="text/paperscript">
console.log('Hello, World!");
</script>
0 Likes

#24

Hi @ThomSmith, Thank you so much for providing this solution! This, however, seems to be causing some kind of weird syntax mess-up! Everything in between and below the tag for paperjs seems to be appearing in green. Have a look at the screenshot:

What do you suggest I do to fix this?

0 Likes

#25

I’m not getting that result. Test case:

<!DOCTYPE html>
<html>
<head>
    <title>My Canvas</title>
    <script type="text/javascript" src="../lib/paperjs/dist/paper-full.min.js"></script>

    <script type="text/paperscript" canvas="myCanvas">
        
    </script>
</head>
<body>
    
</body>
</html>

What other packages are you using? Is it possible that you have a typo in your HTML.sublime-syntax?

0 Likes

#26

I know this is an old post but… I think I’m taking the same course and have bumped up against this same issue.

The suggestion to edit the package worked for me…but I had to use (java|paper)script… as opposed to javascript|paperscript which was suggested here…

So… the whole string looked like this…

  • match: ‘(<)((?i:script))\b(?![^>]/>)(?![^>](?i:type.?=.?text/((?!(java|paper)script).*)))’

Once again,
This did the trick for me.
hth,
…bob

0 Likes

#27

Editing the contents of

/opt/sublime_text/Packages/HTML.sublime-package

works just fine on Sublime Text 3.0 (this is my install directory on Ubuntu 18, yours might be different)

I modified this line to include |"text/paperscript"

script-type-decider:
    - match: (?i)(?=text/javascript(?!{{unquoted_attribute_value}})|'text/javascript'|"text/javascript"|"text/paperscript")

Note: this file is inside a zip archive and you should see a prompt asking if you wish to update the contents in the file, obviously, click update

One last thing. By default, only the root user has access to the directory and it’s contents, so you might want to change ownership recursively or update write permission for other users. See link below for reference

0 Likes

#28

You should not edit the files in /opt/sublime_text! Instead, you should copy the HTML.sublime-syntax file into your packages directory under a new HTML directory. This will ensure that your overrides are applied correctly and are not deleted when Sublime updates, and you won’t have to modify permissions.

In addition, rather than editing that rule in script-type-decider, I would add another almost-identical rule below it, replacing all instances of text/javascript with text/paperscript. This will work in more cases and probably be easier to maintain.

1 Like

#29

Ok. This seems like a better idea, long term. But just to be clear, where does the new HTML directory go? Assume our pwd is /opt/sublime_text

0 Likes

#30

The /opt/sublime_text directory is for the base installation only. There’s another directory for local packages, including your User package. You can get the path to this directory by opening up the Sublime console with ctrl-` and running sublime.packages_path(). On Linux, it’s typically at ~/config/sublime-text-3/Packages/. You will see your User package under this directory.

This directory “overrides” package resources in /opt/sublime_text/Packages/. When Sublime looks for a resource named Packages/HTML/HTML.sublime-syntax, it will first look in your local packages directory before looking in the core packages directory. So all you have to do is copy the core HTML syntax into your local packages directory at Packages/HTML/HTML.sublime-syntax. Then, your local version of the syntax will “override” the core syntax — Sublime will see your local copy instead of the core version. When Sublime is updated, your local override will remain intact even if the core syntax changes.

3 Likes

#31

This is super correct! Worked effortlessly. Thanks for the eye-opener. Reverting earlier modified permission…

1 Like

#32

ST3, windows
you can also install this plugin packageResouceViewer
then access the HTML.sublime-syntax file by navigating to the HTML directory using the command,
PackageResourceViewer: Open Resource:
in command palette from sublime.
finally, add |text/paperscript underneath |text/livescript like below;

javascript_mime_type: |-
(?ix)(?:
# https://mimesniff.spec.whatwg.org/#javascript-mime-type
(?:application|text)/(?:x-)?(?:java|ecma)script
| text/javascript1.[0-5]
| text/jscript
| text/livescript
| text/paperscript
)

it worked for me.

0 Likes