feat: add support for code block syntax highlighting

package.json

@@ -53,6 +53,7 @@
         "@tiptap/extension-character-count": "2.0.3",
         "@tiptap/extension-code": "2.0.3",
         "@tiptap/extension-code-block": "2.0.3",
+        "@tiptap/extension-code-block-lowlight": "2.1.0",
         "@tiptap/extension-document": "2.0.3",
         "@tiptap/extension-dropcursor": "2.0.3",
         "@tiptap/extension-gapcursor": "2.0.3",
@@ -78,6 +79,7 @@
         "@tiptap/pm": "2.0.3",
         "@tiptap/react": "2.0.3",
         "@tiptap/suggestion": "2.0.3",
+        "lowlight": "2.9.0",
         "prosemirror-codemark": "0.4.2"
     },
     "devDependencies": {

src/extensions/rich-text/rich-text-kit.ts

@@ -2,6 +2,7 @@ import { Extension } from '@tiptap/core'
 import { Blockquote } from '@tiptap/extension-blockquote'
 import { Bold } from '@tiptap/extension-bold'
 import { CodeBlock } from '@tiptap/extension-code-block'
+import { CodeBlockLowlight } from '@tiptap/extension-code-block-lowlight'
 import { Dropcursor } from '@tiptap/extension-dropcursor'
 import { Gapcursor } from '@tiptap/extension-gapcursor'
 import { HardBreak } from '@tiptap/extension-hard-break'
@@ -17,6 +18,7 @@ import { TaskList } from '@tiptap/extension-task-list'
 import { Text } from '@tiptap/extension-text'
 import { Typography } from '@tiptap/extension-typography'
 import { Underline } from '@tiptap/extension-underline'
+import { lowlight } from 'lowlight/lib/common'
 
 import { BLOCKQUOTE_EXTENSION_PRIORITY } from '../../constants/extension-priorities'
 import { CopyMarkdownSource } from '../shared/copy-markdown-source'
@@ -41,6 +43,7 @@ import type { BoldOptions } from '@tiptap/extension-bold'
 import type { BulletListOptions } from '@tiptap/extension-bullet-list'
 import type { CodeOptions } from '@tiptap/extension-code'
 import type { CodeBlockOptions } from '@tiptap/extension-code-block'
+import type { CodeBlockLowlightOptions } from '@tiptap/extension-code-block-lowlight'
 import type { DropcursorOptions } from '@tiptap/extension-dropcursor'
 import type { HardBreakOptions } from '@tiptap/extension-hard-break'
 import type { HeadingOptions } from '@tiptap/extension-heading'
@@ -87,6 +90,11 @@ type RichTextKitOptions = {
      */
     codeBlock: Partial<CodeBlockOptions> | false
 
+    /**
+     * Set options for the `CodeBlockLowlight` extension, or `false` to disable.
+     */
+    codeBlockLowlight: Partial<CodeBlockLowlightOptions> | false
+
     /**
      * Set options for the `Document` extension, or `false` to disable.
      */
@@ -113,7 +121,7 @@ type RichTextKitOptions = {
     heading: Partial<HeadingOptions> | false
 
     /**
-     * Set options for the `Heading` extension, or `false` to disable.
+     * Set options for the `Highlight` extension, or `false` to disable.
      */
     highlight: Partial<HighlightOptions> | false
 
@@ -232,7 +240,6 @@ const RichTextKit = Extension.create<RichTextKitOptions>({
         if (this.options.code !== false) {
             extensions.push(
                 RichTextCode.configure(this.options?.code),
-
                 // Enhances the Code extension capabilities with additional features
                 CurvenoteCodemark,
             )
@@ -242,6 +249,12 @@ const RichTextKit = Extension.create<RichTextKitOptions>({
             extensions.push(CodeBlock.configure(this.options?.codeBlock))
         }
 
+        if (this.options.codeBlockLowlight !== false) {
+            extensions.push(
+                CodeBlockLowlight.configure({ lowlight, ...this.options?.codeBlockLowlight }),
+            )
+        }
+
         if (this.options.document !== false) {
             extensions.push(
                 RichTextDocument.configure(this.options?.document),

src/serializers/html/html.test.ts

@@ -637,14 +637,13 @@ I need to add another paragraph below the second list item.
                 )
             })
 
-            test('code block HTML output is preserved', () => {
+            test('code block HTML output is turned into syntax highlighting', () => {
                 expect(htmlSerializer.serialize(MARKDOWN_INPUT_CODE_BLOCK)).toBe(
-                    `<p>\`\`\`</p>&lt;html>
+                    `<pre><code>&lt;html>
   &lt;head>
     &lt;title>Test&lt;/title>
   &lt;/head>
-&lt;/html>
-\`\`\``,
+&lt;/html></code></pre>`,
                 )
             })
 
@@ -655,12 +654,13 @@ I need to add another paragraph below the second list item.
 2. Image:
 ![Octobi Wan Catnobi](https://octodex.github.com/images/octobiwan.jpg)
 3. Codeblock:
-\`\`\`</p>    &lt;html>
-      &lt;head>
-        &lt;title>Test&lt;/title>
-      &lt;/head>
-    &lt;/html>
-    \`\`\``)
+\`\`\`
+&lt;html>
+&lt;head>
+&lt;title>Test&lt;/title>
+&lt;/head>
+&lt;/html>
+\`\`\`</p>`)
             })
 
             test('horizontal rules HTML output is preserved', () => {