PrismJS collapses all SlateJS codelines in a code block into single string in one line

Information

• Language: JavaScript
• Plugins: none

Does the problem still occur in the latest version of Prism? yes

Description Before the Prism.highlightAll() is applied, the markup looks like this

once it’s highlightAll() is run it collapses all into this

Code snippet

  useEffect(() => {
    Prism.highlightAll();
  }, []);

I’ve spent lots of time trying to figure out how to make PrismJS work with SlateJS, please help fellow people in (or not-in) self-isolation. 🤞🙏 🙏 🤞

[RunDevelopment]

You don’t have to call the Keep markup plugin at all. It will do its magic automatically.

Regarding the babel plugin: I feel like @mAAdhaTTah is more qualified to answer your question.

[RunDevelopment]

I can already see the problem in the markup.

SlateJS will split the code by lines and put each line in its own div.codeLine element, right? The problem is that Prism will remove all markup inside the element it is highlighting (the code element).

I don’t kown if it’ll work, but try the Keep markup plugin. It should solve your problem.