use ember-showdown-shiki

app/components/class-field-description.hbs

@@ -54,14 +54,14 @@
       <div class='parameter'>
         <dt>{{param.name}}</dt>
         <dd class='parameter-type'>{{param.type}}</dd>
-        <dd>{{param.description}}</dd>
+        <dd><MarkdownToHtml @markdown={{param.description}} /></dd>
         {{#if param.props}}
           <dl class='parameters'>
             {{#each param.props as |prop|}}
               <div class='prop'>
                 <dt>{{prop.name}}</dt>
                 <dd class='parameter-type'>{{prop.type}}</dd>
-                <dd>{{prop.description}}</dd>
+                <dd><MarkdownToHtml @markdown={{prop.description}} /></dd>
               </div>
             {{/each}}
           </dl>
@@ -72,9 +72,9 @@
       <div class='return'>
         <dt>returns</dt>
         <dd class='return-type'>{{@field.return.type}}</dd>
-        <dd>{{@field.return.description}}</dd>
+        <dd><MarkdownToHtml @markdown={{@field.return.description}} /></dd>
       </div>
     {{/if}}
   </dl>
-  {{html-safe @field.description}}
+  <MarkdownToHtml @markdown={{@field.description}} />
 </section>

app/components/import-example.hbs

@@ -1,21 +1 @@
-<div class='highlight javascript'>
-  <div class='ribbon'></div>
-  {{#if (is-clipboard-supported)}}
-    <div class='import-copy'>
-      {{#if this.showClipboardSuccessIcon}}
-        {{svg-jar 'success' width='24px' height='24px'}}
-      {{else}}
-        <CopyButton @clipboardText={{concat 'import ' @item " from '" @package "';"}} @title='Copy to clipboard' @success={{this.showSuccess}}>
-          {{svg-jar 'copy' width='24px' height='24px'}}
-        </CopyButton>
-      {{/if}}
-    </div>
-  {{/if}}
-  <table class='CodeRay'>
-    <tbody>
-      <tr>
-        <td class='code'><pre><span class='wrapper'><span class='keyword'>import</span> {{@item}} <span class='keyword'>from</span> <span class='string'>'{{@package}}'</span>;</span></pre></td>
-      </tr>
-    </tbody>
-  </table>
-</div>
+<MarkdownToHtml @markdown={{this.markdown}} />

app/components/import-example.js

@@ -1,14 +1,10 @@
-import { action } from '@ember/object';
 import Component from '@glimmer/component';
-import { later } from '@ember/runloop';
-import { tracked } from '@glimmer/tracking';
 
 export default class ImportExample extends Component {
-  @tracked showClipboardSuccessIcon = false;
-
-  @action
-  showSuccess() {
-    this.showClipboardSuccessIcon = true;
-    later(this, () => (this.showClipboardSuccessIcon = false), 950);
+  get markdown() {
+    let md = `\`\`\`js
+import ${this.args.item} from '${this.args.package}';
+\`\`\``;
+    return md;
   }
 }

app/styles/components/_all.scss

@@ -3,7 +3,6 @@
 @import "sidebar";
 @import "article";
 @import "back-to-top";
-@import "highlight";
 @import "toc";
 @import "old-version-warning";
 @import "whoops";

app/templates/project-version/classes/class.hbs

@@ -63,7 +63,7 @@
   {{#if (and (not (eq this.static 1)) this.hasImportExample)}}
     <ImportExample @item={{@model.name}} @package={{this.module}} />
   {{/if}}
-  <p class="description">{{html-safe @model.description}}</p>
+  <p class="description"><MarkdownToHtml @markdown={{@model.description}} /></p>
 
   {{#if (or @model.methods @model.properties @model.events)}}
     <div class="tabbed-layout">

app/templates/project-version/modules/module.hbs

@@ -15,7 +15,7 @@
     {{/if}}
   </p>
 
-  <p class="description">{{html-safe this.model.description}}</p>
+  <p class="description"><MarkdownToHtml @markdown={{this.model.description}} /></p>
 
   {{#if this.submodules}}
     <section>

config/fastboot.js

@@ -0,0 +1,9 @@
+module.exports = function () {
+  return {
+    buildSandboxGlobals(defaultGlobals) {
+      return Object.assign({}, defaultGlobals, {
+        atob: atob,
+      });
+    },
+  };
+};

package.json

@@ -13,7 +13,7 @@
     "test": "tests"
   },
   "scripts": {
-    "clone": "rm -rf ember-api-docs-data && git clone --depth=1 https://github.com/ember-learn/ember-api-docs-data.git",
+    "clone": "rm -rf ember-api-docs-data && git clone -b markdown --depth=1 https://github.com/ember-learn/ember-api-docs-data.git",
     "build": "ember build --environment=production",
     "lint": "npm-run-all --aggregate-output --continue-on-error --parallel \"lint:!(fix)\"",
     "lint:fix": "npm-run-all --aggregate-output --continue-on-error --parallel lint:*:fix",
@@ -83,6 +83,7 @@
     "ember-cli-inject-live-reload": "^2.1.0",
     "ember-cli-meta-tags": "^7.0.0",
     "ember-cli-sass": "^10.0.1",
+    "ember-cli-showdown": "^9.0.1",
     "ember-cli-terser": "^4.0.2",
     "ember-composable-helpers": "^3.1.1",
     "ember-concurrency": "^2.3.7",
@@ -100,6 +101,7 @@
     "ember-resolver": "^8.0.3",
     "ember-rfc176-data": "^0.3.17",
     "ember-route-action-helper": "^2.0.5",
+    "ember-showdown-shiki": "^1.2.1",
     "ember-sinon": "^4.1.1",
     "ember-source": "~3.28.8",
     "ember-styleguide": "^3.3.0",
@@ -131,7 +133,7 @@
     "node-sass": "^9.0.0",
     "normalize.css": "^8.0.1",
     "npm-run-all": "^4.1.5",
-    "prember": "^2.0.0",
+    "prember": "^2.1.0",
     "prettier": "^2.5.1",
     "qunit": "^2.17.2",
     "qunit-dom": "^1.6.0",