Merge pull request microsoft#250 from microsoft/package-upgrade

Remove code-block component and add fence

src/components/markdown/code-block.tsx

@@ -0,0 +1,31 @@
+import { FC, memo } from "react";
+import { Prism } from "react-syntax-highlighter";
+import { atomDark } from "react-syntax-highlighter/dist/esm/styles/prism";
+
+export const fence = {
+  render: "CodeBlock",
+  attributes: {
+    language: {
+      type: String,
+    },
+    value: {
+      type: String,
+    },
+  },
+};
+
+interface Props {
+  language: string;
+  children: string;
+}
+
+export const CodeBlock: FC<Props> = memo(({ language, children }) => {
+  console.log(language);
+  return (
+    <Prism language={language} style={atomDark} PreTag="pre" showLineNumbers>
+      {children}
+    </Prism>
+  );
+});
+
+CodeBlock.displayName = "CodeBlock";

src/components/markdown/config.tsx

@@ -1,10 +1,12 @@
 import { citation } from "@/features/chat/chat-ui/markdown/citation";
 import { Config } from "@markdoc/markdoc";
+import { fence } from "./code-block";
 import { paragraph } from "./paragraph";
 
 export const citationConfig: Config = {
   nodes: {
-    paragraph: paragraph,
+    paragraph,
+    fence,
   },
   tags: {
     citation,

src/components/markdown/markdown.tsx

@@ -1,6 +1,7 @@
 import Markdoc from "@markdoc/markdoc";
 import React, { FC } from "react";
 import { Citation } from "../../features/chat/chat-ui/markdown/citation";
+import { CodeBlock } from "./code-block";
 import { citationConfig } from "./config";
 import { Paragraph } from "./paragraph";
 
@@ -16,6 +17,6 @@ export const Markdown: FC<Props> = (props) => {
   });
 
   return Markdoc.renderers.react(content, React, {
-    components: { Citation, Paragraph },
+    components: { Citation, Paragraph, CodeBlock },
   });
 };