Red highlighting in .js file


#1

See the screenshot below. I get no errors when I open the page in chrome and run the script and the text displays as expected. In Atom, the text is highlighted red. I see no syntax errors. The image shows soft wrapping - everything is on one line - there are no carriage returns or odd line endings (I have invisible characters set to visible).

I guess I could be missing something syntactical but I have no idea what it is.

Maybe this is some sort of Atom bug?

Anyone have any ideas about this?

Is there a way to just turn off the highlighting? I have browsed through the settings but I’m not seeing it.


#2

We can’t reproduce it without being able to copy and paste what you have. Posting it to the forum (marked as CODE so that markdown doesn’t interprete everything), or to a paste in would be good.

For now, does the issue happen when you remove the <p> tag?


#3

Here is a sample of the code.

txtArea.insertAdjacentHTML("beforeend", "<p>The code was specifically developed for welded steel structures that utilize carbon or low alloy steels that are 1/8 in [3 mm] or thicker with a minimum specified yield strength of 100 ksi [690 MPa] or less. The code may be suitable to govern structural fabrications outside the scope of the intended purpose. However, the Engineer should evaluate such suitability, and based upon such evaluations, incorporate into contract documents any necessary changes to code requirements to address the specific requirements of the application that is outside the scope of the code. The Structural Welding Committee encourages the Engineer to consider the applicability of other AWS D1 codes for applications involving aluminum (AWS D1.2), sheet steel equal to or less than 3/16 in [5 mm] thick (AWS D1.3), reinforcing steel (AWS D1.4), and stainless steel (AWS D1.6), strengthening and repair of existing structures (AWS D 1.7), seismic supplement (AWS D1.8), and titanium (AWS D1.9). The AASHTO/AWS D1.5 Bridge Welding Code was specifically developed for welding highway bridge components and is recommended for those applications.</p>");


#4

The

has nothing to do with it. I know that because the code snippet is one of hundreds of such lines. None of the other lines have this issue.


#5

Should say - The p tag…


#6

OK. I reproduced it. No idea what is causing the bug though. The best I can see is that the length is the problem, as it consistently triggers when the line length with the longs string is over ~1000 characters. I also couldn’t see any rules in the grammar that should trigger it.

To work around it, you could split the string over several lines. Alternatively, in Settings you can enable tree-sitter parsers, which don’t have that bug (but the highlighting looks a bit plainer right now).

As for the bug getting fixed, it seems unlikely. As far as I can tell, it’s a deeper issue than the grammar definition. With the move to tree-sitter, less focus is going to be placed on old grammars.

Edit: I have a hunch, I’ll get back to you


#7

Thanks for looking into it. I guess I will have to go now and read up on what tree-sitter is! lol

BTW, I also tried escaping out all of the brackets, parenthesis, periods, etc. and although the escape characters do not get rendered (as I thought they might!), it did nothing to remedy the red highlighting.


#8

OK, found the problem. For performance reasons, Atom will stop looking at a line when it’s over 1000 characters long by default. The biggest concern I think is if you open a minified file (which still causes problems anyway).

This translated to the parser looking at the first half of the string, but not seeing the closing quote mark. The same thing happens with just "hello by itself.

I don’t think there’s a “proper” way to change this, but the following works

atom.grammars.forEachGrammar(grammar => grammar.maxLineLength = 10000)

Run it in dev tools to see the immediate effect (you will need to change a character on the line for the highlighting to update).

This can be modified to go in the config too, but it’s late and I need sleep.

Oh, and tree sitter is the name of the new grammar engine Atom is transferring to. It looks promising, but is still disabled by default I believe.


#9

Hey, thanks for the research and the answer.

I’m new to atom so i have no idea how to change the config. In the meantime, it’s not a serious issue…


#10

My bad, I meant the init script. If you go inside the .atom folder (likely hidden in your home folder), you might see a file called init.coffee. If you haven’t used it yet, you can go ahead and delete it and make a new file called init.js.

Then paste this into the new file

let grammars = atom.grammars.getGrammars()
for (let i = 0; i < grammars.length; i++) {
  let grammar = grammars[i]
  grammar.maxLineLength = 3000 // change this number as needed
}

The above will set the max line length to three times bigger than the default. Alternatively, you could use Infinity.

I don’t know how this will affect performance when you open large minified files. When I open them accidentally, it tends to be slow even without this tweak though.


#11

You don’t necessarily have to change the tree-sitter setting or the max line length.
As w3schools states:

“You can also break up a code line within a text string with a single backslash”

However:

The \ method is not the preferred method. It might not have universal support.
Some browsers do not allow spaces behind the \ character.
A safer way to break up a string, is to use string addition:

document.getElementById(“demo”).innerHTML = "Hello " +
“Dolly!”;

https://www.w3schools.com/js/js_strings.asp


#12

True. But then there are the people who insist “if it runs, I’m fine and everything else must adapt to cope…”

I agree that making lines shorter in the first place is much better though.


#13

Thanks for the string addition tip. It just did not occur to me!

Regarding the browser stuff, If it runs on my desktop and in chrome is all I care about. I’m building this for Electron.

Also, this may be “taboo” for developer’s ears but in my opinion if I build something in 2018 and some person is still using IE8 or some old piece of crap browser like that or some weird browser that hardly anyone uses (opera?
who uses that?!)- well they need to get a better browser. Or go to another site! I am not going to spend one second worrying about those people.


#14

some weird browser that hardly anyone uses (opera?
who uses that?!)

Well, I do, Opera is a modern browser based on Webkit.


#15

well yeah, opera uses chromium since 2013, so opera and chrome have a lot in common.