Automattic / Automattic/syntaxhighlighter

Inconsitent styling of JavaScript line containing template literal

Open
#281 0 comments 0 reactions 0 assignees View on GitHub
[Type] Bug
Dominant language
CSS
Stars
251
Forks
81
PR merge metrics
No merged PRs in 30d

Description

### Steps to Reproduce
- Add a SyntaxHighlighter Code block with the language set to JavaScript, containing a script that includes a template literal
- View the page to find the line containing the template literal has inconsistent styling

### What I Expected
The template literal uses `string` styles, and the code after it the same `plain` styles as the code before it.

### What Happened Instead
Code after the opening backtick all uses the `preprocessor` styles.

### PHP / WordPress / SyntaxHighlighter Evolved version
PHP 8.2
WP 6.6.2
SHE 3.7.1

### Browser / OS version
Arc 1.78.1
macOS 14.7

### Screenshot / Video

Image

### Context / Source
https://docs.gravityforms.com/gform-submission-pre_submission/

Contributor guide

No contributing guide indexed for this repository

Research direction

Start by reproducing the issue in the SyntaxHighlighter Code block using the linked Gravity Forms page as context. Trace how the JavaScript language handles a template literal and compare the rendered styles before, inside, and after the backticks. Done means template contents render with string styling and following code returns to plain styling.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript
Domain
tooling
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
45/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.