From 01ea5180817b425cf1e24099e539d9ee9e3feff5 Mon Sep 17 00:00:00 2001 From: ladybluenotes Date: Wed, 7 Jan 2026 15:49:37 -0800 Subject: [PATCH 01/19] style: enhance code block appearance and add title support --- src/components/CodeBlock.tsx | 91 ++++++++++++++++++++---------------- src/styles/app.css | 9 ++++ 2 files changed, 59 insertions(+), 41 deletions(-) diff --git a/src/components/CodeBlock.tsx b/src/components/CodeBlock.tsx index 2f372f43f..aafdfe9ec 100644 --- a/src/components/CodeBlock.tsx +++ b/src/components/CodeBlock.tsx @@ -6,7 +6,6 @@ import type { Mermaid } from 'mermaid' import { transformerNotationDiff } from '@shikijs/transformers' import { createHighlighter, type HighlighterGeneric } from 'shiki' import { Button } from './Button' -import { ButtonGroup } from './ButtonGroup' // Language aliases mapping const LANG_ALIASES: Record = { @@ -99,6 +98,12 @@ export function CodeBlock({ isEmbedded?: boolean showTypeCopyButton?: boolean }) { + const rawTitle = ((props as any).dataCodeTitle || + (props as any)['data-code-title']) as string | undefined + + // Filter out "undefined" strings and empty strings + const title = rawTitle && rawTitle !== 'undefined' ? rawTitle : undefined + const childElement = props.children as | undefined | { props?: { className?: string; children?: string } } @@ -189,46 +194,50 @@ export function CodeBlock({ )} style={props.style} > - {showTypeCopyButton ? ( - - {lang ? ( - {lang} - ) : null} - - - ) : null} + {(title || showTypeCopyButton) && ( +
+ {/* Title on the left */} +
+ {title || ''} +
+ + {/* Copy button on the right, visible only on hover */} + +
+ )} {codeElement} ) diff --git a/src/styles/app.css b/src/styles/app.css index ede8c6e0e..0108b24bb 100644 --- a/src/styles/app.css +++ b/src/styles/app.css @@ -861,3 +861,12 @@ mark { width: 1em; height: 1em; } + +/* Consecutive code blocks - no gap when under headings */ +[data-tab] .codeblock + .codeblock { + @apply mt-0 border-t-0 rounded-t-none; +} + +[data-tab] .codeblock:has(+ .codeblock) { + @apply rounded-b-none; +} \ No newline at end of file From cd9da919ea704206a5acf1dec2b652a431ac6cde Mon Sep 17 00:00:00 2001 From: ladybluenotes Date: Wed, 7 Jan 2026 16:06:36 -0800 Subject: [PATCH 02/19] style: improve code block layout and enhance copy notification --- src/components/CodeBlock.tsx | 17 +++++------------ 1 file changed, 5 insertions(+), 12 deletions(-) diff --git a/src/components/CodeBlock.tsx b/src/components/CodeBlock.tsx index aafdfe9ec..13887e22d 100644 --- a/src/components/CodeBlock.tsx +++ b/src/components/CodeBlock.tsx @@ -128,14 +128,9 @@ export function CodeBlock({ const code = children?.props.children const [codeElement, setCodeElement] = React.useState( - <> -
+      
         {lang === 'mermaid' ?  : code}
       
-
-        {lang === 'mermaid' ?  : code}
-      
- , ) React[ @@ -196,12 +191,10 @@ export function CodeBlock({ > {(title || showTypeCopyButton) && (
- {/* Title on the left */}
{title || ''}
- {/* Copy button on the right, visible only on hover */}