Merge pull request #30 from diffplug/feat/code-blocks

Style markdown code blocks
diffplug · Oct 3, 2023 · beafe2e · beafe2e
2 parents ca34d82 + e8114e7
commit beafe2e
Show file tree

Hide file tree

Showing 7 changed files with 57 additions and 378 deletions.
diff --git a/docs/src/components/Code.jsx b/docs/src/components/Code.jsx
diff --git a/docs/src/components/Tag.jsx b/docs/src/components/Tag.jsx
diff --git a/docs/src/components/mdx.tsx b/docs/src/components/mdx.tsx
@@ -1,8 +1,7 @@
 import clsx from "clsx";
-export { CodeGroup, Code as code, Pre as pre } from "@/components/Code";
 
 type ParentComponentProps = {
-  children: React.ReactNode;
+  children?: React.ReactNode;
 };
 
 export function Row({ children }: ParentComponentProps) {
@@ -29,3 +28,21 @@ export function Col({ children, sticky = false }: ColProps) {
     </div>
   );
 }
+
+export function code({ children, ...props }: ParentComponentProps) {
+  return children ? (
+    <code {...props} dangerouslySetInnerHTML={{ __html: children }} />
+  ) : (
+    <code {...props} />
+  );
+}
+
+export function pre({ children, ...props }: ParentComponentProps) {
+  return (
+    <div className={clsx(["rounded-2xl", "bg-grey/60", "shadow", "text-base"])}>
+      <pre className="overflow-scroll p-4" {...props}>
+        {children}
+      </pre>
+    </div>
+  );
+}