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',
},
}
});
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.
npm i lowlight @tiptap/extension-code-block-lowlight
import { CodeBlockLowlight } from '@tiptap/extension-code-block-lowlight';
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';
CodeBlockLowlight.configure({
lowlight: createLowlight(common)
})
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;
},
})
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.