Syntax Highlighter Plugin

diff --git a/flatnotes/src/components/App.js b/flatnotes/src/components/App.js
index 4fbc3827e8afc5bf27cf5c7134f08e6791b3939c..4d2f725c70186b46e037d0b99da84bf064c82917 100644 (file)
--- 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 67667a94b0150409d5103f196864ff0785715d53..986eba96a5a7f7a614b662d6fbb32587ef9d68af 100644 (file)
--- 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 870be7f06ef20146f85f7a848a1d0d89490e9e76..0815f4dd0ac286e08323f16392677f9ca0d70cbd 100644 (file)
--- 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 55a0ac5050093a03c18de9705c80a52175ce5a5f..6a2d78f3c9b603a2a6c3b6e73ff3464499f6fc27 100644 (file)
--- 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 7bcdb3478c6d639b683a8ded78c7a3009f07ba54..e5ceb8ac74840b81737b767d275d6d3658224294 100644 (file)
--- 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 0099782f1739eb4e789fbb536fdf1c01b58f11d5..5727f89f04bdfcd996f6d3fc54f07ff6b495b314 100644 (file)
--- 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",