(PowerShell) Specific elements not being identified for highlighting

[Ayanmullick]

Describe the issue

Syntax highlighting isn’t working for some elements of PowerShell. I think the PowerShell language grammar to identify certain elements needs to be updated.

1. The entire line after a # sign is commented even if there no space after #
2. The Noun part of the cmdlet isn’t highlighted
3. The parameter name isn’t highlighted
4. PowerShell parameter arguments don’t need to be in quotes unless there is a space in between

**Are you using highlight or highlightAuto? highlight

...

Sample Code to Reproduce

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.3.1/build/styles/atom-one-dark.min.css">
<script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.3.1/build/highlight.min.js"></script>
<script>hljs.highlightAll();</script>

<pre><code class="pwsh">
    #Locate SQL image
    Get-AzVMImagePublisher -Location 'southcentralus'|? PublisherName -Like *sql*
    Get-AzVMImageOffer -Location southcentralus -PublisherName MicrosoftSQLServer
</code></pre>   

CodePen link to reproduce issue: https://codepen.io/ayanmullick/pen/YzrPobY

Expected behavior

Screenshot:

Library: This screenshot is from PowerShell ISE. One could export the theme XML from Tools-Options-Manage themes-Export
One gets similar highlighting experience on Discord too.

Additional context : NA

[joshgoebel]

Powershell is not included in the default build - so highlighting is going to be entirely random (whatever is auto-detected). Please load the JS module for powershell first (see docs, readme) and if you still see issues this can be reopened.

[Ayanmullick]

Thanks for pointing out, @joshgoebel. I loaded powershell.min.js. However, these tree issues are still there.

1. PowerShell parameter values don’t need to be in quotes unless there is a space in between
2. ? is an Alias for Where-Object and should have the same highlighting as the cmdlet.
3. The operator and the value should have different highlighting

Updated code

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.3.1/build/styles/atom-one-dark.min.css">
<script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.3.1/build/highlight.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.3.1/languages/powershell.min.js"></script>
<script>hljs.highlightAll();</script>

<pre><code class="pwsh">
    #Locate SQL image
    Get-AzVMImagePublisher -Location 'southcentralus'|? PublisherName -Like *sql*
    Get-AzVMImageOffer -Location southcentralus -PublisherName MicrosoftSQLServer
 </code></pre>  

CodePen link: https://codepen.io/ayanmullick/pen/YzrPobY

Could this be reopened?

[joshgoebel]

1. Yet if unquoted they are not a quoted string, and hence unhighlighted. The highlighting is based on the syntax [quotes], not the context, which we cannot fully understand.
2. I'm not sure this 100% follows, but possibly. I'm trying to think of an equivalent from other grammars. Is the ? only valid after a pipe?
3. -Like is correctly scoped as operator, but not all themes support this. Use a different theme or modify your CSS/theme to add support.

[Ayanmullick]

1. PowerShell does not need a quoted string to pass as a parameter value. Could highlight.js use the grammar exported from PowerShell ISE to fully understand the context?

2. ? Is an alias for Where-Object. Yes, it's mostly used after a |. But it's fine. Just remembered, it's recommended to avoid aliases for purposes of syntax highlighting.

3. Yes, the default theme is highlighting the operator and value differently. Should one look for the repository of a specific theme to submit feedback?

Updated code

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.3.1/build/styles/default.min.css">
<script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.3.1/build/highlight.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.3.1/languages/powershell.min.js"></script>
<script>hljs.highlightAll();</script>

<pre><code class="pwsh">
    #Locate SQL image
    Get-AzVMImagePublisher -Location 'southcentralus'|? PublisherName -Like *sql*
    Get-AzVMImageOffer -Location southcentralus -PublisherName MicrosoftSQLServer
 </code></pre>   

Screenshot

[joshgoebel]

Could highlight.js use the grammar exported from PowerShell ISE to fully understand the context?

Doubtful, we use our own grammar language (see the docs) to describe grammars, and we [often] aren't interested in contextual highlighting because it's [quite often] an impossible (or very hard) problem to solve without a full parser (which is not what our engine is designed to do).

I've tried to encourage several people to work on a plugin that would allow us to piggy back/integrate Code Mirror 6 grammars - which are much, much more fully featured. But no one has taken me up on it yet, and it would probably involve writing a CodeMirror 6 Lezer grammar from scratch as well. I have little interest in the Code Mirror 5 stuff (which is where most of the supported languages still are).

Just remembered, it's recommended to avoid aliases for purposes of syntax highlighting.

And probably readability in general... :-)

Should one look for the repository of a specific theme to submit feedback?

For our Base16 themes, yes. But base16 doesn't believe in highlighting operators it seems - so that's an uphill battle.

base05  #{{base05-hex}}  Default Foreground, Caret, Delimiters, Operators

...for 1st party themes (if you have a good eye) you could open a SMALL PR [initially], but I'm not going to allow "please add operators to this theme" style issues... I'd close them as dups of #2500. This lack of support affects many themes and is a known problem. Few grammars currently define operator scopes, so this is a longer-term issue.

Or we could debate whether these are operators at all... but I tend to go into such discussions based on semantics - not the desired highlighting result... so we choose what's best semantically - even if the highlighting is poor. Those who want the VERY best highlighting should use a custom theme for whichever languages they plan to highlight most since there is no much variation among languages.

What does Microsoft themselves call -Like (and friends) grammatically?

[Ayanmullick]

Thanks for the detailed explanation, @joshgoebel .

What does Microsoft themselves call -Like (and friends) grammatically?

-Like is a comparison operator
https://docs.microsoft.com/en-us/powershell/module/microsoft.powershell.core/about/about_operators?view=powershell-7.2#comparison-operators

[joshgoebel]

-Like is a comparison operator

Then I'd say operator is correct and we just need to wait for themes to catch up - and those who truly care right now need to tweak their own CSS to better support operators. I'd also say base16 themes may not be best-suited to grammars that use "keyword like" operators, like Powershell.

[Ayanmullick]

Operator highlighting is working fine with the atom-one-dark-reasonable theme. 😄