Browse Source

fix(stacktrace): Add token aliases when applying syntax highlight class names (#62407)

This is only applicable for token types that aren't standard, but the
token `alias` should be applied as a class name as well.

For example, python has a token type `triple-quoted-string` which is
aliased as `string`. Since we don't have any specific styles for triple
quoted strings, we need the string classname for this to look right. See
https://prismjs.com/tokens.html#non-standard-tokens
Malachi Willey 1 year ago
parent
commit
291682c4ff
2 changed files with 6 additions and 1 deletions
  1. 1 1
      static/app/utils/usePrismTokens.spec.tsx
  2. 5 0
      static/app/utils/usePrismTokens.tsx

+ 1 - 1
static/app/utils/usePrismTokens.spec.tsx

@@ -98,7 +98,7 @@ describe('usePrismTokens', () => {
         {children: 'p', className: 'token tag'},
         {children: ' ', className: 'token tag'},
         {children: 'class', className: 'token tag attr-name'},
-        {children: '=', className: 'token tag attr-value punctuation'},
+        {children: '=', className: 'token tag attr-value punctuation attr-equals'},
         {children: '"', className: 'token tag attr-value punctuation'},
         {children: 'hey', className: 'token tag attr-value'},
         {children: '"', className: 'token tag attr-value punctuation'},

+ 5 - 0
static/app/utils/usePrismTokens.tsx

@@ -106,6 +106,11 @@ const splitTokenContentByLine = (
   }
 
   types.add(token.type);
+  if (typeof token.alias === 'string') {
+    types.add(token.alias);
+  } else if (Array.isArray(token.alias)) {
+    token.alias.forEach(alias => types.add(alias));
+  }
 
   if (Array.isArray(token.content)) {
     return splitMultipleTokensByLine(token.content, new Set(types));