From 50ba39204dbd947a51591d7b64fa8e7d91a45e47 Mon Sep 17 00:00:00 2001 From: Benny Powers Date: Mon, 23 Sep 2024 16:01:35 +0300 Subject: [PATCH] fix: change prism-prerendered to prerendered --- .changeset/great-adults-hear.md | 4 ++-- .../demo/prerendered-prism-highlighting.html | 6 +++--- elements/rh-code-block/rh-code-block.css | 2 +- elements/rh-code-block/rh-code-block.ts | 12 +++++++++--- 4 files changed, 15 insertions(+), 9 deletions(-) diff --git a/.changeset/great-adults-hear.md b/.changeset/great-adults-hear.md index 6ff5b8feaf..704268400c 100644 --- a/.changeset/great-adults-hear.md +++ b/.changeset/great-adults-hear.md @@ -2,11 +2,11 @@ "@rhds/elements": minor --- ``: 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 - + 
a {
   color: var(--rh-color-interactive-primary-default);
   }
diff --git a/elements/rh-code-block/demo/prerendered-prism-highlighting.html b/elements/rh-code-block/demo/prerendered-prism-highlighting.html index e8a0820a9a..9fa73818bb 100644 --- a/elements/rh-code-block/demo/prerendered-prism-highlighting.html +++ b/elements/rh-code-block/demo/prerendered-prism-highlighting.html @@ -1,5 +1,5 @@ - + 
<!DOCTYPE html>
 <html lang="en">
   <head>
@@ -24,7 +24,7 @@
 </html>
 - + 
rh-card.avatar-card {
   width: 360px;
   &::part(body) {
@@ -44,7 +44,7 @@
 }
 - + 
extends:
   - stylelint-config-standard
   - '@stylistic/stylelint-config'
diff --git a/elements/rh-code-block/rh-code-block.css b/elements/rh-code-block/rh-code-block.css
index faf1fcd385..c602d9c3d8 100644
--- 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
index d688123f16..3469cc543c 100644
--- 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", `` will automatically highlight the source code using Prism.js */
-  @property() highlighting?: 'client' | 'prism-prerendered';
+  /**
+   * When set to "client", `` will automatically highlight the source using Prism.js
+   * When set to "Prerendered", `` 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();
   }