Add CodeHike rendering

README.md

@@ -1,9 +1,11 @@
-# IDE Block
+# CodeHike Block
 
 **Powered by [GitHub Blocks](https://blocks.githubnext.com/)**
 
 Block for displaying code snippets with [CodeHike](https://codehike.org/).
 
+Based on the [CodeHike Playground](https://github.com/code-hike/codehike/tree/next/playground)
+
 ## How to contribute
 
 _Imposter syndrome disclaimer_: I want your help. No really, I do.

blocks/codeHike/index.tsx

@@ -1,16 +1,41 @@
-import { FileBlockProps, getLanguageFromFilename } from "@githubnext/blocks";
-import { Button, Box } from "@primer/react";
-import {evaluateSync} from '@mdx-js/mdx'
-import * as runtime from 'react/jsx-runtime'
-import * as provider from '@mdx-js/react'
+import { FileBlockProps } from "@githubnext/blocks";
+import { Box } from "@primer/react";
+import { compile, CompileOptions, run } from "@mdx-js/mdx";
+import { remarkCodeHike } from "@code-hike/mdx";
+import * as runtime from "react/jsx-runtime";
+// @ts-ignore
+import theme from "shiki/themes/github-dark.json";
+import { PluggableList } from "@mdx-js/mdx/lib/core";
+import { Fragment, useEffect, useState } from "react";
+import { CH } from "@code-hike/mdx/components";
+import "@code-hike/mdx/styles.css";
 
 export default function (props: FileBlockProps) {
-  const { context, content, metadata, onUpdateMetadata } = props;
+  const { content } = props;
+  const [mdxComponent, setMdxComponent] = useState<any>(undefined);
 
-  // @ts-ignore
-  const {default: Content} = evaluateSync(content, {...provider, ...runtime});
+  const remarkPlugins: PluggableList  = [[remarkCodeHike, { theme: theme,  lineNumbers: true, autoImport: false, }]];
+  const options: CompileOptions  = {
+    remarkPlugins,
+    outputFormat: "function-body"
+  };
+
+  const getContentComponent = async () => {
+    console.log("getContentComponent");
+    const m = await compile(content, options);
+    const r = await run(String(m), runtime);
+    setMdxComponent(r);
+  };
+
+  useEffect(() => {
+    getContentComponent();
+  }, []);
+
+  let component = mdxComponent ? <mdxComponent.default components={{ CH }}/> : <Fragment />;
 
   return (
-    <Content />
+    <Box style={{padding: 20}}>
+      {component}
+    </Box>
   );
 }

package.json

@@ -7,6 +7,7 @@
     "build": "blocks build"
   },
   "dependencies": {
+    "@code-hike/mdx": "^0.7.4",
     "@githubnext/blocks": "^2.1.1",
     "@mdx-js/mdx": "^2.1.5",
     "@mdx-js/react": "^2.1.5",