RedHat-UX · bennypowers · Sep 11, 2024 · Sep 6, 2024 · Sep 9, 2024 · Sep 9, 2024
diff --git a/.changeset/tricky-windows-draw.md b/.changeset/tricky-windows-draw.md
@@ -0,0 +1,5 @@
+---
+"@rhds/elements": minor
+---
+
+`<rh-code-block>`: Added `highlighting="client"` for client-side syntax highlighting with Red Hat colour scheme
diff --git a/declaration.d.ts b/declaration.d.ts
@@ -10,3 +10,8 @@ declare module '*.css' {
 declare module '@rhds/tokens/media.js' {
   export * from '@rhds/tokens/js/media.js';
 }
+
+declare module 'prism-esm/plugins/line-numbers/prism-line-numbers.js' {
+  import type { Prism } from "prism-esm";
+  export function Plugin(prism: Prism): void
+}
diff --git a/elements/rh-code-block/demo/client-side-highlighting.html b/elements/rh-code-block/demo/client-side-highlighting.html
@@ -0,0 +1,81 @@
+<rh-context-demo>
+  <rh-code-block dedent language="html" highlighting="client">
+    <script type="text/html">
+      <!DOCTYPE html>
+      <html lang="en">
+        <head>
+          <meta charset="utf-8">
+          <meta name="viewport" content="width=device-width">
+          <title>Cards Galore!</title>
+        </head>
+        <body>
+          <main>
+            <rh-card>
+              <h2 slot="header">Card</h2>
+              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+                 Nullam eleifend elit sed est egestas, a sollicitudin mauris
+                 tincidunt. Pellentesque vel dapibus risus. Nullam aliquam
+                 felis orci, eget cursus mi lacinia quis. Vivamus at felis sem.</p>
+              <rh-cta slot="footer" priority="primary">
+                <a href="#">Call to action</a>
+              </rh-cta>
+            </rh-card>
+          </main>
+        </body>
+      </html>
+    </script>
+  </rh-code-block>
+
+  <rh-code-block dedent language="css" highlighting="client">
+    <script type="text/css">
+      rh-card.avatar-card {
+        width: 360px;
+        &::part(body) {
+          margin-block-start: var(--rh-space-lg, 16px);
+        }
+
+        & p {
+          margin-block-start: 0;
+        }
+
+        & h4 {
+          font-weight: var(--rh-font-weight-heading-regular, 300);
+          font-size: var(--rh-font-size-body-text-md, 1rem);
+          font-family: var(--rh-font-family-body-text);
+          line-height: var(--rh-line-height-body-text, 1.5);
+        }
+      }
+    </script>
+  </rh-code-block>
+
+  <rh-code-block dedent language="yaml" highlighting="client">
+    <script type="text/yaml">
+      extends:
+        - stylelint-config-standard
+        - '@stylistic/stylelint-config'
+
+      plugins:
+        - ./node_modules/@rhds/tokens/plugins/stylelint.js
+        - '@stylistic/stylelint-plugin'
+
+      rules:
+        rhds/token-values: true
+        rhds/no-unknown-token-name:
+          - true
+          - allowed:
+            - --rh-icon-size
+    </script>
+  </rh-code-block>
+</rh-context-demo>
+
+<script type="module">
+  import '@rhds/elements/lib/elements/rh-context-demo/rh-context-demo.js';
+  import '@rhds/elements/rh-code-block/rh-code-block.js';
+</script>
+
+<style>
+rh-context-demo::part(demo) {
+  display: grid;
+  gap: var(--rh-space-sm, 6px);
+}
+</style>
diff --git a/elements/rh-code-block/prism.css.ts b/elements/rh-code-block/prism.css.ts
@@ -0,0 +1,73 @@
+import { css } from 'lit';
+
+export const prismStyles = css` code[class*="language-"],
+pre[class*="language-"] {
+  color: var(--_code-color);
+  font-family: var(--rh-font-family-code, RedHatMono, "Red Hat Mono", "Courier New", Courier, monospace);
+  text-align: left;
+  white-space: pre;
+  word-spacing: normal;
+  word-break: normal;
+  word-wrap: normal;
+  line-height: var(--rh-line-height-code, 1.5);
+  tab-size: 4;
+  hyphens: none;
+}
+
+pre[class*="language-"]::selection,
+pre[class*="language-"] ::selection,
+code[class*="language-"]::selection,
+code[class*="language-"] ::selection {
+  text-shadow: none;
+  background: var(--_selected-text-background);
+}
+
+@media print {
+  code[class*="language-"],
+  pre[class*="language-"] {
+    text-shadow: none;
+  }
+}
+
+.token.atrule { color: var(--_at-rule-color); }
+.token.attr-name { color: var(--_attr-name-color); }
+.token.attr-value { color: var(--_attr-value-color); }
+.token.bold { font-weight: var(--_important-color); }
+.token.boolean { color: var(--_boolean-color); }
+.token.builtin { color: var(--_built-in-color); }
+.token.cdata { color: var(--_cdata-color); }
+.token.char { color: var(--_character-color); }
+.token.class-name { color: var(--_class-name-color); }
+.token.comment { color: var(--_comment-color); }
+.token.constant { color: var(--_constant-color); }
+.token.deleted { color: var(--_deleted-color); }
+.token.function { color: var(--_function-name-color); }
+.token.important { color: var(--_important-color); }
+.token.inserted { color: var(--_inserted-color); }
+.token.keyword { color: var(--_keyword-color); }
+.token.namespace { color: var(--_namespace-color); }
+.token.number { color: var(--_number-color); }
+.token.operator { color: var(--_operator-color); }
+.token.property { color: var(--_property-color); }
+.token.punctuation { color: var(--_punctuation-color); }
+.token.regex { color: var(--_regex-color); }
+.token.selector { color: var(--_selector-color); }
+.token.string { color: var(--_string-color); }
+.token.symbol { color: var(--_symbol-color); }
+.token.tag { color: var(--_tag-color); }
+.token.url { color: var(--_url-color); }
+.token.variable { color: var(--_variable-color); }
+
+.token.italic { font-style: italic; }
+
+.token.entity {
+  color: var(--_entity-color);
+  cursor: help;
+}
+
+.token.prolog,
+.token.doctype { color: var(--_doctype-color); }
+
+.language-css .token.string,
+.style .token.string { color: var(--_operator-color); }
+`;
diff --git a/elements/rh-code-block/prism.ts b/elements/rh-code-block/prism.ts
@@ -0,0 +1,44 @@
+import type { RhCodeBlock } from './rh-code-block.js';
+import { Prism } from 'prism-esm';
+import { Plugin as LineNumbers } from 'prism-esm/plugins/line-numbers/prism-line-numbers.js';
+import { unsafeHTML } from 'lit/directives/unsafe-html.js';
+
+const prism = new Prism({ manual: true });
+LineNumbers(prism);
+
+/**
+ * Autoload a supported language
+ * @param language a supported language
+ */
+async function autoloader(language: RhCodeBlock['language']) {
+  switch (language) {
+    case 'html': return import('prism-esm/components/prism-markup.js').then(m => m.loader(prism));
+    case 'css': return import('prism-esm/components/prism-css.js').then(m => m.loader(prism));
+    // @ts-expect-error: be liberal about what you accept
+    case 'js':
+    case 'javascript': return import('prism-esm/components/prism-javascript.js')
+        .then(m => m.loader(prism));
+    // @ts-expect-error: be liberal about what you accept
+    case 'ts':
+    case 'typescript': return import('prism-esm/components/prism-typescript.js')
+        .then(m => m.loader(prism));
+    case 'bash': return import('prism-esm/components/prism-bash.js').then(m => m.loader(prism));
+    case 'ruby': return import('prism-esm/components/prism-ruby.js').then(m => m.loader(prism));
+    case 'yaml': return import('prism-esm/components/prism-yaml.js').then(m => m.loader(prism));
+    case 'json': return import('prism-esm/components/prism-json.js').then(m => m.loader(prism));
+  }
+}
+
+/**
+ * Highlight a string using prism.js
+ * @param textContent source code
+ * @param language a supported language
+ */
+export async function highlight(textContent: string, language: RhCodeBlock['language']) {
+  await autoloader(language);
+  const highlighted = prism.highlight(textContent, prism.languages[language!], language!);
+  return unsafeHTML(highlighted);
+}
+
+export { prismStyles } from './prism.css.js';
+
diff --git a/elements/rh-code-block/rh-code-block.css b/elements/rh-code-block/rh-code-block.css
@@ -59,10 +59,15 @@
 #container,
 #content-lines,
 #content,
+#prism-output,
 #sizers {
   max-width: 100%;
 }
 
+#prism-output {
+  margin: 0;
+}
+
 #container {
   --_code-main-spacer: var(--rh-space-xl, 24px);
 
@@ -94,6 +99,7 @@
 }
 
 #sizers,
+#prism-output,
 #content {
   display: block;
   font-family: var(--rh-font-family-code, RedHatMono, "Red Hat Mono", "Courier New", Courier, monospace);
@@ -103,6 +109,7 @@
 }
 
 #sizers,
+#prism-output,
 #content::slotted(:is(script, pre)) {
   display: inline;
   white-space: var(--_code-white-space, pre);
@@ -279,3 +286,76 @@
   margin-block: var(--rh-space-lg, 16px);
   gap: var(--rh-space-md, 8px);
 }
+
+.on,
+.on.light {
+  --_default-color: var(--rh-color-gray-95, #151515);
+  --_selected-text-background: var(--rh-color-blue-10, #e0f0ff);
+  --_comment-color: var(--rh-color-gray-60, #4d4d4d);
+  --_comment-block-color: var(--rh-color-gray-60, #4d4d4d);
+  --_doctype-color: var(--rh-color-gray-60, #4d4d4d);
+  --_cdata-color: var(--rh-color-gray-60, #4d4d4d);
+  --_punctuation-color: var(--rh-color-gray-40, #a3a3a3);
+  --_namespace-color: var(--rh-color-gray-95, #151515);
+  --_property-color: var(--rh-color-purple-50, #5e40be);
+  --_tag-color: var(--rh-color-purple-50, #5e40be);
+  --_boolean-color: var(--rh-color-purple-50, #5e40be);
+  --_number-color: var(--rh-color-purple-50, #5e40be);
+  --_constant-color: var(--rh-color-purple-50, #5e40be);
+  --_symbol-color: var(--rh-color-purple-50, #5e40be);
+  --_deleted-color: var(--rh-color-purple-50, #5e40be);
+  --_function-name-color: var(--rh-color-purple-50, #5e40be);
+  --_selector-color: var(--rh-color-teal-60, #147878);
+  --_attr-name-color: var(--rh-color-teal-60, #147878);
+  --_string-color: var(--rh-color-teal-60, #147878);
+  --_character-color: var(--rh-color-teal-60, #147878);
+  --_built-in-color: var(--rh-color-teal-60, #147878);
+  --_inserted-color: var(--rh-color-teal-60, #147878);
+  --_operator-color: var(--rh-color-yellow-60, #96640f);
+  --_entity-color: var(--rh-color-yellow-60, #96640f);
+  --_url-color: var(--rh-color-yellow-60, #96640f);
+  --_at-rule-color: var(--rh-color-blue-60, #004d99);
+  --_attr-value-color: var(--rh-color-blue-60, #004d99);
+  --_keyword-color: var(--rh-color-blue-60, #004d99);
+  --_function-color: var(--rh-color-red-60, #a60000);
+  --_class-name-color: var(--rh-color-red-60, #a60000);
+  --_regex-color: var(--rh-color-orange-60, #9e4a06);
+  --_important-color: var(--rh-color-orange-60, #9e4a06);
+  --_variable-color: var(--rh-color-orange-60, #9e4a06);
+}
+
+.on.dark {
+  --_default-color: var(--rh-color-gray-20, #e0e0e0);
+  --_selected-text-background: var(--rh-color-gray-95, #151515);
+  --_comment-color: var(--rh-color-gray-50, #707070);
+  --_comment-block-color: var(--rh-color-gray-50, #707070);
+  --_doctype-color: var(--rh-color-gray-50, #707070);
+  --_cdata-color: var(--rh-color-gray-50, #707070);
+  --_punctuation-color: var(--rh-color-gray-20, #e0e0e0);
+  --_namespace-color: var(--rh-color-red-40, #f56e6e);
+  --_property-color: var(--rh-color-yellow-40, #dca614);
+  --_tag-color: var(--rh-color-red-10, #fce3e3);
+  --_boolean-color: var(--rh-color-orange-40, #f5921b);
+  --_number-color: var(--rh-color-orange-40, #f5921b);
+  --_constant-color: var(--rh-color-yellow-40, #dca614);
+  --_symbol-color: var(--rh-color-yellow-40, #dca614);
+  --_deleted-color: var(--rh-color-red-40, #f56e6e);
+  --_function-name-color: var(--rh-color-teal-20, #b9e5e5);
+  --_selector-color: var(--rh-color-purple-30, #b6a6e9);
+  --_attr-name-color: var(--rh-color-red-40, #f56e6e);
+  --_string-color: var(--rh-color-green-40, #87bb62);
+  --_character-color: var(--rh-color-green-40, #87bb62);
+  --_built-in-color: var(--rh-color-purple-30, #b6a6e9);
+  --_inserted-color: var(--rh-color-green-40, #87bb62);
+  --_operator-color: var(--rh-color-blue-40, #4394e5);
+  --_entity-color: var(--rh-color-blue-40, #4394e5);
+  --_url-color: var(--rh-color-blue-40, #4394e5);
+  --_at-rule-color: var(--rh-color-purple-30, #b6a6e9);
+  --_attr-value-color: var(--rh-color-green-40, #87bb62);
+  --_keyword-color: var(--rh-color-purple-30, #b6a6e9);
+  --_function-color: var(--rh-color-orange-40, #f5921b);
+  --_class-name-color: var(--rh-color-yellow-40, #dca614);
+  --_regex-color: var(--rh-color-green-40, #87bb62);
+  --_important-color: var(--rh-color-purple-30, #b6a6e9);
+  --_variable-color: var(--rh-color-green-40, #87bb62);
+}