fix: change prism-prerendered to prerendered

RedHat-UX · Sep 23, 2024 · 50ba392 · 50ba392
1 parent 10dc69d
commit 50ba392
Show file tree

Hide file tree

Showing 4 changed files with 15 additions and 9 deletions.
diff --git a/.changeset/great-adults-hear.md b/.changeset/great-adults-hear.md
@@ -2,11 +2,11 @@
 "@rhds/elements": minor
 ---
 `<rh-code-block>`: syntax highlighting via prerendered prismjs code-blocks. Use
-the `highlighting="prism-prerendered"` attribute when rendering code blocks using
+the `highlighting="prerendered"` attribute when rendering code blocks using
 server side prism, e.g. in a markdown fenced code block.
 
 ```html
-<rh-code-block highlighting="prism-prerendered">
+<rh-code-block highlighting="prerendered">
   <pre class="language-css"><code class="language-css"><span class="token selector">a</span> <span class="token punctuation">{</span>
   <span class="token property">color</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--rh-color-interactive-primary-default<span class="token punctuation">)</span><span class="token punctuation">;</span>
   <span class="token punctuation">}</span></pre>

diff --git a/elements/rh-code-block/demo/prerendered-prism-highlighting.html b/elements/rh-code-block/demo/prerendered-prism-highlighting.html
@@ -1,5 +1,5 @@
 <rh-context-demo>
-  <rh-code-block highlighting="prism-prerendered">
+  <rh-code-block highlighting="prerendered">
     <pre class="language-html"><code class="language-html"><span class="token doctype"><span class="token punctuation">&lt;!</span><span class="token doctype-tag">DOCTYPE</span> <span class="token name">html</span><span class="token punctuation">&gt;</span></span>
 <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>html</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>en<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
   <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>head</span><span class="token punctuation">&gt;</span></span>
@@ -24,7 +24,7 @@
 <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>html</span><span class="token punctuation">&gt;</span></span></code></pre>
   </rh-code-block>
 
-  <rh-code-block highlighting="prism-prerendered">
+  <rh-code-block highlighting="prerendered">
     <pre class="language-css"><code class="language-css"><span class="token selector">rh-card.avatar-card</span> <span class="token punctuation">{</span>
   <span class="token property">width</span><span class="token punctuation">:</span> 360px<span class="token punctuation">;</span>
   <span class="token selector">&amp;::part(body)</span> <span class="token punctuation">{</span>
@@ -44,7 +44,7 @@
 <span class="token punctuation">}</span></code></pre>
   </rh-code-block>
 
-  <rh-code-block highlighting="prism-prerendered">
+  <rh-code-block highlighting="prerendered">
     <pre class="language-yaml"><code class="language-yaml"><span class="token key atrule">extends</span><span class="token punctuation">:</span>
   <span class="token punctuation">-</span> stylelint<span class="token punctuation">-</span>config<span class="token punctuation">-</span>standard
   <span class="token punctuation">-</span> <span class="token string">'@stylistic/stylelint-config'</span>

diff --git a/elements/rh-code-block/rh-code-block.css b/elements/rh-code-block/rh-code-block.css
@@ -26,7 +26,7 @@
   border: none !important;
 }
 
-:host([highlighting='prism-prerendered']) ::slotted(pre) {
+:host([highlighting='prerendered']) ::slotted(pre) {
   opacity: 0;
   transition:
     opacity

diff --git a/elements/rh-code-block/rh-code-block.ts b/elements/rh-code-block/rh-code-block.ts
@@ -95,8 +95,12 @@ export class RhCodeBlock extends LitElement {
     },
   }) actions: ('copy' | 'wrap')[] = [];
 
-  /** When set to "client", `<rh-code-block>` will automatically highlight the source code using Prism.js */
-  @property() highlighting?: 'client' | 'prism-prerendered';
+  /**
+   * When set to "client", `<rh-code-block>` will automatically highlight the source using Prism.js
+   * When set to "Prerendered", `<rh-code-block>` will apply supported RHDS styles to children with
+   * prismjs classnames in the element's root.
+   */
+  @property() highlighting?: 'client' | 'prerendered';
 
   /** When set along with `highlighting="client"`, this grammar will be used to highlight source code */
   @property() language?:
@@ -229,7 +233,9 @@ export class RhCodeBlock extends LitElement {
   async #onSlotChange() {
     switch (this.highlighting) {
       case 'client': await this.#highlightWithPrism(); break;
-      case 'prism-prerendered': await this.#applyPrismPrerenderedStyles(); break;
+      // TODO: if we ever support other tokenizers e.g. highlightjs,
+      // dispatch here off of some supplemental attribute like `tokenizer="highlightjs"`
+      case 'prerendered': await this.#applyPrismPrerenderedStyles(); break;
     }
     this.#computeLineNumbers();
   }