feat: add code blocks with syntax highlighting

Author: iamanaws

package.json

@@ -1,41 +1,42 @@
-{
-  "name": "sn-quill",
-  "version": "2.0.1",
-  "scripts": {
-    "start": "webpack serve --mode development",
-    "build": "webpack",
-    "preview": "live-server --cors dist/"
-  },
-  "dependencies": {
-    "@preact/compat": "^18.3.1",
-    "goober": "^2.1.18",
-    "preact": "^10.27.2",
-    "quill": "^2.0.3",
-    "sn-extension-api": "0.4.0"
-  },
-  "devDependencies": {
-    "@babel/core": "^7.28.5",
-    "@babel/plugin-transform-react-jsx": "^7.27.1",
-    "@babel/preset-env": "^7.28.5",
-    "@babel/preset-typescript": "^7.28.5",
-    "@types/react": "^19.2.2",
-    "@types/react-dom": "^19.2.2",
-    "babel-loader": "^10.0.0",
-    "copy-webpack-plugin": "^13.0.1",
-    "css-loader": "^7.1.2",
-    "html-webpack-plugin": "^5.6.4",
-    "live-server": "^1.2.2",
-    "sass": "^1.93.2",
-    "sass-loader": "^16.0.6",
-    "style-loader": "^4.0.0",
-    "ts-loader": "^9.5.4",
-    "ts-node": "^10.9.2",
-    "typescript": "^5.9.3",
-    "url-loader": "^4.1.1",
-    "webpack": "^5.102.1",
-    "webpack-cli": "^6.0.1",
-    "webpack-dev-server": "^5.2.2",
-    "zip-webpack-plugin": "^4.0.3"
-  },
-  "packageManager": "pnpm@10.5.2+sha512.da9dc28cd3ff40d0592188235ab25d3202add8a207afbedc682220e4a0029ffbff4562102b9e6e46b4e3f9e8bd53e6d05de48544b0c57d4b0179e22c76d1199b"
-}
+{
+  "name": "sn-quill",
+  "version": "2.0.1",
+  "scripts": {
+    "start": "webpack serve --mode development",
+    "build": "webpack",
+    "preview": "live-server --cors dist/"
+  },
+  "dependencies": {
+    "@preact/compat": "^18.3.1",
+    "goober": "^2.1.18",
+    "preact": "^10.27.2",
+    "quill": "^2.0.3",
+    "sn-extension-api": "0.4.0",
+    "highlight.js": "^11.11.1"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.28.5",
+    "@babel/plugin-transform-react-jsx": "^7.27.1",
+    "@babel/preset-env": "^7.28.5",
+    "@babel/preset-typescript": "^7.28.5",
+    "@types/react": "^19.2.2",
+    "@types/react-dom": "^19.2.2",
+    "babel-loader": "^10.0.0",
+    "copy-webpack-plugin": "^13.0.1",
+    "css-loader": "^7.1.2",
+    "html-webpack-plugin": "^5.6.4",
+    "live-server": "^1.2.2",
+    "sass": "^1.93.2",
+    "sass-loader": "^16.0.6",
+    "style-loader": "^4.0.0",
+    "ts-loader": "^9.5.4",
+    "ts-node": "^10.9.2",
+    "typescript": "^5.9.3",
+    "url-loader": "^4.1.1",
+    "webpack": "^5.102.1",
+    "webpack-cli": "^6.0.1",
+    "webpack-dev-server": "^5.2.2",
+    "zip-webpack-plugin": "^4.0.3"
+  },
+  "packageManager": "pnpm@10.5.2+sha512.da9dc28cd3ff40d0592188235ab25d3202add8a207afbedc682220e4a0029ffbff4562102b9e6e46b4e3f9e8bd53e6d05de48544b0c57d4b0179e22c76d1199b"
+}

pnpm-lock.yaml

@@ -3,6 +3,47 @@ import {styled} from "goober";
 
 import Quill from 'quill';
 import './quill.css';
+import hljs from 'highlight.js';
+import './hljs.css';
+
+const CODE_LANGUAGES = [
+  { key: 'plain', label: 'Plain' },
+  { key: 'asciidoc', label: 'Asciidoc' },
+  { key: 'bash', label: 'Bash' },
+  { key: 'c', label: 'C' },
+  { key: 'cpp', label: 'C++' },
+  { key: 'csharp', label: 'C#' },
+  { key: 'css', label: 'CSS' },
+  { key: 'csv', label: 'CSV' },
+  { key: 'diff', label: 'Diff' },
+  { key: 'elixir', label: 'Elixir' },
+  { key: 'go', label: 'Go' },
+  { key: 'html', label: 'HTML' },
+  { key: 'java', label: 'Java' },
+  { key: 'javascript', label: 'JavaScript' },
+  { key: 'json', label: 'JSON' },
+  { key: 'jsx', label: 'JSX' },
+  { key: 'kotlin', label: 'Kotlin' },
+  { key: 'lua', label: 'Lua' },
+  { key: 'markdown', label: 'Markdown' },
+  { key: 'nix', label: 'Nix' },
+  { key: 'perl', label: 'Perl' },
+  { key: 'php', label: 'PHP' },
+  { key: 'python', label: 'Python' },
+  { key: 'ruby', label: 'Ruby' },
+  { key: 'rust', label: 'Rust' },
+  { key: 'scss', label: 'SCSS' },
+  { key: 'shell', label: 'Shell' },
+  { key: 'solidity', label: 'Solidity' },
+  { key: 'sql', label: 'SQL' },
+  { key: 'swift', label: 'Swift' },
+  { key: 'toml', label: 'TOML' },
+  { key: 'tsx', label: 'TSX' },
+  { key: 'typescript', label: 'TypeScript' },
+  { key: 'xml', label: 'XML' },
+  { key: 'yaml', label: 'YAML' },
+  { key: 'zig', label: 'Zig' },
+];
 import {MarkdownShortcuts} from "./quill-markdown";
 import snApi from "sn-extension-api";
 import {getPreviewText} from "./utils";
@@ -22,6 +63,8 @@ Quill.register(DividerBlot as any, true);
 
 const icons = Quill.import('ui/icons') as Record<string, string>;
 icons.divider = '<svg viewBox="0 0 18 18" class="ql-fill"><rect height="2" width="14" x="2" y="8"></rect></svg>';
+// https://github.com/slab/quill/pull/3917
+icons['code-block'] = '<svg viewBox="0 0 18 18" transform="scale(0.8)"> <polyline class="ql-even ql-stroke" points="5 7 3 9 5 11" transform="scale(0.9)"></polyline> <polyline class="ql-even ql-stroke" points="13 7 15 9 13 11" transform="scale(0.9)"></polyline> <line class="ql-stroke" x1="10" x2="8" y1="5" y2="13" transform="scale(0.9)"></line> <path d="M0.868784,12.949447v4.05075l16.147395-.000001v-16.098555c0,0-2.647404,0-3.782006,0" fill="none" stroke-linecap="round" stroke-linejoin="round" class="ql-stroke" style="stroke-width: 2;"></path></svg>';
 
 const Container = styled('div')`
   position: absolute;
@@ -40,7 +83,7 @@ const QuillEditor = () => {
       readOnly: snApi.locked,
       modules: {
         toolbar: [
-          [{'font': Font.whitelist}, {'header': '1'}, {'header': '2'}, 'bold', 'italic', 'underline', 'strike', 'blockquote', 'code', 'link', 'image', 'divider', {'list': 'ordered'}, {'list': 'bullet'}, {'align': []}, {'color': []}, {'background': []}, 'clean'],
+          [{'font': Font.whitelist}, {'header': '1'}, {'header': '2'}, 'bold', 'italic', 'underline', 'strike', 'blockquote', 'code', 'code-block', 'link', 'image', 'divider', {'list': 'ordered'}, {'list': 'bullet'}, {'align': []}, {'color': []}, {'background': []}, 'clean'],
         ],
         keyboard: {
           bindings: {
@@ -57,6 +100,7 @@ const QuillEditor = () => {
           }
         },
         markdown: {},
+        syntax: { hljs, languages: CODE_LANGUAGES },
       },
       theme: 'snow',
     });