tiptap-extension-code-block-prism

🔖CodeBlockPrism extension for TIPTAP Editor

This extension is based on CodeBlockLowlight. Most of the code in this repository is taken from there.

🐱 What for? Why not CodeBlockLowlight?

Unfortunately CodeBlockLowlight is based on LowLight and Highlight.js, Highlight.js supports many languages ​​but doesn't support many useful syntax. For example: JSX, TSX, MDX.

The list of supported Prism.js languages ​​can be found here: https://prismjs.com/#supported-languages

✍️ How to use it?

const editor = useEditor({
   extensions: [
       Document,
       Paragraph,
       Text,
       CodeBlock,
       CodeBlockPrism.configure({
           defaultLanguage: 'jsx',
       }),
   ],
   content: ``,
});

🛠️ How to style classes generated by PrismJS?

You can define styles via CSS. There are already ready-made themes, for example: OneDark