Sublime Forum

Seeing colored JS inside HTML <script> tag

#1

Hi, I started using Sublime Text to follow an online course in HTML, CSS and JS development. I am now at a point where we’re using paperJS and thus have to write our JavaScript/PaperScript inside of a <script> tag in the HTML file. However, in the video, you see that the creator’s Sublime recognises the JavaScript inside the <script> tag to be JavaScript, and colors it accordingly. In my file, all the JavaScript is actually white, which makes it hard for me to see what I’m doing or recognise mistakes. I’ve Googled a bit and tried to change my theme, but nothing works. How can I fix this?

Thanks.

1 Like
#2

Could you post your entire HTML file?

0 Likes
#3 
<!DOCTYPE html>
<html>
<head>
	<title>Sound Game</title>
	<script type="text/javascript" src="paper-full.js"></script>
	<link rel="stylesheet" type="text/css" href="circles.css">
	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/howler/2.0.5/howler.js"></script>
	<script type="text/paperscript" canvas="myCanvas">
		var circles = [];

		var sound1 = new Howl({
			src: ['sounds/bubbles.mp3']
		});

		var sound2 = new Howl({
			src: ['sounds/clay.mp3']
		});

	    function onKeyDown(event) {
	    	if(event.key === "a") {
	    	sound1.play();
	    	}

	    	if(event.key === "s") {
	    	sound2.play();
	    	}

		    var maxPoint = new Point(view.size.width, view.size.height);
		    var randomPoint = Point.random();
		    var point = maxPoint * randomPoint;
		    var newCircle = new Path.Circle(point, 500);
		    newCircle.fillColor = "orange";
		    circles.push(newCircle);
		}

		function onFrame(event) {
			for(var i = 0; i < circles.length; i++){
				circles[i].fillColor.hue += 1;
				circles[i].scale(0.9);
			}
		}
	</script>
</head>
<body>

<canvas id="myCanvas" resize></canvas>

</body>
</html>
0 Likes
#4

The default HTML syntax doesn’t know what paperscript is, so it does not apply the JavaScript syntax to the <script> tag contents. You would probably need to use a PaperScript syntax and an HTML syntax that knows how to use the PaperScript syntax for <script> tags where the type attributes is text/paperscript.

0 Likes
#5

Okay, how can I do that?

0 Likes
#6

You’d have to find one that someone else has already done, or learn about syntaxes and make your own. https://packagecontrol.io/ generally has most available Sublime Text packages on it.

0 Likes
#7

By the way, it’s not even assigning colors to ‘var’ and ‘function’, so it’s not showing basic JavaScript either

0 Likes
#8

If you change the type attribute to text/javascript it should.

0 Likes
#9

Yes, that works, thanks. So the problem is Sublime doesn’t have a Paperscript syntax, so I need to download that and include it in Sublime somehow?

0 Likes
#10

More or less, but you’ll also need an HTML syntax that knows to include the paperscript syntax.

0 Likes
#11

If it works for the creator of the course, perhaps there are instructions in there for what packages and setup the course creator used to get their results?

0 Likes
#12

I’ve followed along from the beginning so I would have changed the settings if it had come up

0 Likes
#13

I don’t see a package available for paper.js or paperscript. Probably the easiest thing to do would just be to patch your HTML syntax. Download this file and save it in a new “HTML” directory in your “Packages” directory. Then, replace the following line:

- match: '(<)((?i:script))\b(?![^>]*/>)(?![^>]*(?i:type.?=.?text/((?!javascript).*)))'

With:

- match: '(<)((?i:script))\b(?![^>]*/>)(?![^>]*(?i:type.?=.?text/((?!javascript|paperscript).*)))'

This will override the built-in HTML syntax highlighting. When it sees <script type="text/paperscript">, it will highlight the contents as JavaScript. This should probably work well enough for paperscript code.

0 Likes
#14

I actually found this solution but didn’t know how to implement it. It said you have to unzip the HTML package (which I was unable to do with multiple unzip programs). I tried your solution, edited the file and copied it to a directory called HTML inside of Packages, but it still doesn’t work :frowning:

0 Likes
#15

I tested it out, and it should work. Is the file named HTML.sublime-syntax? If you’re on Windows, make sure it’s not hiding file extensions.

0 Likes
#16

It’s called exactly that! And on Mac, too…

0 Likes
#17

Did you do anything after putting the file in the HTML directory?

0 Likes
#18

I moved it into the (new) Packages/HTML directory, then edited the file and saved it.

When you save the file, Sublime will recompile the syntax. There may be a brief pause, and you will see a console message generating syntax summary. You may also see other messages. You should see console output every time you save the file, even if you don’t make any changes. Do you see console output?

0 Likes
#19

I see at the very bottom of my window that Sublime is saving the file, but no recompiling happens and I still don’t get my paperscript colored.

0 Likes
#20

So I’ve added |paperscript after javascript in the file, saved it as HTML.sublime-syntax inside a directory /Contents/MacOS/Packages/HTML in the Sublime Text application… but it still fails to work

0 Likes