toeverything / blocksuite

🧩 Content editing tech stack for the web - BlockSuite is a toolkit for building editors and collaborative applications.
https://blocksuite.io
Mozilla Public License 2.0
4.35k stars 398 forks source link

[code block] Is there any way to provide a custom shiki theme? #7221

Open higuaifan opened 3 months ago

higuaifan commented 3 months ago

Hello, thank you for your open source project.

I am the author of shuimo-ui, and I really like your editor. I want to create a shuimo style theme for it, so I am planning to make some blocks or extensions to blocksuite.

I have reviewed the issues and source code as thoroughly as possible, but unfortunately, I couldn't find a solution to my problem.

How I encountered the problem

We already have a shuimo style shiki theme. I tried to apply a custom theme to the code module, but I found that here: https://github.com/toeverything/blocksuite/blob/4fec95a0ad01a1e16e0b11757748d340b5b34df1/packages/blocks/src/code-block/code-block.ts#L128 and here: https://github.com/toeverything/blocksuite/blob/4fec95a0ad01a1e16e0b11757748d340b5b34df1/packages/blocks/src/_common/adapters/html.ts#L1129, LIGHT_THEME and DARK_THEME are directly specified. I am not sure about the purpose of html.ts as I did not thoroughly review the context, but for the code-block, it seems there is no way to provide a custom theme.

My questions

  1. What should I do if I want to add a custom shiki theme?

If I missed something while reading the documentation and source code, which led to the above questions, please point it out directly, and I will re-read the source code (of course, it would be best if you could give me a general direction). If there is indeed no such feature and you think it is worth iterating on and needs contributions, I am more than willing to contribute.

Lastly, thank you for your help 🙏

防英语表达不准确,这是中文版 您好,感谢您的开源, > 我是[shuimo-ui](https://github.com/shuimo-design/shuimo-ui)的作者,我非常喜欢你们的`editor`,我想为它制作一套`shuimo style`的皮肤, > 因此我正打算针对`blocksuite`进行一些扩展。 我尽可能查阅了`issue`和源码,但是很遗憾没解决我的问题。 ------ # 我怎么遇到问题的 我们已经拥有一份`shuimo style`的`shiki theme`, 我试图给`code`模块更换一套主题,但我发现在这里:https://github.com/toeverything/blocksuite/blob/4fec95a0ad01a1e16e0b11757748d340b5b34df1/packages/blocks/src/code-block/code-block.ts#L128 和 https://github.com/toeverything/blocksuite/blob/4fec95a0ad01a1e16e0b11757748d340b5b34df1/packages/blocks/src/_common/adapters/html.ts#L1129 直接指定了`LIGHT_THEME`和`DARK_THEME`, 我不清楚`html.ts`中的作用是什么,我没有认真地查阅上下文, 但是仅`code-block`这块来说,似乎没有给到可以自定义主题的地方。 # 我的问题是什么 1. 如果我想要添加一个自定义的`shiki theme`,我该怎么办呢? 如果我在查阅文档和源码的时候有遗漏,才导致出现了以上问题,麻烦您直接指出,我会重新阅读源码(当然最好能告诉我大致方向)。 如果确实没有这方面的特性且你们认为这是值得迭代的、且需要贡献的,我十分愿意做出一些贡献。 最后,感谢您的帮助 🙏
Flrande commented 3 months ago

Reasonable, I think configuration options can be exposed through the service.