From 613478654646ff1d736afe3c30d98eba26ca6a77 Mon Sep 17 00:00:00 2001 From: Peter Stuifzand Date: Wed, 10 Jun 2020 00:07:17 +0200 Subject: [PATCH] Highlight code --- editor/package-lock.json | 46 +++++++++++++++++++++++++++++++ editor/package.json | 1 + editor/src/index.js | 5 ++++ editor/src/styles.scss | 58 +++++++++++++--------------------------- 4 files changed, 71 insertions(+), 39 deletions(-) diff --git a/editor/package-lock.json b/editor/package-lock.json index e053d7f..f0e4e51 100644 --- a/editor/package-lock.json +++ b/editor/package-lock.json @@ -1153,6 +1153,17 @@ "del": "^4.1.1" } }, + "clipboard": { + "version": "2.0.6", + "resolved": "https://registry.npmjs.org/clipboard/-/clipboard-2.0.6.tgz", + "integrity": "sha512-g5zbiixBRk/wyKakSwCKd7vQXDjFnAMGHoEyBogG/bw9kTD9GvdAvaoRR1ALcEzt3pVKxZR0pViekPMIS0QyGg==", + "optional": true, + "requires": { + "good-listener": "^1.2.2", + "select": "^1.1.2", + "tiny-emitter": "^2.0.0" + } + }, "cliui": { "version": "5.0.0", "resolved": "https://registry.npmjs.org/cliui/-/cliui-5.0.0.tgz", @@ -1637,6 +1648,12 @@ "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz", "integrity": "sha1-3zrhmayt+31ECqrgsp4icrJOxhk=" }, + "delegate": { + "version": "3.2.0", + "resolved": "https://registry.npmjs.org/delegate/-/delegate-3.2.0.tgz", + "integrity": "sha512-IofjkYBZaZivn0V8nnsMJGBr4jVLxHDheKSW88PyxS5QC4Vo9ZbZVvhzlSxY87fVq3STR6r+4cGepyHkcWOQSw==", + "optional": true + }, "delegates": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/delegates/-/delegates-1.0.0.tgz", @@ -3346,6 +3363,15 @@ "minimatch": "~3.0.2" } }, + "good-listener": { + "version": "1.2.2", + "resolved": "https://registry.npmjs.org/good-listener/-/good-listener-1.2.2.tgz", + "integrity": "sha1-1TswzfkxPf+33JoNR3CWqm0UXFA=", + "optional": true, + "requires": { + "delegate": "^3.1.2" + } + }, "graceful-fs": { "version": "4.2.2", "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.2.tgz", @@ -6115,6 +6141,14 @@ "utila": "~0.4" } }, + "prismjs": { + "version": "1.20.0", + "resolved": "https://registry.npmjs.org/prismjs/-/prismjs-1.20.0.tgz", + "integrity": "sha512-AEDjSrVNkynnw6A+B1DsFkd6AVdTnp+/WoUixFRULlCLZVRZlVQMVWio/16jv7G1FscUxQxOQhWwApgbnxr6kQ==", + "requires": { + "clipboard": "^2.0.0" + } + }, "process": { "version": "0.11.10", "resolved": "https://registry.npmjs.org/process/-/process-0.11.10.tgz", @@ -6779,6 +6813,12 @@ } } }, + "select": { + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/select/-/select-1.1.2.tgz", + "integrity": "sha1-DnNQrN7ICxEIUoeG7B1EGNEbOW0=", + "optional": true + }, "select-hose": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/select-hose/-/select-hose-2.0.0.tgz", @@ -7814,6 +7854,12 @@ "setimmediate": "^1.0.4" } }, + "tiny-emitter": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/tiny-emitter/-/tiny-emitter-2.1.0.tgz", + "integrity": "sha512-NB6Dk1A9xgQPMoGqC5CVXn123gWyte215ONT5Pp5a0yt4nlEoO1ZWeCwpncaekPHXO60i47ihFnZPiRPjRMq4Q==", + "optional": true + }, "to-arraybuffer": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/to-arraybuffer/-/to-arraybuffer-1.0.1.tgz", diff --git a/editor/package.json b/editor/package.json index c021d39..ec92a50 100644 --- a/editor/package.json +++ b/editor/package.json @@ -24,6 +24,7 @@ "moment": "^2.26.0", "mustache": "^4.0.1", "node-sass": "^4.14.1", + "prismjs": "^1.20.0", "sass-loader": "^7.3.1", "style-loader": "^1.0.0", "wiki-list-editor": "^0.7.3" diff --git a/editor/src/index.js b/editor/src/index.js index 2690c21..6969533 100644 --- a/editor/src/index.js +++ b/editor/src/index.js @@ -12,6 +12,9 @@ import Mustache from 'mustache'; import 'jquery-contextmenu'; import getCaretCoordinates from './caret-position' import moment from 'moment' +import PrismJS from 'prismjs' +import 'prismjs/components/prism-php' +import 'prismjs/components/prism-markup-templating' import './styles.scss'; import '../node_modules/jquery-contextmenu/dist/jquery.contextMenu.css'; @@ -183,6 +186,7 @@ if (holder) { class: 'wiki-link' } })).use(MarkdownItMark) + const options = { transform(text, callback) { let converted = (text.startsWith("```", 0)) ? MD.render(text) : MD.renderInline(text) @@ -334,6 +338,7 @@ if (holder) { editor.on('stop-editing', function (input) { $('#link-complete').off() + PrismJS.highlightAll() }) }) $.contextMenu({ diff --git a/editor/src/styles.scss b/editor/src/styles.scss index 98eb996..886d9d4 100644 --- a/editor/src/styles.scss +++ b/editor/src/styles.scss @@ -1,4 +1,22 @@ -@import "~bulma"; +@charset "utf-8"; +//@import "~bulma"; +/*! bulma.io v0.7.5 | MIT License | github.com/jgthms/bulma */ +@import "~bulma/sass/utilities/_all"; +@import "~bulma/sass/base/_all"; +@import "~bulma/sass/elements/box.sass"; +@import "~bulma/sass/elements/button.sass"; +@import "~bulma/sass/elements/container.sass"; +@import "~bulma/sass/elements/content.sass"; +@import "~bulma/sass/elements/icon.sass"; +@import "~bulma/sass/elements/image.sass"; +@import "~bulma/sass/elements/notification.sass"; +@import "~bulma/sass/elements/progress.sass"; +@import "~bulma/sass/elements/table.sass"; +@import "~bulma/sass/elements/tag.sass"; +@import "~bulma/sass/elements/title.sass"; +@import "~bulma/sass/components/_all"; +@import "~bulma/sass/grid/_all"; +@import "~bulma/sass/layout/_all"; html { font-family: 'Inter', sans-serif; @@ -120,41 +138,3 @@ textarea { min-height: 19px; word-break: break-word; } - -.codex-editor .icon { - align-items: initial; - display: initial; - justify-content: initial; - height: initial; - width: initial; -} - -.codex-editor h1.ce-header { - @extend .title; - @extend .title.is-1; -} - -.codex-editor h2.ce-header { - @extend .title; - @extend .is-2; -} - -.codex-editor h3.ce-header { - @extend .title; - @extend .is-3; -} - -.codex-editor h4.ce-header { - @extend .title; - @extend .is-4; -} - -.codex-editor h5.ce-header { - @extend .title; - @extend .is-5; -} - -.codex-editor h6.ce-header { - @extend .title; - @extend .is-6; -}