How do you highlight codeblock with tiptap?

Question

Is there a way to highlight code when using TipTap?

Using the default simple editor I can create block of code when using three backticks but, those are not highlighted.

import { Editor } from '@tiptap/core';
import StarterKit from '@tiptap/starter-kit';
import Highlight from '@tiptap/extension-highlight';
import Typography from '@tiptap/extension-typography';

new Editor({
            element: element,
            extensions: [StarterKit, Highlight, Typography],
            content: html,
            onTransaction: () => {
                // force re-render so `editor.isActive` works as expected
                editor = editor;
            },
            editorProps: {
                attributes: {
                    class: 'focus:outline-none',
                },
            }
        });

Answer 1

I followed @lakshya-thakur answer and used the code-block-lowlight extension.

However, the documentation is outdated or at least did not worked out at ouf the box with SvelteKit / Vite. Therefore here the detailed solution.

1. Install the extention

npm i lowlight @tiptap/extension-code-block-lowlight

2. Import the extension

import { CodeBlockLowlight } from '@tiptap/extension-code-block-lowlight';

3. Here it differs from the documentation. Import a wrapper to create lowlight and the languages you which to load. You can either import all languages, specific languages or as in this example only a subset of the most common languages.

import { common, createLowlight } from 'lowlight';

4. To create the extension both those imports.

CodeBlockLowlight.configure({
        lowlight: createLowlight(common)
    })

5. Adding this extension in addition to the starter kit will results in TipTap throwing a warning Duplicate extension names found: ['blockCode'] at runtime, therefore the block code extension included in the starter kit should be disabled.

StarterKit.configure({
        codeBlock: false
    })
    

All together the coudl look like:

new Editor({
                element: element,
                extensions:[
                    StarterKit.configure({
                        codeBlock: false
                    }),
                    CodeBlockLowlight.configure({
                        lowlight: createLowlight(common)
                    })
                ],
                content,
                onTransaction: () => {
                    // force re-render so `editor.isActive` works as expected
                    editor = editor;
                },
            }) 

6. Finally, the code won't be highlighted without CSS. Therefore you should also define some styles.

pre {
        background: #0D0D0D;
        color: #FFF;
        font-family: 'JetBrainsMono', monospace;
        padding: 0.75rem 1rem;
        border-radius: 0.5rem;

        code {
            color: inherit;
            padding: 0;
            background: none;
            font-size: 0.8rem;
        }

        .hljs-comment,
        .hljs-quote {
            color: #616161;
        }

        .hljs-variable,
        .hljs-template-variable,
        .hljs-attribute,
        .hljs-tag,
        .hljs-name,
        .hljs-regexp,
        .hljs-link,
        .hljs-name,
        .hljs-selector-id,
        .hljs-selector-class {
            color: #F98181;
        }

        .hljs-number,
        .hljs-meta,
        .hljs-built_in,
        .hljs-builtin-name,
        .hljs-literal,
        .hljs-type,
        .hljs-params {
            color: #FBBC88;
        }

        .hljs-string,
        .hljs-symbol,
        .hljs-bullet {
            color: #B9F18D;
        }

        .hljs-title,
        .hljs-section {
            color: #FAF594;
        }

        .hljs-keyword,
        .hljs-selector-tag {
            color: #70CFF8;
        }

        .hljs-emphasis {
            font-style: italic;
        }

        .hljs-strong {
            font-weight: 700;
        }
    } 

The code should now be highlighted.

Answer 2

You can use https://tiptap.dev/api/nodes/code-block-lowlight extension which internally uses the highlight.js library to support syntax highlighting.

Answer 3

Tiptap is a JavaScript rich-text editor framework for Vue.js, and it doesn't natively support code block highlighting. However, you can achieve code block highlighting by combining Tiptap with other libraries or custom logic. You can choose a code highlighting library like Prism.js or highlight.js. These libraries can automatically highlight code syntax in code blocks.

Example using Prism.js

// Install Prism.js via npm or include it in your project
import 'prismjs';
import 'prismjs/themes/prism.css';

// Use Prism.js to highlight code blocks
const highlightCodeBlocks = () => {
  document.querySelectorAll('pre code').forEach((block) => {
    Prism.highlightElement(block);
  });
};

Tiptap emits events during the content editing process. You can use these events to trigger code highlighting whenever the content changes.

<template>
  <div>
    <tiptap-editor v-model="content" @update="handleUpdate"></tiptap-editor>
  </div>
</template>

<script>
import { Editor } from 'tiptap';
import 'tiptap/styles/reset.css';
import 'tiptap/styles/typography.css';
import 'tiptap/styles/editor.css';

export default {
  data() {
    return {
      content: '<p>Your initial content here...</p>',
    };
  },
  methods: {
    handleUpdate() {
      // Trigger code highlighting after each update
      highlightCodeBlocks();
    },
  },
};
</script>

In this example, the handleUpdate method is called whenever the content in the editor is updated. This is where you can call your code highlighting function.

You may also want to apply code highlighting when the component is initially rendered.

mounted() {
  highlightCodeBlocks();
},

This ensures that code blocks are highlighted when the component is first loaded.

Remember to adapt the code snippets based on your specific use case, and choose the code highlighting library and options that best fit your project requirements.

Answer 4

Important: The @tiptap/extension-code-block-lowlight extension is for code blocks only. To highlight code within a line, you'll need a different extension.

For inline code highlighting, use:

npm install @nartix/tiptap-inline-code-highlight

Import the extension:

import CodeInlineLowlight from '@nartix/tiptap-inline-code-highlight';

Add it to your Tiptap editor:

CodeInlineLowlight.configure({
  lowlight,
})

Example: