Code-Block Styling

[ahwelgemoed]

I have some questions about code block -

Currently code-blocks don't seem to be "stylable". In the drop down I can select different languages but this is doest seem to do anything with the code block. I guess this would be used for syntax highliting and I see in the source-code that PrismJs is used, but I cannot seem to get my head around how its suppose to work. Do someone maybe have some insights here?

There also is not a-lot of Docs on this. (Maybe Ive missed it )

You can see the issue in the playground.

[zbeyens]

It's a known bug in the docs but it should work on your environment

[ahwelgemoed]

Thanks for the reply, unfortunately it doesn't, my environment is the same as the test site.

[dylans]

Interesting, it works as expected for me in our production environment on Living Spec using the Plate codebase (eg syntax highlighting styles get applied based on the language).

which build tool do you use?

[ahwelgemoed]

It's part of a more complex widget solution, as part of a Mendix Application that is in its MVP stage, (Docs here) for all intense purposes it's just a React App, and I have a nice full setup working, Mentions/Tagging the whole works, but syntax highlighting, is the one stumbling block. The build tool is a custom Rollup setup

Do you maybe know what the bug is in the Example, I know what that question sounds like 🙈 , is it loading 3rd party script for styling or something?

[dylans]

The one difference I know of is that our app uses webpack, whereas Plate uses rollup like you do. I don't know how webpack vs. rollup differ in their handling of loading css resources.

[ahwelgemoed]

That was my thinking aswell. I'll try some hacky stuff, just to see if I can get it going, maybe manually load the PrismJs css in and see what happens. Thanks for the help.

[jyc5131]

We have same issue and debugged the issue,
one is the decoration className is not rendered in DefaultLeaf Line 13
<span {...attributes} {...props} className={leaf.className}>
and import the style files in CodeBlockElement.tsx
import 'prismjs/themes/prism.css';
is it correct solution? if so I am pleased to send a PR

[dylans]

This should be fixed in the latest releases and on the playground. If it's not still working for your app please let me know.

[ahwelgemoed]

Yes, it has been fixed thanks.

Do you maybe have a link to the code or merge that fixed the issue?

[dylans]

https://github.com/udecode/plate/pull/1420/files