feat: add optional lang label

Author: yanceyy

README.md

@@ -77,13 +77,14 @@ import "./style.css";
 ```
 
 ## API
-| Property        | Description                                              | Type      | Default                                     |
-|-----------------|----------------------------------------------------------|-----------|---------------------------------------------|
-| block           | Receives render code content from `NotionRenderer`       | CodeBlock | -                                           |
-| className       | Additional class for Code                                | string    | -                                           |
-| defaultLanguage | Default programming language if not specified in `block` | string    | typescript                                  |
+
+| Property        | Description                                              | Type      | Default                                      |
+| --------------- | -------------------------------------------------------- | --------- | -------------------------------------------- |
+| block           | Receives render code content from `NotionRenderer`       | CodeBlock | -                                            |
+| className       | Additional class for Code                                | string    | -                                            |
+| defaultLanguage | Default programming language if not specified in `block` | string    | typescript                                   |
 | themes          | Themes for rendering code                                | object    | {light: "catppuccin-latte", dark: "dracula"} |
-| showCopy        | Whether to show the copy button                          | boolean   | true                                        |
+| showCopy        | Whether to show the copy button                          | boolean   | true                                         |
 
 ## Run the Example
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-notion-x-code-block",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "",
   "type": "module",
   "module": "dist/index.js",

src/code.module.css

@@ -10,6 +10,7 @@
   font-size: 85%;
   margin: 2px;
   position: relative;
+  --appear-animation: opacity 0.1s linear;
 }
 
 /*
@@ -50,3 +51,22 @@
 .codeBlock:hover .codeCopyButton {
   opacity: 1;
 }
+
+.codeLanLabel {
+  position: absolute;
+  display: inline-block;
+  left: 10px;
+  top: 15px;
+  text-align: center;
+  padding: 0 12px;
+  border: none;
+  background-color: var(--bg-color);
+  color: var(--fg-color);
+  border-radius: 4px;
+  opacity: 0;
+  transition: opacity 0.1s linear;
+}
+
+.codeBlock:hover .codeLanLabel {
+  opacity: 1;
+}

src/code.tsx

@@ -13,6 +13,7 @@ export const Code: React.FC<{
   defaultLanguage?: string;
   className?: string;
   showCopy?: boolean;
+  showLangLabel?: boolean;
   themes?: {
     light: BundledTheme;
     dark: BundledTheme;
@@ -25,29 +26,32 @@ export const Code: React.FC<{
     light: "catppuccin-latte",
     dark: "dracula"
   },
-  showCopy = true
+  showCopy = true,
+  showLangLabel = true
 }) => {
   const { recordMap } = useNotionContext();
-  const [isCopied, setIsCopied] = useState(false);
+
   const content = getBlockTitle(block, recordMap);
   const [code, setCode] = useState<string | undefined>(undefined);
+  const [isCopied, setIsCopied] = useState(false);
+
   const timer = useRef<null | number>(null);
 
-  const language = (
-    block.properties?.language?.[0]?.[0] || defaultLanguage
-  ).toLowerCase();
   const caption = block.properties.caption;
 
+  const providedLangType = block.properties?.language?.[0]?.[0];
+  const lang = (providedLangType || defaultLanguage).toLowerCase();
+
   useEffect(() => {
     async function renderCodeToHtml() {
       const htmlCode = await codeToHtml(content, {
-        lang: language,
+        lang,
         themes
       });
       setCode(htmlCode);
     }
     content && renderCodeToHtml();
-  }, [content, language, themes]);
+  }, [content, lang, themes]);
 
   const clickCopy = useCallback(() => {
     navigator.clipboard.writeText(content).then(() => {
@@ -65,11 +69,11 @@ export const Code: React.FC<{
 
   return (
     <figure className={cs(styles.codeBlock, className)}>
+      {showLangLabel && providedLangType ? (
+        <span className={styles.codeLanLabel}>{providedLangType}</span>
+      ) : null}
       {showCopy ? (
-        <button
-          onClick={clickCopy}
-          className={styles.codeCopyButton}
-        >
+        <button onClick={clickCopy} className={styles.codeCopyButton}>
           <IoMdCopy />
           {isCopied ? "Copied" : "Copy"}
         </button>