feat: add code block component

Author: yanceyy

README.md

@@ -0,0 +1,77 @@
+Enhance your React-Notion-X projects with a versatile code block component.
+This component offers out-of-the-box support for multiple programming languages and automatically adapts to light and dark themes,
+powered by [Shiki](https://github.com/shikijs/shiki).
+
+## Install
+
+You can install the react-notion-x-code-block package using npm, yarn, or pnpm:
+
+```shell
+npm install react-notion-x-code-block
+
+yarn add react-notion-x-code-block
+
+pnpm install react-notion-x-code-block
+```
+
+## How to use
+
+To use the component, import Code from the package and include it in your NotionRenderer components object:
+
+```tsx
+import { Code } from "react-notion-x-code-block";
+
+<NotionRenderer
+  // ...
+  components={{
+    Code
+  }}
+/>;
+```
+
+### Adapting to Theme Changes
+
+To ensure the code block styles automatically adjust to your theme mode (light or dark), define CSS style according to the method you use to achieve dark mode.
+
+```css
+/* file: style.css */
+@media (prefers-color-scheme: dark) {
+    .shiki,
+    .shiki span {
+        color: var(--shiki-dark) !important;
+        background-color: var(--shiki-dark-bg) !important;
+        /* Optional, if you also want font styles */
+        font-style: var(--shiki-dark-font-style) !important;
+        font-weight: var(--shiki-dark-font-weight) !important;
+        text-decoration: var(--shiki-dark-text-decoration) !important;
+    }
+```
+
+Class-based Dark Mode
+
+```css
+/* file: style.css */
+html.dark .shiki,
+html.dark .shiki span {
+  color: var(--shiki-dark) !important;
+  background-color: var(--shiki-dark-bg) !important;
+  /* Optional, if you also want font styles */
+  font-style: var(--shiki-dark-font-style) !important;
+  font-weight: var(--shiki-dark-font-weight) !important;
+  text-decoration: var(--shiki-dark-text-decoration) !important;
+}
+```
+
+And then import it to the page:
+
+```tsx
+import { Code } from "react-notion-x-code-block";
+import "./style.css";
+
+<NotionRenderer
+  // ...
+  components={{
+    Code
+  }}
+/>;
+```

src/Button.tsx

@@ -0,0 +1,11 @@
+.codeBlock pre {
+  padding: 34px 16px 32px 32px;
+  overflow: auto;
+  margin: 4px 0;
+  border-radius: 3px;
+}
+
+.codeBlock {
+  width: 100%;
+  font-size: 85%;
+}

src/code.module.css

@@ -0,0 +1,58 @@
+import { getBlockTitle } from "notion-utils";
+import React, { useEffect, useState } from "react";
+import { cs, useNotionContext } from "react-notion-x";
+import { codeToHtml } from "shiki";
+import { BundledTheme } from "shiki/themes";
+
+import styles from "./code.module.css";
+
+import type { CodeBlock } from "notion-types";
+
+export const Code: React.FC<{
+  block: CodeBlock;
+  defaultLanguage?: string;
+  className?: string;
+  themes?: {
+    light: BundledTheme;
+    dark: BundledTheme;
+  };
+}> = ({
+  block,
+  defaultLanguage = "typescript",
+  themes = {
+    light: "catppuccin-latte",
+    dark: "dracula"
+  },
+  className
+}) => {
+  const { recordMap } = useNotionContext();
+  const content = getBlockTitle(block, recordMap);
+
+  const [code, setCode] = useState<string | undefined>(undefined);
+
+  const language = (
+    block.properties?.language?.[0]?.[0] || defaultLanguage
+  ).toLowerCase();
+
+  useEffect(() => {
+    async function renderCodeToHtml() {
+      const htmlCode = await codeToHtml(content, {
+        lang: language,
+        themes
+      });
+      setCode(htmlCode);
+    }
+    content && renderCodeToHtml();
+  }, [content, language, themes]);
+
+  return code ? (
+    <div
+      className={cs(styles.codeBlock, className)}
+      dangerouslySetInnerHTML={{ __html: code }}
+    />
+  ) : (
+    <div className={cs(styles.codeBlock, className)}>
+      <pre>{content}</pre>
+    </div>
+  );
+};

src/code.tsx

@@ -1 +1 @@
-export * from "./Button";
+export * from "./code";