[SOLVED] PHP syntax highlighting issue inside HTML quotes

#1

Honestly, not sure if this is a bug or a feature but I find it confusing when scanning my code for certain functions. Basically, php highlighting for some code (namely functions, from what I’ve noticed) seems to work differently when declared inside of HTML quotes. For example, a normal php function is highlighted as follows in the top line of code, but when used inside of HTML quotes (such as an href or class attributes), functions seem to be recognized as attribute values rather than php, as in the bottom line:

image.png733x78 9.88 KB

Interesting that it only affects the functions and not other php constructs. I’ve seen a lot of other posts about syntax highlighting in HTML but none about this specifically. Anyone else notice this issue?

I use the One Dark theme, for reference.

EDIT: Here is the fix:

For the One Dark theme, I use the following:

// Fixes php inside of strings
.syntax--string .syntax--source,
.syntax--string .syntax--meta.syntax--embedded.syntax--line {
  color: hsl( 220, 14%, 71% );
}

// The above fix affects punctuation in the closing php tag,
// so use this to reset the color accordingly.
.syntax--string .syntax--punctuation.syntax--section.syntax--embedded .syntax--source {
  color: hsl( 5, 48%, 51% );
}

I’m not sure if you can use theme variables in style.less, but either way I didn’t feel like digging into the theme to figure out what those are and I don’t intend to switch themes any time soon. :slight_smile: I may submit a pull request on the theme, but in the mean time I hope this helps anyone else who has the same issue!

#2

I think that your question is “why is the PHP snippet in the href green instead of white?”, but please correct me if I’m wrong.

The answer to that question is because PHP is being embedded into the HTML file. Whatever syntax theme you’re using (One Dark?) colors strings green. So when you put PHP inside a string, by default everything gets colored green, and then the additional PHP syntax highlighting overrides the green. It looks like in this case PHP methods aren’t supported that well, hence they aren’t receiving additional syntax highlighting, and are receiving green as a result.

You might want to file an issue on atom/language-php to request adding support for methods. In the meantime, you should also be able to customize your styles.less file to not apply the green when writing PHP inside strings.

#3

Perfect. To be clear, this is in fact a php file but I’m not entirely sure that makes a difference in this case, as when I close the php declaration and start using HTML that syntax styling takes over. That said, I’ll take this over to GitHub and modify styles per your suggestion. Thank you!

#4

Just saw that this issue has already been reported on atom/language-php and is an issue with the theme I’m using, not Atom itself. This can be fixed by modifying the theme, and I will post the code here once it’s done for anyone else who might have this problem.

#5

For the One Dark theme, I use the following:

// Fixes php inside of strings
.syntax--string .syntax--source,
.syntax--string .syntax--meta.syntax--embedded.syntax--line {
  color: hsl( 220, 14%, 71% );
}

// The above fix affects punctuation in the closing php tag,
// so use this to reset the color accordingly.
.syntax--string .syntax--punctuation.syntax--section.syntax--embedded .syntax--source {
  color: hsl( 5, 48%, 51% );
}

I’m not sure if you can use theme variables in style.less, but either way I didn’t feel like digging into the theme to figure out what those are and I don’t intend to switch themes any time soon. :slight_smile: I may submit a pull request on the theme, but in the mean time I just submitted it as an issue at atom/one-dark-syntax/issues/95. I hope this helps anyone else who has the same problem with this theme or others!