Titles in markdown (fix #9)

Author: pomber

.changeset/eighty-forks-compare.md

@@ -0,0 +1,5 @@
+---
+"bright": patch
+---
+
+Titles in markdown

lib/src/index.tsx

@@ -185,15 +185,14 @@ function parseChildren(
   if (typeof children === "object" && children?.type === "code") {
     return {
       code: children.props?.children?.trim(),
-      lang: (children.props?.className?.replace("language-", "") ||
-        "text") as LanguageAlias,
+      ...getLanguageAndTitle(children.props?.className),
     }
   } else if (typeof children === "object") {
     const subProps = React.Children.toArray(children as any).map((c: any) => {
       const codeProps = c.props?.children?.props
       return {
         code: codeProps.children?.trim(),
-        lang: codeProps.className?.replace("language-", "") || "text",
+        ...getLanguageAndTitle(codeProps.className),
       }
     })
     return {
@@ -206,3 +205,22 @@ function parseChildren(
     }
   }
 }
+
+function getLanguageAndTitle(className: string | undefined) {
+  if (!className) {
+    return {
+      lang: "text",
+    }
+  }
+  const metastring = className.replace("language-", "")
+  const lang = metastring.split(".").pop()
+  if (lang !== metastring) {
+    return {
+      lang: lang!,
+      title: metastring,
+    }
+  }
+  return {
+    lang,
+  }
+}

web/app/demos/theme.json

@@ -455,7 +455,8 @@
       "name": "Entity name",
       "scope": "entity.name.function",
       "settings": {
-        "foreground": "#82AAFF"
+        "foreground": "#c3e88dff",
+        "fontStyle": "normal"
       }
     },
     {

web/app/demos/titles-in-markdown.tsx

@@ -0,0 +1,37 @@
+import { NewDemo } from "./new-demo"
+
+const sourceCode = `# Hello
+
+This is how you add the code's title in Markdown/MDX 
+
+\`\`\`web/shine.js
+let hello = "hello brightness"
+console.log(hello, "my old friend")
+\`\`\`
+`
+
+export default function Demo() {
+  return (
+    <>
+      <div style={{ height: "1rem" }} />
+      <NewDemo
+        filename="app/page.mdx"
+        sourceProps={{
+          children: sourceCode,
+          lang: "mdx",
+          annotations: [
+            { name: "focus", ranges: [{ fromLineNumber: 3, toLineNumber: 5 }] },
+          ],
+        }}
+        demoProps={{
+          title: "web/shine.js",
+          lang: "js",
+          code: `
+let hello = "hello brightness"
+console.log(hello, "my old friend")
+`.trim(),
+        }}
+      />
+    </>
+  )
+}

web/app/page.tsx

@@ -8,6 +8,7 @@ import ThemeDemo from "./demos/theme"
 import DarkModeDemo from "./demos/dark-mode"
 import CustomThemeDemo from "./demos/custom-theme"
 import MarkdownDemo from "./demos/markdown"
+import TitlesInMarkdownDemo from "./demos/titles-in-markdown"
 import ExtensionsDemo from "./demos/customization"
 
 export default async function Page() {
@@ -50,6 +51,10 @@ export default async function Page() {
       <h2 style={{ textAlign: "center" }}>Markdown / MDX</h2>
       <MarkdownDemo />
 
+      <div style={{ height: "3rem" }} />
+      <h2 style={{ textAlign: "center" }}>Titles in Markdown</h2>
+      <TitlesInMarkdownDemo />
+
       <div style={{ height: "3rem" }} />
       <h2 style={{ textAlign: "center" }}>Customization</h2>
       <ExtensionsDemo />

web/app/test-mdx/mdx-demo.mdx

@@ -4,8 +4,14 @@
 hello
 ```
 
-```jsx
-// title app/page.js
+# Hello
+
+```web/shine.js
+let hello = "hello brightness"
+console.log(hello, "my old friend")
+```
+
+```app/page.jsx
 import { Code } from "bright"
 
 Code.extensions = {