Default title for all code blocks on web site

[CanadianBeaver]

Is it possible to customize a title that will be displayed for each code block on the generated web-site?

[OzakIOne]

I'm not sure but you might be able if you swizzle the code block component and put a default title in it

[CanadianBeaver]

would you mind provide a working solution code?

[OzakIOne]

https://stackblitz.com/edit/github-dzvtxy?file=docs%2Fintro.md

Run the swizzle command with npm yarn pnpm or bun
Select @docusaurus/theme-classic
Select either javascript or typescript
Search for codeblock then select it
Select wrap
Then modify the CodeBlock/index.js just like in the sandbox

[CanadianBeaver]

that is nice, thank you

npm run swizzle @docusaurus/theme-classic CodeBlock -- --wrap

[CanadianBeaver]

I have changed my mind, sorry. Is it possible to add default title, only if codeblock has particular code definition, f.e. add default title only to this codeblock:

   ```blueprint
   la-la-la
   '''

[CanadianBeaver]

I trying something like this, but I am afraid this trying is not correct, please advise:

import React from 'react';
import CodeBlock from '@theme-original/CodeBlock';
import type CodeBlockType from '@theme/CodeBlock';
import type {WrapperProps} from '@docusaurus/types';

type Props = WrapperProps<typeof CodeBlockType>;

export default function CodeBlockWrapper(props: Props): JSX.Element {
  const defaultTitle = props.className?.toString() == "language-blueprint" ? "blueprint" : "";
  return (
    <>
      <CodeBlock {...props} title={defaultTitle} />
    </>
  );
}

[OzakIOne]

How are you planning to give a classname ? Give me details about what you are doing otherwise its a bit hard to help you