Sublime Forum

Syntax highlighting for html code inside js file

#1

I have this code in a javascript file that I have written in Sublime Text 3. I am using babel, webpack and react. The code that I have made italic and bold is yellow in Sublime Text 3 as a result of the / in the closing h1 tag. I am not sure how to fix this syntax highlighting to allow me to write html code in a javascript file.

I believe that the code after the / is yellow as directories are yellow and start with a /. As a result I guess that Sublime Text 3 is treating the code as a directory (URL) within the code which is not desired. Any ideas on how I can get the code to be highlighted the correct way?

var React = require(‘react’);
var ReactDOM = require(‘react-dom’);

//creating a component
var ListComponent = React.createClass({
	render: function(){
		return(
			<h1>Hello World<***/h1>***

*** );***
*** }***
*** });***

*** //putting the component into the html page***
*** ReactDOM.render(, document.getElementById(‘list-wrapper’));***

Thanks for taking the time to read this post, any help would be great!

1 Like
#2

The standard syntax highlighting for JavaScript files doesn’t support this because JavaScript doesn’t allow for HTML inside JavaScript code. You want to install something with support for that particular syntax; since you mention you’re using babel you may or may not already have the Babel package for Sublime installed. If you don’t, installing it will provide you the syntax that you need:

The syntax is used for files with extensions .js, .jsx, .babel and .es6 but Sublime won’t use this syntax for .js files by default (because the other syntax is used instead).

To get around that you need to either rename your files to use one of the other extensions, or while you have a JavaScript file open, choose View > Syntax > Open all with current extension as... > Babel > JavaScript from the menu to set it as the default.

4 Likes
#3

Thanks. I installed the Babel package and changed the file extension to .jsx. I also tried the Babel package and set javascript (babel) to the default syntax and this worked better as it gave the correct syntax highlighting for the html code.

0 Likes