Merge pull request #671 from thejackshelton/shiki-utf8

fix: shiki utf8 string error

Author: thejackshelton

apps/website/src/components/highlight/highlight.tsx

@@ -1,7 +1,7 @@
 import { ClassList, PropsOf, component$, useSignal, useTask$ } from '@builder.io/qwik';
 import { CodeCopy } from '../code-copy/code-copy';
+import { getHighlighterCore } from 'shiki';
 import { cn } from '@qwik-ui/utils';
-import { highlighter } from './highlighter';
 
 export type HighlightProps = PropsOf<'div'> & {
   code: string;
@@ -22,6 +22,7 @@ export const Highlight = component$(
   }: HighlightProps) => {
     const codeSig = useSignal('');
 
+    // eslint-disable-next-line qwik/no-use-visible-task
     useTask$(async function createHighlightedCode() {
       let modifiedCode: string = code;
 
@@ -35,6 +36,19 @@ export const Highlight = component$(
         modifiedCode = partsOfCode[0];
       }
 
+      const highlighter = await getHighlighterCore({
+        themes: [
+          // or a dynamic import if you want to do chunk splitting
+          import('shiki/themes/poimandres.mjs'),
+        ],
+        langs: [
+          import('shiki/langs/html.mjs'),
+          import('shiki/langs/tsx.mjs'),
+          import('shiki/langs/css.mjs'),
+        ],
+        loadWasm: import('shiki/wasm'),
+      });
+
       const str = highlighter.codeToHtml(modifiedCode, {
         lang: language,
         themes: {

apps/website/src/components/highlight/highlighter.tsx

@@ -120,7 +120,11 @@ Padding or border applied to `CollapsibleContent` breaks our keyframe animation
 
 To fix this, add a child element to the content, and set the padding or border on that element.
 
-<CodeSnippet name="content-child" />
+```tsx
+<CollapsibleContent class="collapsible-animation collapsible-content">
+  <p class="collapsible-content-outline">Content</p>
+</CollapsibleContent>
+```
 
 > Rather than dealing with this under the hood, we thought it'd be appropriate to keep style management as simple as possible. Let us know if you have a better solution!