feature/code-block-language-header

components/blocks/code.js

@@ -15,6 +15,44 @@ import styles from "./code.module.css";
 // Initialize the cache for imported languages.
 const languageImports = new Map();
 
+// Map language identifiers to display-friendly names
+const languageDisplayNames = {
+  python: "Python",
+  javascript: "JavaScript",
+  js: "JavaScript",
+  typescript: "TypeScript",
+  ts: "TypeScript",
+  bash: "Bash",
+  sh: "Bash",
+  shell: "Shell",
+  json: "JSON",
+  yaml: "YAML",
+  yml: "YAML",
+  html: "HTML",
+  css: "CSS",
+  sql: "SQL",
+  toml: "TOML",
+  markdown: "Markdown",
+  md: "Markdown",
+  jsx: "JSX",
+  tsx: "TSX",
+  go: "Go",
+  rust: "Rust",
+  ruby: "Ruby",
+  java: "Java",
+  c: "C",
+  cpp: "C++",
+  csharp: "C#",
+  php: "PHP",
+  swift: "Swift",
+  kotlin: "Kotlin",
+  scala: "Scala",
+  r: "R",
+  docker: "Docker",
+  dockerfile: "Dockerfile",
+  none: "",
+};
+
 const Code = ({
   code,
   children,
@@ -29,7 +67,7 @@ const Code = ({
   useEffect(() => {
     // Get the language from the className, if it exists.
     // Classname usually is `language-python`, `language-javascript`, `language-bash`, etc.
-    let importLanguage = children.props.className?.substring(9);
+    let importLanguage = children?.props?.className?.substring(9);
 
     // If no language, default to Phython
     if (importLanguage === undefined || importLanguage === "undefined") {
@@ -83,15 +121,29 @@ const Code = ({
     languageClass = children.props.className;
   }
 
+  // Extract language identifier for display
+  const langId = languageClass?.substring(9) || language || "python";
+  const displayLanguage = languageDisplayNames[langId] || langId;
+  const showLanguage = langId.toLowerCase() !== "none";
+
+  const Header = (
+    <div className={classNames(styles.Header, "code-block-header")}>
+      {showLanguage && (
+        <span className={styles.Language}>{displayLanguage}</span>
+      )}
+    </div>
+  );
+
   if (img) {
     ConditionalRendering = (
       <section
         className={classNames(styles.Container, {
           [styles.NoCopyButton]: hideCopyButton,
         })}
       >
+        {Header}
         <Image src={img} clean={true} />
-        <pre className={styles.Pre}>
+        <pre className={classNames(styles.Pre, styles.HasHeader)}>
           <code ref={codeRef} className={languageClass}>
             {customCode}
           </code>
@@ -105,7 +157,8 @@ const Code = ({
           [styles.NoCopyButton]: hideCopyButton,
         })}
       >
-        <pre data-line={lines}>
+        {Header}
+        <pre className={styles.HasHeader} data-line={lines}>
           <code ref={codeRef} className={languageClass}>
             {customCode}
           </code>
@@ -119,7 +172,8 @@ const Code = ({
           [styles.NoCopyButton]: hideCopyButton,
         })}
       >
-        <pre className={styles.Pre}>
+        {Header}
+        <pre className={classNames(styles.Pre, styles.HasHeader)}>
           <code ref={codeRef} className={languageClass}>
             {customCode}
           </code>

components/blocks/code.module.css

@@ -3,6 +3,23 @@
   @apply relative !important;
 }
 
+.Header {
+  @apply flex items-center px-3 py-1 bg-gray-20 text-gray-70 text-xs font-medium tracking-wide rounded-t-md border-b border-gray-30;
+  min-height: 2.5rem;
+}
+
+:global(.dark) .Header {
+  @apply bg-gray-90 text-gray-50 border-gray-80;
+}
+
+.Language {
+  @apply uppercase tracking-wider pr-4;
+}
+
+.HasHeader {
+  @apply rounded-t-none !important;
+}
+
 .Pre,
 .Container code {
   @apply overflow-auto max-w-full whitespace-pre;
@@ -29,16 +46,16 @@
   @apply bg-gray-80 opacity-30 z-0;
 }
 .Container button {
-  @apply absolute top-2 right-2 cursor-pointer h-8 w-8 mb-0 flex items-center;
+  @apply absolute top-2 right-1 cursor-pointer h-8 w-8 mb-0 flex items-center justify-center;
 }
 
 .Container button::before {
-  @apply absolute top-2 right-2 z-10 transition-all duration-75 hover:opacity-40;
+  @apply z-10 transition-all duration-75 hover:opacity-40;
   content: url("/clipboard.svg");
 }
 
 .Container button span {
-  @apply absolute right-10 text-gray-80 font-mono text-sm tracking-tight font-normal opacity-0;
+  @apply absolute -top-0.5 right-10 text-gray-80 font-mono text-sm tracking-tight font-normal opacity-0;
 }
 
 .Container button:hover span {

components/blocks/refCard.module.css

@@ -153,6 +153,10 @@
   @apply hidden;
 }
 
+.Container section :global(.code-block-header) {
+  @apply hidden !important;
+}
+
 .Container section div {
   @apply bg-gray-10;
   @apply text-gray-80;