feat(foxy-experimental-add-to-cart-builder): add syntax highlighting

package.json

@@ -49,6 +49,7 @@
     "uainfer": "^0.5.0",
     "vanilla-hcaptcha": "^1.0.2",
     "webcomponent-qr-code": "^1.0.5",
+    "highlight.js": "^10.7.3",
     "xstate": "^4.16.0"
   },
   "devDependencies": {
@@ -93,7 +94,6 @@
     "eslint-plugin-html": "^6.1.2",
     "eslint-plugin-import": "^2.22.1",
     "eslint-plugin-sort-class-members": "^1.8.0",
-    "highlight.js": "^10.7.2",
     "husky": "^4.2.5",
     "lint-staged": "^10.3.0",
     "lit-html": "^1.3.0",

src/elements/public/ExperimentalAddToCartBuilder/ExperimentalAddToCartBuilder.ts

@@ -11,14 +11,18 @@ import { BooleanSelector } from '@foxy.io/sdk/core';
 import { decode, encode } from 'html-entities';
 import { InternalForm } from '../../internal/InternalForm/InternalForm';
 import { previewCSS } from './preview.css';
+import { unsafeHTML } from 'lit-html/directives/unsafe-html';
 import { html, svg } from 'lit-element';
 import { ifDefined } from 'lit-html/directives/if-defined';
 import { classMap } from '../../../utils/class-map';
 
 import debounce from 'lodash-es/debounce';
+import hljsxml from 'highlight.js/lib/languages/xml.js';
+import hljs from 'highlight.js/lib/core.js';
 
 const NS = 'experimental-add-to-cart-builder';
 const Base = ResponsiveMixin(TranslatableMixin(InternalForm, NS));
+hljs.registerLanguage('xml', hljsxml);
 
 /**
  * WARNING: this element is marked as experimental and is subject to change in future releases.
@@ -199,7 +203,11 @@ export class ExperimentalAddToCartBuilder extends Base<Data> {
                         'blur-sm': this.__signingState !== 'idle',
                       })}
                     >
-                      <code class="whitespace-pre">${addToCartCode.formHTML}</code>
+                      <code class="whitespace-pre"
+                        >${unsafeHTML(
+                          hljs.highlight(addToCartCode.formHTML, { language: 'xml' }).value
+                        )}</code
+                      >
                     </div>
 
                     <div

src/mixins/themeable.ts

@@ -158,6 +158,26 @@ export const ThemeableMixin = <TBase extends Base>(
               .snap-start {
                 scroll-snap-align: start;
               }
+
+              .hljs-tag {
+                color: var(--lumo-tertiary-text-color);
+                font-weight: 500;
+              }
+
+              .hljs-name {
+                color: var(--lumo-primary-text-color);
+                font-weight: 500;
+              }
+
+              .hljs-attr {
+                color: var(--lumo-secondary-text-color);
+                font-weight: 500;
+              }
+
+              .hljs-string {
+                color: var(--lumo-success-text-color);
+                font-weight: 500;
+              }
             }
           }
         `,