fix: more data attributes for code block elements (#82)

* add more code block data attributes

* Create brown-goats-serve.md

Author: haydenbleasel

.changeset/brown-goats-serve.md

@@ -0,0 +1,5 @@
+---
+"streamdown": patch
+---
+
+add more code block data attributes

packages/streamdown/__tests__/code-block.test.tsx

@@ -231,4 +231,31 @@ describe('CodeBlock with multiple languages', () => {
       expect(languageLabels[2].textContent).toBe('typescript');
     }, { timeout: 5000 });
   });
+
+  it('should have data attributes on container, header, and code block elements', async () => {
+    const { container } = render(
+      <ShikiThemeContext.Provider value={['github-light', 'github-dark']}>
+        <CodeBlock code="const x = 1;" language="javascript" />
+      </ShikiThemeContext.Provider>
+    );
+
+    await waitFor(() => {
+      // Check container has data attributes
+      const containerElement = container.querySelector('[data-code-block-container]');
+      expect(containerElement).toBeTruthy();
+      expect(containerElement?.getAttribute('data-language')).toBe('javascript');
+
+      // Check header has data attributes
+      const headerElement = container.querySelector('[data-code-block-header]');
+      expect(headerElement).toBeTruthy();
+      expect(headerElement?.getAttribute('data-language')).toBe('javascript');
+
+      // Check code block has data attributes
+      const codeBlockElements = container.querySelectorAll('[data-code-block]');
+      expect(codeBlockElements.length).toBeGreaterThan(0);
+      codeBlockElements.forEach(element => {
+        expect(element.getAttribute('data-language')).toBe('javascript');
+      });
+    }, { timeout: 5000 });
+  });
 });

packages/streamdown/lib/code-block.tsx

@@ -193,21 +193,33 @@ export const CodeBlock = ({
 
   return (
     <CodeBlockContext.Provider value={{ code }}>
-      <div className="my-4 w-full overflow-hidden rounded-xl border">
-        <div className="flex items-center justify-between bg-muted/80 p-3 text-muted-foreground text-xs">
+      <div 
+        className="my-4 w-full overflow-hidden rounded-xl border"
+        data-code-block-container
+        data-language={language}
+      >
+        <div 
+          className="flex items-center justify-between bg-muted/80 p-3 text-muted-foreground text-xs"
+          data-code-block-header
+          data-language={language}
+        >
           <span className="ml-1 font-mono lowercase">{language}</span>
           <div>{children}</div>
         </div>
         <div className="w-full">
           <div className="min-w-full">
             <div
               className={cn('overflow-x-auto dark:hidden', className)}
+              data-code-block
+              data-language={language}
               // biome-ignore lint/security/noDangerouslySetInnerHtml: "this is needed."
               dangerouslySetInnerHTML={{ __html: html }}
               {...rest}
             />
             <div
               className={cn('hidden overflow-x-auto dark:block', className)}
+              data-code-block
+              data-language={language}
               // biome-ignore lint/security/noDangerouslySetInnerHtml: "this is needed."
               dangerouslySetInnerHTML={{ __html: darkHtml }}
               {...rest}