Add lowlight in example

example/package.json

@@ -3,8 +3,10 @@
   "name": "example",
   "version": "0.0.0",
   "dependencies": {
+    "@tiptap/extension-code-block-lowlight": "^2.1.12",
     "@tiptap/extension-youtube": "^2.1.12",
     "bootstrap": "^5.0.0-beta3",
+    "lowlight": "^3.1.0",
     "markdown-it-container": "^3.0.0",
     "markdown-it-mark": "^3.0.1",
     "vue": "^3.2.47"

example/src/app.scss

@@ -39,6 +39,58 @@ $color-grey: #dddddd;
       code {
         display: block;
       }
+
+      .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;
+      }
     }
 
     p code {

example/src/components/Editor.vue

@@ -31,12 +31,15 @@
     import TaskItem from '@tiptap/extension-task-item'
     import CodeBlock from "@tiptap/extension-code-block";
     import Youtube from "@tiptap/extension-youtube";
+    import CodeBlockLowlight from '@tiptap/extension-code-block-lowlight';
     import { Markdown } from "tiptap-markdown";
     import MenuBar from "./MenuBar.vue";
     import content from '../data/content.md?raw';
-    // import content from "../data/large-content";
     import Highlight from "../extensions/highlight";
     import Container from "../extensions/container";
+    import { common, createLowlight } from 'lowlight';
+
+    const lowlight = createLowlight(common);
 
     export default {
         components: {
@@ -85,6 +88,9 @@
                     CodeBlock.configure({
                         languageClassPrefix: 'lang-',
                     }),
+                    // CodeBlockLowlight.configure({
+                    //     lowlight,
+                    // }),
                     Container,
                     Youtube,
                 ],