make import-example use the same code block as markdown

Author: mansona

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;
   }
 }