diff --git a/packages/org.standardnotes.advanced-markdown-editor/package.json b/packages/org.standardnotes.advanced-markdown-editor/package.json index b4387137..b456d0b6 100644 --- a/packages/org.standardnotes.advanced-markdown-editor/package.json +++ b/packages/org.standardnotes.advanced-markdown-editor/package.json @@ -36,11 +36,11 @@ "copy-webpack-plugin": "*", "css-loader": "^5.2.0", "dompurify": "^2.2.9", - "easymde": "2.16.1", + "easymde": "2.18.0", "eslint": "*", "file-loader": "^6.2.0", "font-awesome": "^4.7.0", - "highlightjs": "^9.16.2", + "highlight.js": "^11.10.0", "html-webpack-plugin": "^5.3.1", "marked": "^2.0.7", "mini-css-extract-plugin": "^1.4.0", diff --git a/packages/org.standardnotes.advanced-markdown-editor/src/main.js b/packages/org.standardnotes.advanced-markdown-editor/src/main.js index fd5d525e..16fde0f3 100644 --- a/packages/org.standardnotes.advanced-markdown-editor/src/main.js +++ b/packages/org.standardnotes.advanced-markdown-editor/src/main.js @@ -78,6 +78,7 @@ document.addEventListener('DOMContentLoaded', function () { if (note.content.text !== lastValue) { ignoreTextChange = true window.easymde.value(note.content.text) + toggleHighlightByLength(note.content.text) ignoreTextChange = false } @@ -113,10 +114,9 @@ document.addEventListener('DOMContentLoaded', function () { shortcuts: { toggleSideBySide: 'Cmd-Alt-P', }, - // Syntax highlighting is disabled until we figure out performance issue: https://github.com/sn-extensions/advanced-markdown-editor/pull/20#issuecomment-513811633 - // renderingConfig: { - // codeSyntaxHighlighting: true - // }, + renderingConfig: { + codeSyntaxHighlighting: true, + }, toolbar: [ { className: 'fa fa-eye', @@ -193,6 +193,7 @@ document.addEventListener('DOMContentLoaded', function () { componentRelay.saveItemWithPresave(note, () => { lastValue = window.easymde.value() + toggleHighlightByLength(lastValue) let html = window.easymde.options.previewRender(window.easymde.value()) let strippedHtml = truncateString(strip(html)) @@ -368,4 +369,9 @@ document.addEventListener('DOMContentLoaded', function () { const environment = componentRelay.environment ?? 'web' return environment === 'mobile' ? 'textarea' : 'contenteditable' } + + function toggleHighlightByLength(text) { + const maxHighlightLength = 5000 + window.easymde.options.renderingConfig.codeSyntaxHighlighting = (window.easymde && text.length < maxHighlightLength) + } }) diff --git a/packages/org.standardnotes.advanced-markdown-editor/src/main.scss b/packages/org.standardnotes.advanced-markdown-editor/src/main.scss index ed4a7c58..1c1dcdb4 100644 --- a/packages/org.standardnotes.advanced-markdown-editor/src/main.scss +++ b/packages/org.standardnotes.advanced-markdown-editor/src/main.scss @@ -261,17 +261,23 @@ body, html { color: var(--sn-stylekit-neutral-color); } -.hljs-keyword, -.hljs-selector-tag, -.hljs-subst { - font-weight: bold; -} - -.hljs-attribute { +.hljs-title, +.hljs-section, +.hljs-selector-id +.hljs-template-tag, +.hljs-template-variable, +.hljs-number, +.hljs-built_in, +.hljs-builtin-name { color: var(--sn-stylekit-warning-color); } -.hljs-number, +.hljs-meta, +.hljs-keyword, +.hljs-selector-tag, +.hljs-subst, +.hljs-attr, +.hljs-attribute, .hljs-literal { color: var(--sn-stylekit-info-color); } @@ -282,12 +288,6 @@ body, html { color: var(--sn-stylekit-success-color); } -.hljs-title, -.hljs-section, -.hljs-selector-id { - font-weight: bold; -} - .hljs-subst { font-weight: normal; } @@ -313,15 +313,6 @@ body, html { color: var(--sn-stylekit-info-color); } -.hljs-built_in, -.hljs-builtin-name { - text-decoration: underline; -} - -.hljs-meta { - font-weight: bold; -} - .hljs-deletion { color: var(--sn-stylekit-danger-color); }