fix: handle “plain text” language label from notion

Notion code blocks using “plain text” lang label, we map
to Shiki’s “plaintext”.

Author: yanceyy

example/src/record-map.json

@@ -15,7 +15,8 @@
           "21e33102-d54d-4154-acff-7c4e94c0785f",
           "57019bed-4e18-4950-a9a8-e966fb9c864c",
           "5f27d995-d073-4fa1-9682-dff187d02058",
-          "6a3d1f3e-cb24-48c6-b7c0-b54279ef0f13"
+          "6a3d1f3e-cb24-48c6-b7c0-b54279ef0f13",
+          "4553fb9e-3909-4d2c-84a9-ff3b23ec6d7b"
         ],
         "format": {
           "page_icon": "🕐",
@@ -209,6 +210,28 @@
         "space_id": "3f542fdc-ce07-4179-bf6e-7b7f20f9a6cf"
       },
       "role": "reader"
+    },
+    "4553fb9e-3909-4d2c-84a9-ff3b23ec6d7b": {
+      "value": {
+        "id": "4553fb9e-3909-4d2c-84a9-ff3b23ec6d7b",
+        "version": 21,
+        "type": "code",
+        "properties": {
+          "title": [["This is a plain text"]],
+          "language": [["Plain text"]]
+        },
+        "created_time": 1704864013720,
+        "last_edited_time": 1712449127438,
+        "parent_id": "ec6b6e08-7ab5-4b08-b9a6-606eb5e1a02d",
+        "parent_table": "block",
+        "alive": true,
+        "created_by_table": "notion_user",
+        "created_by_id": "72f0d253-3ba6-48b5-8a2c-c66b08a20326",
+        "last_edited_by_table": "notion_user",
+        "last_edited_by_id": "72f0d253-3ba6-48b5-8a2c-c66b08a20326",
+        "space_id": "3f542fdc-ce07-4179-bf6e-7b7f20f9a6cf"
+      },
+      "role": "reader"
     }
   },
   "space": {},

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-notion-x-code-block",
-  "version": "0.4.0",
+  "version": "0.4.1",
   "description": "Enhance your React-Notion-X projects with a code block component. This component offers out-of-the-box support for multiple programming languages and automatically adapts to light and dark themes",
   "homepage": "https://react-notion-x-code-block.vercel.app",
   "type": "module",

rollup.config.js

@@ -3,7 +3,6 @@ import commonjs from "@rollup/plugin-commonjs";
 import babel from "@rollup/plugin-babel";
 import externals from "rollup-plugin-node-externals";
 import del from "rollup-plugin-delete";
-import pkg from "./package.json" assert { type: "json" };
 import styles from "rollup-plugin-styles";
 
 export default [

src/code.tsx

@@ -14,7 +14,8 @@ import { ObserverManager, type ObserverManagerProps } from "./manager";
 import styles from "./code.module.css";
 
 import type { CodeBlock } from "notion-types";
-import type { BundledTheme } from "shiki/themes";
+import type { BundledTheme } from "shiki";
+import { langLabelConverter } from "./utils";
 
 const _Code: React.FC<{
   block: CodeBlock;
@@ -55,10 +56,12 @@ const _Code: React.FC<{
   }, [IntersectionObserverOptions]);
 
   const renderCodeToHtml = useCallback(async () => {
+    const lang = langLabelConverter(
+      (block.properties?.language?.[0]?.[0] || defaultLanguage).toLowerCase()
+    );
+
     const htmlCode = await codeToHtml(content, {
-      lang: (
-        block.properties?.language?.[0]?.[0] || defaultLanguage
-      ).toLowerCase(),
+      lang,
       themes
     });
 

src/utils.ts

@@ -0,0 +1,11 @@
+const ALIASES: Record<string, string> = {
+  "plain text": "plaintext"
+};
+
+/**
+ * Normalize language labels from Notion to Shiki-recognized language name
+ */
+export function langLabelConverter(lang: string) {
+  if (lang in ALIASES) return ALIASES[lang];
+  return lang;
+}