Remove ember-prism, use primsjs in docs

docs/app/app.ts

@@ -2,6 +2,20 @@ import Application from '@ember/application';
 import Resolver from 'ember-resolver';
 import loadInitializers from 'ember-load-initializers';
 import config from 'docs/config/environment';
+// @ts-expect-error no types shipped from prismjs
+import Prism from 'prismjs';
+import 'prismjs/plugins/normalize-whitespace/prism-normalize-whitespace';
+import 'prismjs/components/prism-css';
+import 'prismjs/components/prism-scss';
+import 'prismjs/components/prism-javascript';
+import 'prismjs/components/prism-handlebars';
+import 'prismjs/components/prism-markup-templating';
+// @ts-expect-error no types shipped from prismjs-glimmer
+import { setup } from 'prismjs-glimmer';
+
+import 'prismjs/themes/prism.css';
+
+setup(Prism);
 
 export default class App extends Application {
   modulePrefix = config.modulePrefix;

docs/app/components/code-block.hbs

@@ -0,0 +1,12 @@
+<pre
+  class="{{this.languageClass}} {{if @showLineNumbers "line-numbers"}}"
+  data-start={{@start}}
+>
+  {{~! ~}}
+  <CodeInline
+    ...attributes
+    @code={{@code}}
+    @language={{@language}}
+  />
+  {{~! ~}}
+</pre>

docs/app/components/code-block.ts

@@ -0,0 +1,27 @@
+import Component from '@glimmer/component';
+
+interface CodeBlockSignature {
+  Element: HTMLElement;
+  Args: {
+    code: string;
+    language?: string;
+    showLineNumbers?: boolean;
+    start?: string;
+  };
+}
+
+export default class CodeBlock extends Component<CodeBlockSignature> {
+  get language() {
+    return this.args.language ?? 'markup';
+  }
+
+  get languageClass() {
+    return `language-${this.language}`;
+  }
+}
+
+declare module '@glint/environment-ember-loose/registry' {
+  export default interface Registry {
+    CodeBlock: typeof CodeBlock;
+  }
+}

docs/app/components/code-inline.hbs

@@ -0,0 +1,7 @@
+<code
+  ...attributes
+  class="{{this.languageClass}}"
+  {{this.setPrismCode}}
+>
+  {{~! ~}}{{this.prismCode}}{{~! ~}}
+</code>

docs/app/components/code-inline.ts

@@ -0,0 +1,67 @@
+import Component from '@glimmer/component';
+import { modifier } from 'ember-modifier';
+import { htmlSafe, type SafeString } from '@ember/template';
+import { tracked } from '@glimmer/tracking';
+import { assert } from '@ember/debug';
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+declare const Prism: any;
+
+interface CodeInlineSignature {
+  Element: HTMLElement;
+  Args: {
+    code: string;
+    language?: string;
+  };
+}
+
+export default class CodeInline extends Component<CodeInlineSignature> {
+  @tracked prismCode: string | SafeString = '';
+
+  get code() {
+    const code = this.args.code;
+
+    assert(
+      "ember-prism's <CodeBlock/> and <CodeInline/> components require a `code` parameter to be passed in.",
+      code !== undefined,
+    );
+    if (Prism?.plugins?.NormalizeWhitespace) {
+      return Prism.plugins.NormalizeWhitespace.normalize(code);
+    }
+
+    return code;
+  }
+
+  get language() {
+    return this.args.language ?? 'markup';
+  }
+
+  get languageClass() {
+    return `language-${this.language}`;
+  }
+
+  setPrismCode = modifier((element: Element) => {
+    const code = this.code;
+    const language = this.language;
+    const grammar = Prism.languages[language];
+
+    if (code && language && grammar) {
+      this.prismCode = htmlSafe(Prism.highlight(code, grammar, language));
+    } else {
+      this.prismCode = '';
+    }
+
+    // Force plugin initialization, required for Prism.highlight usage.
+    // See https://github.com/PrismJS/prism/issues/1234
+    Prism.hooks.run('complete', {
+      code,
+      element,
+    });
+  });
+}
+
+declare module '@glint/environment-ember-loose/registry' {
+  export default interface Registry {
+    CodeInline: typeof CodeInline;
+  }
+}

docs/ember-cli-build.js

@@ -13,9 +13,6 @@ module.exports = function (defaults) {
       ],
     },
     'ember-cli-babel': { enableTypeScriptTransform: true },
-    'ember-prism': {
-      components: ['scss', 'javascript', 'handlebars', 'markup-templating'], //needs to be an array, or undefined.
-    },
     snippetPaths: ['app/components/snippets', 'app/templates/snippets/'],
   });
 

docs/package.json

@@ -109,7 +109,6 @@
     "ember-modifier": "^4.2.0",
     "ember-page-title": "^8.2.3",
     "ember-power-select": "workspace:*",
-    "ember-prism": "^1.0.0",
     "ember-qunit": "^8.1.0",
     "ember-resolver": "^12.0.1",
     "ember-source": "~5.10.0",
@@ -125,6 +124,8 @@
     "loader.js": "^4.7.0",
     "memory-scroll": "^1.0.2",
     "miragejs": "^0.1.48",
+    "prismjs": "^1.29.0",
+    "prismjs-glimmer": "^1.1.1",
     "prettier": "^3.3.3",
     "qunit": "^2.22.0",
     "qunit-dom": "^3.2.0",