Vue: Handle more edge cases

[Gusted]

• The parsing of v- directives expected that this always ended in ">, however it is possible that there are other attributes after an v- directive also it made the assumption that there couldn't be any spaces in the value of the directive. Therefore it could result in incorrect lexing where almost the whole file could be marked as an LiteralString.
• Handle - in HTML element names.
• Explicitly mark = as an operator token.
• Tests added.
• Ref: https://codeberg.org/forgejo/forgejo/issues/2945

Before

After

[Maia-Everett]

As the original reporter of this bug for Forgejo, the "after" behavior is exactly what I wanted and I hope this gets merged. Thanks!

Edit: though I'm not sure why the closing tags for q-* elements are colored red why the closing tags for standard HTML elements aren't. Either this is working as intended, or it's a separate bug.

[Gusted]

Edit: though I'm not sure why the closing tags for q-* elements are colored red why the closing tags for standard HTML elements aren't. Either this is working as intended, or it's a separate bug.

Fixed by https://github.com/alecthomas/chroma/compare/90531d5c073acb919eeecfbe743ae8c6ef0f0dfa..d33880c230195603aa80484942e268944ebd6e17 also updated the screenshot accordingly.

[Gusted]

@alecthomas Thank you for time to review this! Much appreciated.

[alecthomas]

Thanks for the PR!