From: Adam Dullage <redacted>
Date: Wed, 2 Mar 2022 12:54:40 +0000 (+0000)
Subject: Syntax Highlighter Plugin
X-Git-Url: http://git.99rst.org/?a=commitdiff_plain;h=854f9164bd405aec37b82c6c9ea1003d948d800d;p=flatnotes.git

Syntax Highlighter Plugin
---

diff --git a/flatnotes/src/components/App.js b/flatnotes/src/components/App.js
index 4fbc382..4d2f725 100644
--- a/flatnotes/src/components/App.js
+++ b/flatnotes/src/components/App.js
@@ -1,8 +1,8 @@
-import "@toast-ui/editor/dist/toastui-editor.css";
-import "@toast-ui/editor/dist/toastui-editor-viewer.css";
 import { Editor } from "@toast-ui/vue-editor";
 import { Viewer } from "@toast-ui/vue-editor";
 
+import codeSyntaxHighlight from "@toast-ui/editor-plugin-code-syntax-highlight/dist/toastui-editor-plugin-code-syntax-highlight-all.js";
+
 import api from "../api";
 import * as constants from "../constants";
 import { Note, SearchResult } from "./classes";
@@ -35,6 +35,8 @@ export default {
       titleInput: null,
       initialContent: null,
       editMode: false,
+      viewerOptions: { plugins: [codeSyntaxHighlight] },
+      editorOptions: { plugins: [codeSyntaxHighlight] },
     };
   },
 
diff --git a/flatnotes/src/components/App.vue b/flatnotes/src/components/App.vue
index 67667a9..986eba9 100644
--- a/flatnotes/src/components/App.vue
+++ b/flatnotes/src/components/App.vue
@@ -136,10 +136,14 @@
       </form>
 
       <!-- Note -->
-      <div v-if="currentView == views.note && currentNote != null">
+      <div v-if="currentView == views.note && currentNote != null" class="mb-4">
         <!-- Viewer -->
         <div v-if="editMode == false">
-          <viewer :initialValue="currentNote.content" height="600px" />
+          <viewer
+            :initialValue="currentNote.content"
+            height="600px"
+            :options="viewerOptions"
+          />
         </div>
 
         <!-- Editor -->
@@ -147,10 +151,11 @@
           <input type="text" class="form-control" v-model="titleInput" />
           <editor
             :initialValue="initialContent"
-            initialEditType="wysiwyg"
+            initialEditType="markdown"
             previewStyle="tab"
             height="calc(100vh - 180px)"
             ref="toastUiEditor"
+            :options="editorOptions"
             @change="startDraftSaveTimeout"
           />
         </div>
diff --git a/flatnotes/src/index.js b/flatnotes/src/index.js
index 870be7f..0815f4d 100644
--- a/flatnotes/src/index.js
+++ b/flatnotes/src/index.js
@@ -1,8 +1,6 @@
 import App from "./components/App.vue";
 import Vue from "vue";
 import { BootstrapVue, IconsPlugin } from "bootstrap-vue";
-import "bootstrap/dist/css/bootstrap.css";
-import "bootstrap-vue/dist/bootstrap-vue.css";
 
 import "./main.scss"
 
diff --git a/flatnotes/src/main.scss b/flatnotes/src/main.scss
index 55a0ac5..6a2d78f 100644
--- a/flatnotes/src/main.scss
+++ b/flatnotes/src/main.scss
@@ -1,3 +1,12 @@
+@import "bootstrap/dist/css/bootstrap.css";
+@import "bootstrap-vue/dist/bootstrap-vue.css";
+
+@import "@toast-ui/editor/dist/toastui-editor.css";
+@import "@toast-ui/editor/dist/toastui-editor-viewer.css";
+
+@import 'prismjs/themes/prism.css';
+@import '@toast-ui/editor-plugin-code-syntax-highlight/dist/toastui-editor-plugin-code-syntax-highlight.css';
+
 .clickable-link {
   cursor: pointer;
   &:hover {
@@ -8,3 +17,10 @@
     color: inherit;
   }
 }
+
+.toastui-editor-contents {
+  h1,
+  h2 {
+    border-bottom: none;
+  }
+}
diff --git a/package-lock.json b/package-lock.json
index 7bcdb34..e5ceb8a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,6 +8,7 @@
       "version": "0.0.0",
       "license": "MIT",
       "devDependencies": {
+        "@toast-ui/editor-plugin-code-syntax-highlight": "^3.0.0",
         "@toast-ui/vue-editor": "^3.0.2",
         "@vue/component-compiler-utils": "^3.2.2",
         "axios": "^0.21.1",
@@ -1881,6 +1882,15 @@
         "prosemirror-view": "^1.18.7"
       }
     },
+    "node_modules/@toast-ui/editor-plugin-code-syntax-highlight": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/@toast-ui/editor-plugin-code-syntax-highlight/-/editor-plugin-code-syntax-highlight-3.0.0.tgz",
+      "integrity": "sha512-62XB3IcFgvRxVZzj2kTeQao0xACotv/mD6jScSDkWac2V0jkCsTh0kZRG4TSW5bGdKvx4xz3YjFm7gWgw1I/Aw==",
+      "dev": true,
+      "dependencies": {
+        "prismjs": "^1.23.0"
+      }
+    },
     "node_modules/@toast-ui/vue-editor": {
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/@toast-ui/vue-editor/-/vue-editor-3.0.2.tgz",
@@ -7341,6 +7351,15 @@
         "node": ">=4"
       }
     },
+    "node_modules/prismjs": {
+      "version": "1.27.0",
+      "resolved": "https://registry.npmjs.org/prismjs/-/prismjs-1.27.0.tgz",
+      "integrity": "sha512-t13BGPUlFDR7wRB5kQDG4jjl7XeuH6jbJGt11JHPL96qwsEHNX2+68tFXqc1/k+/jALsbSWJKUOT/hcYAZ5LkA==",
+      "dev": true,
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/process": {
       "version": "0.11.10",
       "resolved": "https://registry.npmjs.org/process/-/process-0.11.10.tgz",
@@ -10962,6 +10981,15 @@
         "prosemirror-view": "^1.18.7"
       }
     },
+    "@toast-ui/editor-plugin-code-syntax-highlight": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/@toast-ui/editor-plugin-code-syntax-highlight/-/editor-plugin-code-syntax-highlight-3.0.0.tgz",
+      "integrity": "sha512-62XB3IcFgvRxVZzj2kTeQao0xACotv/mD6jScSDkWac2V0jkCsTh0kZRG4TSW5bGdKvx4xz3YjFm7gWgw1I/Aw==",
+      "dev": true,
+      "requires": {
+        "prismjs": "^1.23.0"
+      }
+    },
     "@toast-ui/vue-editor": {
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/@toast-ui/vue-editor/-/vue-editor-3.0.2.tgz",
@@ -15395,6 +15423,12 @@
       "dev": true,
       "optional": true
     },
+    "prismjs": {
+      "version": "1.27.0",
+      "resolved": "https://registry.npmjs.org/prismjs/-/prismjs-1.27.0.tgz",
+      "integrity": "sha512-t13BGPUlFDR7wRB5kQDG4jjl7XeuH6jbJGt11JHPL96qwsEHNX2+68tFXqc1/k+/jALsbSWJKUOT/hcYAZ5LkA==",
+      "dev": true
+    },
     "process": {
       "version": "0.11.10",
       "resolved": "https://registry.npmjs.org/process/-/process-0.11.10.tgz",
diff --git a/package.json b/package.json
index 0099782..5727f89 100644
--- a/package.json
+++ b/package.json
@@ -11,6 +11,7 @@
   "author": "Adam Dullage",
   "license": "MIT",
   "devDependencies": {
+    "@toast-ui/editor-plugin-code-syntax-highlight": "^3.0.0",
     "@toast-ui/vue-editor": "^3.0.2",
     "@vue/component-compiler-utils": "^3.2.2",
     "axios": "^0.21.1",