Improve highlight.php syntax highlighting (#2136)

Author: tylersticka

.changeset/modern-flowers-remember.md

@@ -0,0 +1,5 @@
+---
+'@cloudfour/patterns': patch
+---
+
+Improves quality of syntax highlighting for JavaScript (and similar languages) using highlight.php 9.x

src/vendor/highlight/_theme.scss

@@ -20,7 +20,7 @@
 
 .hljs-name,
 .hljs-built_in,
-.hljs-title,
+.hljs-variable.language_,
 .language-scss .hljs-variable {
   color: color.$base-fuchsia-lighter;
 }
@@ -66,6 +66,7 @@
 .hljs-attribute,
 .hljs-regexp,
 .hljs-template-tag,
+.hljs-title,
 .hljs-variable {
   color: color.$base-blue-lighter;
 }

src/vendor/highlight/demo/legacy.twig

@@ -0,0 +1,21 @@
+<pre><code class="hljs language-javascript"><span class="hljs-comment">// Sweet useless condition</span>
+<span class="hljs-keyword">if</span> (<span class="hljs-keyword">this</span> !== <span class="hljs-string">'that'</span> || truth == <span class="hljs-literal">false</span>) {
+  <span class="hljs-keyword">new</span> <span class="hljs-built_in">RegExp</span>(<span class="hljs-regexp">/ab+c/</span>, <span class="hljs-string">'i'</span>);
+  boyHowdy(<span class="hljs-number">5</span>, <span class="hljs-string">'something'</span>);
+  <span class="hljs-built_in">console</span>.log(<span class="hljs-string">'hello world'</span>);
+  <span class="hljs-keyword">return</span> (<span class="hljs-number">2</span> * <span class="hljs-number">4</span>) / <span class="hljs-number">3</span>;
+}
+
+<span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">Bread</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">Dough</span> </span>{
+  <span class="hljs-keyword">constructor</span>(slices = 12) {
+    <span class="hljs-keyword">if</span> (slices &gt; <span class="hljs-number">24</span>) {
+      <span class="hljs-keyword">throw</span> <span class="hljs-keyword">new</span> <span class="hljs-built_in">Error</span>(<span class="hljs-string">'Too much bread'</span>);
+    }
+
+    <span class="hljs-keyword">this</span>.slices = <span class="hljs-string">`There are <span class="hljs-subst">${slices}</span> slices`</span>;
+  }
+}
+
+<span class="hljs-keyword">const</span> sum = <span class="hljs-function">(<span class="hljs-params">...args</span>) =&gt;</span> {
+  <span class="hljs-keyword">return</span> args.reduce(<span class="hljs-function">(<span class="hljs-params">a, b</span>) =&gt;</span> a + b, <span class="hljs-number">0</span>);
+};</code></pre>

src/vendor/highlight/demo/samples/js.js

@@ -2,11 +2,20 @@
 if (this !== 'that' || truth == false) {
   new RegExp(/ab+c/, 'i');
   boyHowdy(5, 'something');
+  console.log('hello world');
   return (2 * 4) / 3;
 }
 
-class Bread {
+class Bread extends Dough {
   constructor(slices = 12) {
+    if (slices > 24) {
+      throw new Error('Too much bread');
+    }
+
     this.slices = `There are ${slices} slices`;
   }
 }
+
+const sum = (...args) => {
+  return args.reduce((a, b) => a + b, 0);
+};

src/vendor/highlight/highlight.stories.mdx

@@ -2,6 +2,7 @@ import { ArgsTable, Canvas, Meta, Story } from '@storybook/addon-docs';
 import { basename, extname } from 'path';
 import hljs from 'highlight.js';
 import themeDemo from './demo/theme.twig';
+import legacyDemo from './demo/legacy.twig';
 // Load samples directory as "raw" text
 const samplesDir = require.context('!!raw-loader!./demo/samples', false);
 // Initialize an object to store sample content in
@@ -59,6 +60,16 @@ For performance, it's strongly recommended to apply syntax highlighting on the s
 
 <ArgsTable story="Theme" />
 
+## Backwards Compatibility
+
+As of this writing, [highlight.php is two major versions behind Highlight.js](https://github.com/scrivo/highlight.php/issues/73). As a result, syntax highlighting may differ between platforms.
+
+Here is an example of JavaScript highlighted using highlight.php version 9.8.1.10.
+
+<Canvas>
+  <Story name="PHP Sample">{legacyDemo.bind()}</Story>
+</Canvas>
+
 ## Syntax-highlighting Code Block
 
 The [Syntax-highlighting Code Block plugin for WordPress](https://wordpress.org/plugins/syntax-highlighting-code-block/) enhances the core code block with [highlight.php](https://github.com/scrivo/highlight.php). It also adds a few additional features, including a code language label for accessibility.