https://github.com/hebmor/tiptap-extension-code-block-prism

An extension for TipTap editor that adds syntax highlighting support from Prism.js .
https://github.com/hebmor/tiptap-extension-code-block-prism

jsx mdx syntax-highlighting tiptap

Last synced: 26 days ago
JSON representation

An extension for TipTap editor that adds syntax highlighting support from Prism.js .

• Host: GitHub
• URL: https://github.com/hebmor/tiptap-extension-code-block-prism
• Owner: Hebmor
• Created: 2022-11-27T15:18:37.000Z (almost 2 years ago)
• Default Branch: master
• Last Pushed: 2023-01-04T09:31:45.000Z (almost 2 years ago)
• Last Synced: 2024-10-10T06:23:40.752Z (26 days ago)
• Topics: jsx, mdx, syntax-highlighting, tiptap
• Language: TypeScript
• Homepage:
• Size: 13.7 KB
• Stars: 10
• Watchers: 1
• Forks: 1
• Open Issues: 2
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
 # :bookmark:CodeBlockPrism extension for TIPTAP Editor

 This extension is based on [CodeBlockLowlight](https://tiptap.dev/api/nodes/code-block-lowlight). Most of the code in this repository is taken from there.

 ## :cat: What for? Why not CodeBlockLowlight?

 

 Unfortunately CodeBlockLowlight is based on [LowLight](https://github.com/wooorm/lowlight) and [Highlight.js](https://github.com/highlightjs/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?

 ```js

const editor = useEditor({

    extensions: [

        Document,

        Paragraph,

        Text,

        CodeBlock,

        CodeBlockPrism.configure({

            defaultLanguage: 'jsx',

        }),

    ],

    content: ``,

});

 ```

  ## :hammer_and_wrench: How to style classes generated by PrismJS?

  You can define styles via CSS. There are already ready-made themes, for example: [OneDark](https://github.com/AGMStudio/prism-theme-one-dark/blob/master/prism-onedark.css)