(Bash) Highlighted colors doesn't look correct

[tuyen-at-work]

Describe the issue Issues:

• Only highlight part of command paramters
• Inconsistent color between lines

Which language seems to have the issue? Bash

Are you using highlight or highlightAuto? highlight

...

Sample Code to Reproduce

1st example:

epi deployment start \
  --project my-project \
  --deployment-package my-project.cms.app.1.0.0.nupkg \
  --env Integration \
  --direct-deploy true \
  --use-maintainance-page true \
  --wait true \
  --show-progress true

2nd example:

epi deployment start \
  --project my-project \
  --deployment-package my-project.cms.app.1.0.0.nupkg \
  --env Integration \
  --direct-deploy true \
  --use-maintainance-page true \
  --wait true \
  --show-progress true

For partial highlight, I see one part has hljs-built_in class, while the other doesn't has any class.

Expected behavior

• Should highlight the whole command paramter name
• Command parameter names should have same colors across lines

Additional context Live example: https://cli.eshn.dev/epi-deployment-start-command.html#samples

Reproduce on Highlight.js demo:

[joshgoebel]

wait and env are commands, so those are false positives - not switch highlights. We don't seem to support switch highlights. After v12 we could use negative look-behind to fix this, for now we'd need to add an additional matcher (with no scope) to gobble up -- arguments to prevent the keyword engine from seeing them. That's the typical fix for these sort of things. Tagging appropriately.

[tuyen-at-work]

I'm able to highlight the parameters using the following code:

Add arguments to Bash:

const ARGS = {
  variants: [
    {
      className: "attr",
      begin: /(?<=^|\s)(-){1,2}[\w\d-]+/,
      relevance: 0,
    },
  ],
}

Then add it to the contains array at the end of src/languages/bash.js file. However it makes a lot of test fails. If I added this code directly to the highlight.js minified code, the output matches my expectation:

Live example: https://cli.eshn.dev/epi-deployment-start-command.html#samples

Screenshot:

Since I'm not a Bash expert, I cannot tell whether all failed tests are more correct than the expectation, so I make no PR. I will keep my modified highlight.js version since it works for my usecase.

[tuyen-at-work]

The modified code also solve other highlight issue as well. If the subcommand contains a builtin keyword, it's no longer partially highlighted.

I see in the failed test cases, the partial highlight is expected, but I like the new output more.

Before:

After:

[joshgoebel]

Maybe you can make a PR or what you have so far and I can have a look.

(?<=^|\s)

This is look-behind though and that's not going to fly in v11. Perhaps if for short-term we just included the whitespace in the match? Would that work?

[tuyen-at-work]

@joshgoebel I created the PR. I understand that look behind is a breaking change, so can not make it in v11. I check for any tab/space before the argument per your suggestion, and visually it works as expected. Behind the scene, it add a single space/tab char into highlighted span.

[tuyen-at-work]

@joshgoebel could you help check the PR and let me know if any change can be made?

[GufNZ]

Is there any ETA on either Safari getting with the program or this lib dropping Safari support? Alternatively, has anyone ported something like PCRE to JS or webAsm?

[radarfox]

This looks great, thank you. Maybe I would recommend to change the first character to any whitespace, so also multiline commands written like this will match it.

epi deployment start \
--project my-project \
--deployment-package my-project.cms.app.1.0.0.nupkg \
--env Integration \
--direct-deploy true \
--use-maintainance-page true \
--wait true \
--show-progress true

{
  variants: [
    {
      className: 'attr',
      begin: /[\s](-){1,2}[\w\d-]+/,
      relevance: 0,
    },
  ],
}