BlockNote icon indicating copy to clipboard operation
BlockNote copied to clipboard

Option to customize Shiki Theme in CodeBlockContent

Open vansickn opened this issue 1 year ago • 1 comments

Is your feature request related to a problem? Please describe.

Currently, the only syntax highlighting for the CodeBlock is github-dark. My use-case has the code block styled in a different theme, and the text is currently unreadable on my background color. Therefore, it would be convenient if I was able to pass in a different shiki theme to match the background.

Describe the solution you'd like

The ability to pass an optional theme parameter into the customizeCodeBlock function that's exposed. Or, if there's a simpler way to do it I'm okay with that too. Optionally, you may think passing a fully constructed highlighter is the best way forward.

Describe alternatives you've considered

  1. I could leave the code block styled as is, but it would go against the theming of my application.
  2. Could fork the component and pass it in as a custom block, but I assume others would want this capability as well.

Additional context

I had a custom code block implementation before, but I really love the simplicity of the one in blocknote! Would love to see some styling optionality though.

I'm also happy to give this a try and submit a PR if that is something @YousefED would be okay with.

Bonus [ ] I'm a sponsor and would appreciate if you could look into this sooner than later 💖

vansickn avatar Dec 19 '24 14:12 vansickn

This seems related to my past question in #1213. FYI @areknawo

sindras avatar Dec 20 '24 05:12 sindras

I think this has been resolved with the new codeblock setup

YousefED avatar Jun 19 '25 19:06 YousefED