tiptap/examples/Components/Routes/CodeHighlighting/index.vue

<template>
  <div class="editor">
    <editor-content class="editor__content" :editor="editor" />
  </div>
</template>

<script>
import { Editor, EditorContent } from 'tiptap'
import {
  CodeBlockHighlight,
  HardBreak,
  Heading,
  Bold,
  Code,
  Italic,
} from 'tiptap-extensions'

import javascript from 'highlight.js/lib/languages/javascript'
import css from 'highlight.js/lib/languages/css'

import {
  JavaScriptExample,
  CSSExample,
  ExplicitImportExample,
} from './examples'

export default {
  components: {
    EditorContent,
  },
  data() {
    return {
      editor: new Editor({
        extensions: [
          new CodeBlockHighlight({
            languages: {
              javascript,
              css,
            },
          }),
          new HardBreak(),
          new Heading({ levels: [1, 2, 3] }),
          new Bold(),
          new Code(),
          new Italic(),
        ],
        content: `
          <h2>
            Code Highlighting
          </h2>
          <p>
            These are code blocks with <strong>automatic syntax highlighting</strong> based on highlight.js.
          </p>
          <pre><code>${JavaScriptExample}</code></pre>
          <pre><code>${CSSExample}</code></pre>

          <p>
            Note: tiptap doesn't import syntax highlighting language definitions from highlight.js. You
            <strong>must</strong> import them and initialize the extension with all languages you want to support:
          </p>
          <pre><code>${ExplicitImportExample}</code></pre>
        `,
      }),
    }
  },
}
</script>

<style lang="scss">

pre {
  &::before {
    content: attr(data-language);
    text-transform: uppercase;
    display: block;
    text-align: right;
    font-weight: bold;
    font-size: 0.6rem;
  }

  code {

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

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

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

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

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

    .hljs-keyword,
    .hljs-selector-tag {
      color: #6699cc;
    }

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

    .hljs-strong {
      font-weight: 700;
    }
  }
}
</style>