update docs syntax theme

Author: bradlc

remark/utils.js

@@ -1,3 +1,5 @@
+const syntaxTheme = require('../src/utils/syntaxTheme')
+const dlv = require('dlv')
 const Prism = require('prismjs')
 const loadLanguages = require('prismjs/components/')
 loadLanguages()
@@ -27,10 +29,20 @@ module.exports.addExport = function addExport(tree, name, value) {
 }
 
 module.exports.highlightCode = function highlightCode(code, language) {
-  const highlighted = Prism.languages[language]
+  let highlighted = Prism.languages[language]
     ? Prism.highlight(code, Prism.languages[language], language)
     : code
 
+  highlighted = highlighted.replace(/class="token([^"]+)"/g, (_, p1) => {
+    const types = p1.trim().split(/\s/)
+    if (types.length === 0) return ''
+    const classes = types
+      .map((type) => dlv(syntaxTheme, [language, type], syntaxTheme[type]))
+      .filter(Boolean)
+    if (classes.length === 0) return ''
+    return `class="${classes.join(' ')}"`
+  })
+
   return language === 'html'
     ? highlighted.replace(
         /\*\*(.*?)\*\*/g,

src/components/CodeSample.js

@@ -41,9 +41,12 @@ export function CodeSample({ preview, snippet, previewClassName, color = 'gray'
         })}
       >
         <pre
-          className={clsx('scrollbar-none overflow-x-auto p-6 text-sm leading-snug language-html', {
-            'bg-black bg-opacity-75': codeBackground[color],
-          })}
+          className={clsx(
+            'scrollbar-none overflow-x-auto p-6 text-sm leading-snug language-html text-white',
+            {
+              'bg-black bg-opacity-75': codeBackground[color],
+            }
+          )}
         >
           <code className="language-html" dangerouslySetInnerHTML={{ __html: snippet }} />
         </pre>

src/components/CodeWindow.js

@@ -3,6 +3,7 @@ import { forwardRef, Fragment, useMemo } from 'react'
 import tokenize from '../macros/tokenize.macro'
 import { Code } from './Code'
 import styles from './CodeWindow.module.css'
+import syntaxTheme from '@/utils/syntaxTheme'
 
 const { tokens: defaultTokens } = tokenize.html(`<div class="flex pa-2 bg-white rounded-lg shadow">
   <div class="w-32 rounded-md overflow-hidden">
@@ -90,21 +91,13 @@ CodeWindow.Code = forwardRef(({ tokens = defaultTokens, initialLineNumber = 1, .
   )
 })
 
-const themeDict = {
-  punctuation: 'text-code-punctuation',
-  tag: 'text-code-tag',
-  'attr-name': 'text-code-attr-name',
-  'attr-value': 'text-code-attr-value',
-  class: 'text-code-attr-value',
-}
-
 export function getClassNameForToken({ types, empty }) {
   const typesSize = types.length
   if (typesSize === 1 && types[0] === 'plain') {
     return empty ? 'inline-block' : undefined
   }
   const className = (
-    (themeDict[types[typesSize - 1]] || '') + (empty ? ' inline-block' : '')
+    (syntaxTheme[types[typesSize - 1]] || '') + (empty ? ' inline-block' : '')
   ).trim()
   return className === '' ? undefined : className
 }

src/utils/syntaxTheme.js

@@ -0,0 +1,9 @@
+module.exports = {
+  punctuation: 'text-code-punctuation',
+  tag: 'text-code-tag',
+  'attr-name': 'text-code-attr-name',
+  'attr-value': 'text-code-attr-value',
+  class: 'text-code-attr-value',
+  string: 'text-code-string',
+  comment: 'opacity-25',
+}

tailwind.config.js

@@ -95,6 +95,7 @@ module.exports = {
             },
             pre: {
               backgroundColor: '-',
+              color: theme('colors.white'),
               borderRadius: 0,
               marginTop: 0,
               marginBottom: 0,