Remove highlightjs / prismjs domain-wide in favor of ember-shiki

[NullVoxPopuli]

Resolves:

• data-diff +/- symbol renders outside of code block in first line #1956
• .hbs is not Handlebars…? #1799 (at least the highlighting aspects)
• we keep syntax highlighting while using diff mode

Helps with:

• Advance RFC #0811 "Element Modifiers" to Stage Recommended emberjs/rfcs#934

Supersedes:

• Use the setup function from ember-prism empress/ember-showdown-prism#51 (really, no one should be using prism anyway, it has so much bloat and tech debt, and is unmaintained)

---

Courtesy of @IgnaceMaes

Docs (which uses the component itself!): https://ember-shiki.pages.dev/
GitHub: https://github.com/IgnaceMaes/ember-shiki

✅ TypeScript and Glint ready
🧵 V2 addon format
🚀 FastBoot support
📦 Lazy loaded packages — minimal impact on initial load
#️⃣ Syntax highlighting for 170+ languages — including .gjs and .gts
🎨 Theme support: 29 included themes — load any external
🔢 Line number support
🔤 Custom fonts — including font ligature support
📋 Copy code to clipboard
🏷️ Code block naming
🗂️ Group code blocks with tabs
✨ Line highlighting
🖌️ Stylable via CSS variables

This is much more sophisticated than what we're doing with highlight / prism, so I think we should use it.

Basically, "for free", we get the JS/TS toggle we want on all the code snippets (just have to write them).

The fastboot support is good.
The theme / etc can change per snippet.

It's very good, and supports everything we need for our future documentation plans, which means we don't have to re-implement all of the above ourselves (which is a huge win, because this stuff is non-trivial).

cc @gitKrystan @wagenet @wycats @mansona 🥳

---

I know code is authored in markdown, so we can easily support ember-shiki by ripping out our current code-rendering logic / plugin and replacing it with a light-weight plugin that does this transform:

prose prose prose

```{languageTag}
code here
```

prose prose prose

=>

prose prose prose

<CodeBlock @code="code here" @language="{languageTag}" />

prose prose prose

Here is how js/ts or gjs/gts could be supported: https://ember-shiki.pages.dev/#code-groups

<CodeGroup @names={{array "gjs" "gts"}} as |Tab|>
  <Tab @name="gjs">
    <CodeBlock
      @code="..."
      @language="gjs"
    />
  </Tab>
  <Tab @name="gts">
    <CodeBlock
      @code="..."
      @language="gts"
    />
  </Tab>
</CodeGroup>

[mansona]

We discussed this in the learning team meeting and we agreed that this kind of general issue is in RFC territory. We are happy to open smaller issues on smaller sub-projects that will discuss how to proceed 👍

[NullVoxPopuli]

I thought RFCs were for public-facing changes that impact consumers of ember (and the community)? I saw this change as an "implementation detail" 🤔

is the API of the docs' sites a public / intended-to-be-used-as-public API? 😅