feat: Added support for code blocks syntax highlighting

apps/web/components/tailwind/advanced-editor.tsx

@@ -1,29 +1,29 @@
 "use client";
 import { defaultEditorContent } from "@/lib/content";
-import React, { useEffect, useState } from "react";
-import { useDebouncedCallback } from "use-debounce";
 import {
-  EditorRoot,
   EditorCommand,
-  EditorCommandItem,
   EditorCommandEmpty,
+  EditorCommandItem,
+  EditorCommandList,
   EditorContent,
-  type JSONContent,
   EditorInstance,
-  EditorCommandList,
+  EditorRoot,
+  type JSONContent,
 } from "novel";
 import { ImageResizer, handleCommandNavigation } from "novel/extensions";
+import { useEffect, useState } from "react";
+import { useDebouncedCallback } from "use-debounce";
 import { defaultExtensions } from "./extensions";
-import { Separator } from "./ui/separator";
-import { NodeSelector } from "./selectors/node-selector";
-import { LinkSelector } from "./selectors/link-selector";
 import { ColorSelector } from "./selectors/color-selector";
+import { LinkSelector } from "./selectors/link-selector";
+import { NodeSelector } from "./selectors/node-selector";
+import { Separator } from "./ui/separator";
 
-import { TextButtons } from "./selectors/text-buttons";
-import { slashCommand, suggestionItems } from "./slash-command";
-import GenerativeMenuSwitch from "./generative/generative-menu-switch";
 import { handleImageDrop, handleImagePaste } from "novel/plugins";
+import GenerativeMenuSwitch from "./generative/generative-menu-switch";
 import { uploadFn } from "./image-upload";
+import { TextButtons } from "./selectors/text-buttons";
+import { slashCommand, suggestionItems } from "./slash-command";
 
 const extensions = [...defaultExtensions, slashCommand];
 
@@ -41,8 +41,12 @@ const TailwindAdvancedEditor = () => {
   const debouncedUpdates = useDebouncedCallback(
     async (editor: EditorInstance) => {
       const json = editor.getJSON();
-
+      window.localStorage.setItem("html-content", editor.getHTML());
       window.localStorage.setItem("novel-content", JSON.stringify(json));
+      window.localStorage.setItem(
+        "markdown",
+        editor.storage.markdown.getMarkdown(),
+      );
       setSaveStatus("Saved");
     },
     500,

apps/web/components/tailwind/extensions.ts

@@ -1,17 +1,19 @@
 import {
+  AIHighlight,
+  CodeBlockLowlight,
+  HorizontalRule,
+  Placeholder,
+  StarterKit,
+  TaskItem,
+  TaskList,
   TiptapImage,
   TiptapLink,
   UpdatedImage,
-  TaskList,
-  TaskItem,
-  HorizontalRule,
-  StarterKit,
-  Placeholder,
-  AIHighlight,
 } from "novel/extensions";
 import { UploadImagesPlugin } from "novel/plugins";
 
 import { cx } from "class-variance-authority";
+import { common, createLowlight } from "lowlight";
 
 //TODO I am using cx here to get tailwind autocomplete working, idk if someone else can write a regex to just capture the class key in objects
 const aiHighlight = AIHighlight;
@@ -106,6 +108,12 @@ const starterKit = StarterKit.configure({
   gapcursor: false,
 });
 
+const codeBlockLowlight = CodeBlockLowlight.configure({
+  // configure lowlight: common /  all / use highlightJS in case there is a need to specify certain language grammars only
+  // common: covers 37 language grammars which should be good enough in most cases
+  lowlight: createLowlight(common),
+});
+
 export const defaultExtensions = [
   starterKit,
   placeholder,
@@ -116,4 +124,5 @@ export const defaultExtensions = [
   taskItem,
   horizontalRule,
   aiHighlight,
+  codeBlockLowlight,
 ];

apps/web/package.json

@@ -30,6 +30,8 @@
     "eslint": "8.36.0",
     "eslint-config-next": "13.2.4",
     "eventsource-parser": "^0.1.0",
+    "highlight.js": "^11.9.0",
+    "lowlight": "^3.1.0",
     "lucide-react": "^0.244.0",
     "next": "14.1.0",
     "next-themes": "^0.2.1",

apps/web/styles/globals.css

@@ -94,3 +94,71 @@
     @apply bg-background text-foreground;
   }
 }
+
+
+pre {
+  background: #0d0d0d;
+  border-radius: 0.5rem;
+  color: #fff;
+  font-family: "JetBrainsMono", monospace;
+  padding: 0.75rem 1rem;
+
+  code {
+    background: none;
+    color: inherit;
+    font-size: 0.8rem;
+    padding: 0;
+  }
+
+  .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;
+  }
+}

packages/headless/package.json

@@ -40,6 +40,7 @@
   "dependencies": {
     "@radix-ui/react-slot": "^1.0.2",
     "@tiptap/core": "^2.1.7",
+    "@tiptap/extension-code-block-lowlight": "^2.2.6",
     "@tiptap/extension-color": "^2.1.7",
     "@tiptap/extension-highlight": "^2.1.7",
     "@tiptap/extension-horizontal-rule": "^2.1.7",

packages/headless/src/extensions/index.ts

@@ -1,21 +1,24 @@
-import StarterKit from "@tiptap/starter-kit";
+import { InputRule } from "@tiptap/core";
+import { Color } from "@tiptap/extension-color";
+import Highlight from "@tiptap/extension-highlight";
 import HorizontalRule from "@tiptap/extension-horizontal-rule";
-import TiptapLink from "@tiptap/extension-link";
 import TiptapImage from "@tiptap/extension-image";
+import TiptapLink from "@tiptap/extension-link";
 import Placeholder from "@tiptap/extension-placeholder";
-import TiptapUnderline from "@tiptap/extension-underline";
-import TextStyle from "@tiptap/extension-text-style";
-import { Color } from "@tiptap/extension-color";
 import { TaskItem } from "@tiptap/extension-task-item";
 import { TaskList } from "@tiptap/extension-task-list";
-import { InputRule } from "@tiptap/core";
+import TextStyle from "@tiptap/extension-text-style";
+import TiptapUnderline from "@tiptap/extension-underline";
+import StarterKit from "@tiptap/starter-kit";
+import AutoJoiner from "tiptap-extension-auto-joiner";
+import GlobalDragHandle from "tiptap-extension-global-drag-handle";
 import { Markdown } from "tiptap-markdown";
-import Highlight from "@tiptap/extension-highlight";
-import UpdatedImage from "./updated-image";
 import CustomKeymap from "./custom-keymap";
 import { ImageResizer } from "./image-resizer";
-import GlobalDragHandle from "tiptap-extension-global-drag-handle";
-import AutoJoiner from "tiptap-extension-auto-joiner";
+import UpdatedImage from "./updated-image";
+
+import CodeBlockLowlight from "@tiptap/extension-code-block-lowlight";
+
 
 const PlaceholderExtension = Placeholder.configure({
   placeholder: ({ node }) => {
@@ -68,21 +71,23 @@ const Horizontal = HorizontalRule.extend({
   },
 });
 
+
+export * from "./ai-highlight";
+export * from "./slash-command";
 export {
+  CodeBlockLowlight,
+  Horizontal as HorizontalRule,
+  ImageResizer,
+  InputRule,
   PlaceholderExtension as Placeholder,
-  simpleExtensions,
   StarterKit,
-  Horizontal as HorizontalRule,
-  TiptapLink,
-  TiptapImage,
-  UpdatedImage,
   TaskItem,
   TaskList,
-  InputRule,
-  ImageResizer,
+  TiptapImage,
+  TiptapLink,
+  UpdatedImage,
+  simpleExtensions,
 };
-export * from "./ai-highlight";
-export * from "./slash-command";
 
 // Todo: Maybe I should create an utils entry
 export { getPrevText } from "../utils/utils";