From b45b8b9c0decd872ed9f3efcc4bccf71566d5ec8 Mon Sep 17 00:00:00 2001 From: David Mehren Date: Sun, 6 Jun 2021 19:08:06 +0200 Subject: [PATCH 1/5] Lazy-load mermaid This commit moves the import of mermaid into a `require.ensure` block, that is only executed when a mermaid diagram is actually present in a note. Webpack automatically splits the library into a separate chunk and loads that on demand. To ensure that mermaid code-blocks are not treated as normal code-blocks while the chunk is loading, a corresponding check is added to `finishView`. Signed-off-by: David Mehren --- public/js/extra.js | 43 ++++++++++++++++++++++--------------------- 1 file changed, 22 insertions(+), 21 deletions(-) diff --git a/public/js/extra.js b/public/js/extra.js index 00c3f7bd3..b258c49f5 100644 --- a/public/js/extra.js +++ b/public/js/extra.js @@ -17,7 +17,6 @@ import markdownitContainer from 'markdown-it-container' /* Defined regex markdown it plugins */ import Plugin from 'markdown-it-regexp' -import mermaid from 'mermaid' import handlebars from 'handlebars' import 'gist-embed' import abcjs from 'abcjs' @@ -253,8 +252,6 @@ function replaceExtraTags (html) { return html } -mermaid.startOnLoad = false - // dynamic event or object binding here export function finishView (view) { // todo list @@ -388,25 +385,26 @@ export function finishView (view) { // mermaid const mermaids = view.find('div.mermaid.raw').removeClass('raw') mermaids.each((key, value) => { - let $value - try { - $value = $(value) - const $ele = $(value).closest('pre') - - mermaid.mermaidAPI.parse($value.text()) - $ele.addClass('mermaid') - $ele.text($value.text()) - mermaid.init(undefined, $ele) - } catch (err) { - let errormessage = err - if (err.str) { - errormessage = err.str + const $value = $(value) + const $ele = $(value).closest('pre') + require.ensure([], function (require) { + try { + const mermaid = require('mermaid') + mermaid.startOnLoad = false + mermaid.mermaidAPI.parse($value.text()) + $ele.addClass('mermaid') + $ele.text($value.text()) + mermaid.init(undefined, $ele) + } catch (err) { + let errormessage = err + if (err.str) { + errormessage = err.str + } + $value.unwrap() + $value.parent().append(`
${escapeHTML(errormessage)}
`) + console.warn(errormessage) } - - $value.unwrap() - $value.parent().append(`
${escapeHTML(errormessage)}
`) - console.warn(errormessage) - } + }) }) // abc.js const abcs = view.find('div.abc.raw').removeClass('raw') @@ -499,6 +497,9 @@ export function finishView (view) { const langDiv = $(value) if (langDiv.length > 0) { const reallang = langDiv[0].className.replace(/hljs|wrap/g, '').trim() + if (reallang === 'mermaid') { + return + } const codeDiv = langDiv.find('.code') let code = '' if (codeDiv.length > 0) code = codeDiv.html() From 938afbddc33c538300a68ee74cbbe8c6db6f858b Mon Sep 17 00:00:00 2001 From: David Mehren Date: Sun, 6 Jun 2021 20:27:50 +0200 Subject: [PATCH 2/5] Replace handlebars with string.replace The html.hbs template does not contain any logic, so we can replace the lib with good old string.replace calls. This significantly reduces the bundle size, as we don't have to ship a full template engine to the client. Signed-off-by: David Mehren --- package.json | 1 - public/js/extra.js | 23 +++++++---------- public/views/hedgedoc/footer.ejs | 1 - public/views/pretty.ejs | 1 - public/views/slide.ejs | 1 - yarn.lock | 42 +++++++------------------------- 6 files changed, 18 insertions(+), 51 deletions(-) diff --git a/package.json b/package.json index 517ace947..eb30d9b64 100644 --- a/package.json +++ b/package.json @@ -40,7 +40,6 @@ "file-type": "^16.1.0", "formidable": "^1.0.17", "graceful-fs": "^4.1.11", - "handlebars": "^4.5.2", "helmet": "^4.5.0", "i18n": "^0.13.0", "is-svg": "^4.3.1", diff --git a/public/js/extra.js b/public/js/extra.js index b258c49f5..fbb5de43e 100644 --- a/public/js/extra.js +++ b/public/js/extra.js @@ -17,7 +17,6 @@ import markdownitContainer from 'markdown-it-container' /* Defined regex markdown it plugins */ import Plugin from 'markdown-it-regexp' -import handlebars from 'handlebars' import 'gist-embed' import abcjs from 'abcjs' @@ -669,19 +668,15 @@ export function exportToHTML (view) { tocAffix.find('*').removeClass('active').find("a[href^='#'][smoothhashscroll]").removeAttr('smoothhashscroll') // generate html via template $.get(`${serverurl}/build/html.min.css`, css => { - $.get(`${serverurl}/views/html.hbs`, data => { - const template = handlebars.compile(data) - const context = { - url: serverurl, - title, - css, - html: src[0].outerHTML, - 'ui-toc': toc.html(), - 'ui-toc-affix': tocAffix.html(), - lang: (md && md.meta && md.meta.lang) ? `lang="${md.meta.lang}"` : null, - dir: (md && md.meta && md.meta.dir) ? `dir="${md.meta.dir}"` : null - } - const html = template(context) + $.get(`${serverurl}/views/html.hbs`, template => { + let html = template.replace('{{{url}}}', serverurl) + html = html.replace('{{title}}', title) + html = html.replace('{{{css}}}', css) + html = html.replace('{{{html}}}', src[0].outerHTML) + html = html.replace('{{{ui-toc}}}', toc.html()) + html = html.replace('{{{ui-toc-affix}}}', tocAffix.html()) + html = html.replace('{{{lang}}}', (md && md.meta && md.meta.lang) ? `lang="${md.meta.lang}"` : '') + html = html.replace('{{{dir}}}', (md && md.meta && md.meta.dir) ? `dir="${md.meta.dir}"` : '') const blob = new Blob([html], { type: 'text/html;charset=utf-8' }) diff --git a/public/views/hedgedoc/footer.ejs b/public/views/hedgedoc/footer.ejs index 51d472219..86572091e 100644 --- a/public/views/hedgedoc/footer.ejs +++ b/public/views/hedgedoc/footer.ejs @@ -14,7 +14,6 @@ - diff --git a/public/views/pretty.ejs b/public/views/pretty.ejs index 8dc8db1a1..fc222cb8c 100644 --- a/public/views/pretty.ejs +++ b/public/views/pretty.ejs @@ -92,7 +92,6 @@ - diff --git a/public/views/slide.ejs b/public/views/slide.ejs index 44ed8c709..e08ca0579 100644 --- a/public/views/slide.ejs +++ b/public/views/slide.ejs @@ -99,7 +99,6 @@ - diff --git a/yarn.lock b/yarn.lock index c71601583..d0d6dcaca 100644 --- a/yarn.lock +++ b/yarn.lock @@ -568,7 +568,6 @@ "Idle.Js@git+https://github.com/shawnmclean/Idle.js": version "0.0.1" - uid db9beb3483a460ad638ec947867720f0ed066a62 resolved "git+https://github.com/shawnmclean/Idle.js#db9beb3483a460ad638ec947867720f0ed066a62" JSV@^4.0.x: @@ -586,7 +585,7 @@ abcjs@5.10.3: resolved "https://registry.yarnpkg.com/abcjs/-/abcjs-5.10.3.tgz#294702140ec1caa292859ba9d2af0452f7e9e046" integrity sha512-YGmW4CUWd7T2/HqZa/SQOTE+lXg7Z68HwwpJhHJBvdHqLi1uLCiYva1ZRGhB/MPyl1QKqJMfF+LQ1jGAEK69XQ== dependencies: - midi "git+https://github.com/paulrosen/MIDI.js.git#abcjs" + midi "https://github.com/paulrosen/MIDI.js.git#abcjs" abcjs@5.11.0: version "5.11.0" @@ -594,7 +593,7 @@ abcjs@5.11.0: integrity sha512-kLehHwwttcTCVhKQaDkmqYbWBLAWmfyzYSbUQoEDAOTOX5RzDGakX8tXpzlsNHw6Lh8W8odZw44e0siwbG4TKA== dependencies: abcjs "5.10.3" - midi "git+https://github.com/paulrosen/MIDI.js.git#abcjs" + midi "https://github.com/paulrosen/MIDI.js.git#abcjs" abcjs@5.12.0: version "5.12.0" @@ -602,7 +601,7 @@ abcjs@5.12.0: integrity sha512-pvi7SjOAKT7cRyRtywUSwYB0SNtRHKLxZUZ9Oc4E+nvpBHr8Z2/M9Pfyv3oIaiEpxlWTFK+B/H5t/DckiNFgpg== dependencies: abcjs "5.11.0" - midi "git+https://github.com/paulrosen/MIDI.js.git#abcjs" + midi "https://github.com/paulrosen/MIDI.js.git#abcjs" abstract-logging@^2.0.0: version "2.0.1" @@ -2299,7 +2298,6 @@ code-point-at@^1.0.0: "codemirror@git+https://github.com/hedgedoc/CodeMirror.git": version "5.58.2" - uid f780b569b3717cdff4c8507538cc63101bfa02e1 resolved "git+https://github.com/hedgedoc/CodeMirror.git#f780b569b3717cdff4c8507538cc63101bfa02e1" collection-visit@^1.0.0: @@ -3311,7 +3309,6 @@ detect-libc@^1.0.2: "diff-match-patch@git+https://github.com/hackmdio/diff-match-patch.git": version "1.1.1" - uid c2f8fb9d69aa9490b764850aa86ba442c93ccf78 resolved "git+https://github.com/hackmdio/diff-match-patch.git#c2f8fb9d69aa9490b764850aa86ba442c93ccf78" diff@5.0.0: @@ -4698,18 +4695,6 @@ growl@1.10.5: resolved "https://registry.yarnpkg.com/growl/-/growl-1.10.5.tgz#f2735dc2283674fa67478b10181059355c369e5e" integrity sha512-qBr4OuELkhPenW6goKVXiv47US3clb3/IbuWF9KNKEijAy9oeHxU9IgzjvJhHkUzhaj7rOUD7+YGWqUjLp5oSA== -handlebars@^4.5.2: - version "4.7.7" - resolved "https://registry.yarnpkg.com/handlebars/-/handlebars-4.7.7.tgz#9ce33416aad02dbd6c8fafa8240d5d98004945a1" - integrity sha512-aAcXm5OAfE/8IXkcZvCepKU3VzW1/39Fb5ZuqMtgI/hT8X2YgoMvBY5dLhq/cpOvw7Lk1nK/UF71aLG/ZnVYRA== - dependencies: - minimist "^1.2.5" - neo-async "^2.6.0" - source-map "^0.6.1" - wordwrap "^1.0.0" - optionalDependencies: - uglify-js "^3.1.4" - har-schema@^2.0.0: version "2.0.0" resolved "https://registry.yarnpkg.com/har-schema/-/har-schema-2.0.0.tgz#a94c2224ebcac04782a0d9035521f24735b7ec92" @@ -5640,7 +5625,6 @@ js-cookie@2.2.1: "js-sequence-diagrams@git+https://github.com/hedgedoc/js-sequence-diagrams.git": version "2.0.1" - uid bda0e49b6c2754f3c7158b1dfb9ccf26efc24b39 resolved "git+https://github.com/hedgedoc/js-sequence-diagrams.git#bda0e49b6c2754f3c7158b1dfb9ccf26efc24b39" dependencies: lodash "4.17.x" @@ -6220,7 +6204,6 @@ lutim@^1.0.2: "lz-string@git+https://github.com/hackmdio/lz-string.git": version "1.4.4" - uid efd1f64676264d6d8871b01f4f375fc6ef4f9022 resolved "git+https://github.com/hackmdio/lz-string.git#efd1f64676264d6d8871b01f4f375fc6ef4f9022" make-dir@^1.0.0: @@ -6529,8 +6512,7 @@ messageformat@^2.3.0: "meta-marked@git+https://github.com/hedgedoc/meta-marked": version "0.4.5" - uid "3002adae670a6de0a845f3da7a7223d458c20d76" - resolved "git+https://github.com/hedgedoc/meta-marked#3002adae670a6de0a845f3da7a7223d458c20d76" + resolved "git+https://github.com/hedgedoc/meta-marked#81d9036da9f4c3307b1787d20e89e996f4466d8c" dependencies: js-yaml "~4.1.0" marked "~2.0.0" @@ -6606,7 +6588,6 @@ micromatch@^4.0.2: "midi@git+https://github.com/paulrosen/MIDI.js.git#abcjs": version "0.4.2" - uid e593ffef81a0350f99448e3ab8111957145ff6b2 resolved "git+https://github.com/paulrosen/MIDI.js.git#e593ffef81a0350f99448e3ab8111957145ff6b2" miller-rabin@^4.0.0: @@ -6974,7 +6955,7 @@ negotiator@0.6.2: resolved "https://registry.yarnpkg.com/negotiator/-/negotiator-0.6.2.tgz#feacf7ccf525a77ae9634436a64883ffeca346fb" integrity sha512-hZXc7K2e+PgeI1eDBe/10Ard4ekbfrrqG8Ep+8Jmf4JID2bNg7NvCPOZN+kfF574pFQI7mum2AUqDidoKqcTOw== -neo-async@^2.5.0, neo-async@^2.6.0, neo-async@^2.6.1: +neo-async@^2.5.0, neo-async@^2.6.1: version "2.6.2" resolved "https://registry.yarnpkg.com/neo-async/-/neo-async-2.6.2.tgz#b4aafb93e3aeb2d8174ca53cf163ab7d7308305f" integrity sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw== @@ -8151,9 +8132,9 @@ postcss-value-parser@^4.0.2, postcss-value-parser@^4.1.0: integrity sha512-97DXOFbQJhk71ne5/Mt6cOu6yxsSfM0QGQyl0L25Gca4yGWEGJaig7l7gbCX623VqTBNGLRLaVUCnNkcedlRSQ== postcss@^8.2.1, postcss@^8.2.15: - version "8.3.1" - resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.3.1.tgz#71f380151c227f83b898294a46481f689f86b70a" - integrity sha512-9qH0MGjsSm+fjxOi3GnwViL1otfi7qkj+l/WX5gcRGmZNGsIcqc+A5fBkE6PUobEQK4APqYVaES+B3Uti98TCw== + version "8.3.2" + resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.3.2.tgz#ed3ec489f5428af5740cd6effcc216b4d455ee64" + integrity sha512-y1FK/AWdZlBF5lusS5j5l4/vF67+vQZt1SXPVJ32y1kRGDQyrs1zk32hG1cInRTu14P0V+orPz+ifwW/7rR4bg== dependencies: colorette "^1.2.2" nanoid "^3.1.23" @@ -10471,7 +10452,7 @@ uc.micro@^1.0.1, uc.micro@^1.0.5: resolved "https://registry.yarnpkg.com/uc.micro/-/uc.micro-1.0.6.tgz#9c411a802a409a91fc6cf74081baba34b24499ac" integrity sha512-8Y75pvTYkLJW2hWQHXxoqRgV7qb9B+9vFEtidML+7koHUFapnVJAZ6cKs+Qjz5Aw3aZWHMC6u0wJE3At+nSGwA== -uglify-js@^3.1.4, uglify-js@^3.5.1: +uglify-js@^3.5.1: version "3.13.9" resolved "https://registry.yarnpkg.com/uglify-js/-/uglify-js-3.13.9.tgz#4d8d21dcd497f29cfd8e9378b9df123ad025999b" integrity sha512-wZbyTQ1w6Y7fHdt8sJnHfSIuWeDgk6B5rCb4E/AM6QNNPbOMIZph21PW5dRB3h7Df0GszN+t7RuUH6sWK5bF0g== @@ -11104,11 +11085,6 @@ word-wrap@^1.2.3: resolved "https://registry.yarnpkg.com/word-wrap/-/word-wrap-1.2.3.tgz#610636f6b1f703891bd34771ccb17fb93b47079c" integrity sha512-Hz/mrNwitNRh/HUAtM/VT/5VH+ygD6DV7mYKZAtHOrbs8U7lvPS6xf7EJKMF0uW1KJCl0H701g3ZGus+muE5vQ== -wordwrap@^1.0.0: - version "1.0.0" - resolved "https://registry.yarnpkg.com/wordwrap/-/wordwrap-1.0.0.tgz#27584810891456a4171c8d0226441ade90cbcaeb" - integrity sha1-J1hIEIkUVqQXHI0CJkQa3pDLyus= - worker-farm@^1.7.0: version "1.7.0" resolved "https://registry.yarnpkg.com/worker-farm/-/worker-farm-1.7.0.tgz#26a94c5391bbca926152002f69b84a4bf772e5a8" From 1c023e7881a53f159380902fcecaf2c9d1b3471e Mon Sep 17 00:00:00 2001 From: David Mehren Date: Sun, 6 Jun 2021 20:57:05 +0200 Subject: [PATCH 3/5] Lazy-load abcjs This commit moves the import of abcjs into a `require.ensure` block, that is only executed when a abc diagram is actually present in a note. Webpack automatically splits the library into a separate chunk and loads that on demand. To ensure that abc code-blocks are not treated as normal code-blocks while the chunk is loading, a corresponding check is added to `finishView`. Signed-off-by: David Mehren --- public/js/extra.js | 20 ++++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/public/js/extra.js b/public/js/extra.js index fbb5de43e..ba6ab12a6 100644 --- a/public/js/extra.js +++ b/public/js/extra.js @@ -18,7 +18,6 @@ import markdownitContainer from 'markdown-it-container' import Plugin from 'markdown-it-regexp' import 'gist-embed' -import abcjs from 'abcjs' require('prismjs/themes/prism.css') require('prismjs/components/prism-wiki') @@ -412,14 +411,15 @@ export function finishView (view) { try { $value = $(value) const $ele = $(value).parent().parent() - - abcjs.renderAbc(value, $value.text()) - - $ele.addClass('abc') - $value.children().unwrap().unwrap() - const svg = $ele.find('> svg') - svg[0].setAttribute('viewBox', `0 0 ${svg.attr('width')} ${svg.attr('height')}`) - svg[0].setAttribute('preserveAspectRatio', 'xMidYMid meet') + require.ensure([], function (require) { + const abcjs = require('abcjs') + abcjs.renderAbc(value, $value.text()) + $ele.addClass('abc') + $value.children().unwrap().unwrap() + const svg = $ele.find('> svg') + svg[0].setAttribute('viewBox', `0 0 ${svg.attr('width')} ${svg.attr('height')}`) + svg[0].setAttribute('preserveAspectRatio', 'xMidYMid meet') + }) } catch (err) { $value.unwrap() $value.parent().append(`
${escapeHTML(err)}
`) @@ -496,7 +496,7 @@ export function finishView (view) { const langDiv = $(value) if (langDiv.length > 0) { const reallang = langDiv[0].className.replace(/hljs|wrap/g, '').trim() - if (reallang === 'mermaid') { + if (reallang === 'mermaid' || reallang === 'abc') { return } const codeDiv = langDiv.find('.code') From 5b8b76135bf660ba8b75dc223ae22cc81c3f4ebe Mon Sep 17 00:00:00 2001 From: David Mehren Date: Sun, 6 Jun 2021 22:08:27 +0200 Subject: [PATCH 4/5] Lazy-load viz.js This commit moves the import of viz.js into a `require.ensure` block, that is only executed when a graphviz diagram is actually present in a note. Webpack automatically splits the library into a separate chunk and loads that on demand. To ensure that graphviz code-blocks are not treated as normal code-blocks while the chunk is loading, a corresponding check is added to `finishView`. The library is also removed from the Webpack config file, as it only is used at one place in extra.js, which is handled by Webpack without any extra config. Signed-off-by: David Mehren --- public/js/extra.js | 17 +++++++++-------- webpack.common.js | 4 ---- 2 files changed, 9 insertions(+), 12 deletions(-) diff --git a/public/js/extra.js b/public/js/extra.js index ba6ab12a6..d247df018 100644 --- a/public/js/extra.js +++ b/public/js/extra.js @@ -31,7 +31,6 @@ require('prismjs/components/prism-gherkin') require('./lib/common/login') require('./locale') require('../vendor/md-toc') -const Viz = require('viz.js') const ui = getUIElements() // auto update last change @@ -367,13 +366,15 @@ export function finishView (view) { try { $value = $(value) const $ele = $(value).parent().parent() + require.ensure([], function (require) { + const Viz = require('viz.js') + const graphviz = Viz($value.text()) + if (!graphviz) throw Error('viz.js output empty graph') + $value.html(graphviz) - const graphviz = Viz($value.text()) - if (!graphviz) throw Error('viz.js output empty graph') - $value.html(graphviz) - - $ele.addClass('graphviz') - $value.children().unwrap().unwrap() + $ele.addClass('graphviz') + $value.children().unwrap().unwrap() + }) } catch (err) { $value.unwrap() $value.parent().append(`
${escapeHTML(err)}
`) @@ -496,7 +497,7 @@ export function finishView (view) { const langDiv = $(value) if (langDiv.length > 0) { const reallang = langDiv[0].className.replace(/hljs|wrap/g, '').trim() - if (reallang === 'mermaid' || reallang === 'abc') { + if (reallang === 'mermaid' || reallang === 'abc' || reallang === 'graphviz') { return } const codeDiv = langDiv.find('.code') diff --git a/webpack.common.js b/webpack.common.js index 4a10ef9c9..199e209d4 100644 --- a/webpack.common.js +++ b/webpack.common.js @@ -253,7 +253,6 @@ module.exports = { 'expose-loader?exposes=LZString!lz-string', 'flowchart.js', 'js-sequence-diagrams', - 'expose-loader?exposes=Viz!viz.js', 'expose-loader?exposes=io!socket.io-client', 'expose-loader?exposes=RevealMarkdown!reveal-markdown', path.join(__dirname, 'public/js/index.js') @@ -284,7 +283,6 @@ module.exports = { 'expose-loader?exposes=emojify!emojify.js', 'flowchart.js', 'js-sequence-diagrams', - 'expose-loader?exposes=Viz!viz.js', 'expose-loader?exposes=RevealMarkdown!reveal-markdown', path.join(__dirname, 'public/js/pretty.js') ], @@ -318,7 +316,6 @@ module.exports = { 'expose-loader?exposes=emojify!emojify.js', 'flowchart.js', 'js-sequence-diagrams', - 'expose-loader?exposes=Viz!viz.js', 'expose-loader?exposes=Reveal!reveal.js', 'expose-loader?exposes=RevealMarkdown!reveal-markdown', path.join(__dirname, 'public/js/slide.js') @@ -342,7 +339,6 @@ module.exports = { }, externals: { - 'viz.js': 'Viz', 'socket.io-client': 'io', 'jquery': '$', 'moment': 'moment', From 7ff685933e8c188628b1a6d83ff915ea04ef7d20 Mon Sep 17 00:00:00 2001 From: David Mehren Date: Sun, 6 Jun 2021 22:20:29 +0200 Subject: [PATCH 5/5] Lazy-load highlight.js This commit moves the import of highlight.js into a `require.ensure` block, that is only executed when a code-block is actually present in a note. Webpack automatically splits the library into a separate chunk and loads that on demand. The call to `hljs.listLanguages()` in `index.js` is also replaced by a static list. This is important, as `index.js` would otherwise need to import highlight.js, which would cause the quite big library to be included into nearly every entrypoint, needlessly increasing the transferred code size. Signed-off-by: David Mehren --- public/js/extra.js | 21 +++-- public/js/index.js | 215 +++++++++++++++++++++++++++++++++++++++------ webpack.common.js | 4 - 3 files changed, 201 insertions(+), 39 deletions(-) diff --git a/public/js/extra.js b/public/js/extra.js index d247df018..e15b255a5 100644 --- a/public/js/extra.js +++ b/public/js/extra.js @@ -3,7 +3,6 @@ /* global moment, serverurl */ import Prism from 'prismjs' -import hljs from 'highlight.js' import PDFObject from 'pdfobject' import S from 'string' import { saveAs } from 'file-saver' @@ -525,13 +524,19 @@ export function finishView (view) { value: Prism.highlight(code, Prism.languages.makefile) } } else { - code = S(code).unescapeHTML().s - const languages = hljs.listLanguages() - if (!languages.includes(reallang)) { - result = hljs.highlightAuto(code) - } else { - result = hljs.highlight(reallang, code) - } + require.ensure([], function (require) { + const hljs = require('highlight.js') + code = S(code).unescapeHTML().s + const languages = hljs.listLanguages() + if (!languages.includes(reallang)) { + result = hljs.highlightAuto(code) + } else { + result = hljs.highlight(reallang, code) + } + if (codeDiv.length > 0) codeDiv.html(result.value) + else langDiv.html(result.value) + }) + return } if (codeDiv.length > 0) codeDiv.html(result.value) else langDiv.html(result.value) diff --git a/public/js/index.js b/public/js/index.js index 84e2d34c3..c8cb48f1f 100644 --- a/public/js/index.js +++ b/public/js/index.js @@ -18,7 +18,6 @@ import { ot } from '../vendor/ot/ot.min.js' import { saveAs } from 'file-saver' import randomColor from 'randomcolor' import store from 'store' -import hljs from 'highlight.js' import url from 'wurl' import { Spinner } from 'spin.js' @@ -106,36 +105,198 @@ const cursorActivityDebounce = 50 const cursorAnimatePeriod = 100 const supportContainers = ['success', 'info', 'warning', 'danger'] const supportCodeModes = [ - 'javascript', - 'typescript', - 'jsx', - 'htmlmixed', - 'htmlembedded', - 'css', - 'xml', - 'clike', + '1c', + 'abnf', + 'accesslog', + 'actionscript', + 'ada', + 'angelscript', + 'apache', + 'applescript', + 'arcade', + 'arduino', + 'armasm', + 'asciidoc', + 'aspectj', + 'autohotkey', + 'autoit', + 'avrasm', + 'awk', + 'axapta', + 'bash', + 'basic', + 'bnf', + 'brainfuck', + 'cal', + 'capnproto', + 'ceylon', + 'c', + 'clean', + 'c-like', 'clojure', - 'ruby', - 'python', - 'shell', - 'php', - 'sql', - 'haskell', - 'coffeescript', - 'yaml', - 'pug', - 'lua', + 'clojure-repl', 'cmake', - 'nginx', - 'perl', - 'sass', - 'r', + 'coffeescript', + 'coq', + 'cos', + 'cpp', + 'crmsh', + 'crystal', + 'csharp', + 'csp', + 'css', + 'dart', + 'delphi', + 'diff', + 'django', + 'd', + 'dns', 'dockerfile', - 'tiddlywiki', - 'mediawiki', + 'dos', + 'dsconfig', + 'dts', + 'dust', + 'ebnf', + 'elixir', + 'elm', + 'erb', + 'erlang', + 'erlang-repl', + 'excel', + 'fix', + 'flix', + 'fortran', + 'fsharp', + 'gams', + 'gauss', + 'gcode', + 'gherkin', + 'glsl', + 'gml', 'go', - 'gherkin' -].concat(hljs.listLanguages()) + 'golo', + 'gradle', + 'groovy', + 'haml', + 'handlebars', + 'haskell', + 'haxe', + 'hsp', + 'htmlbars', + 'http', + 'hy', + 'inform7', + 'ini', + 'irpf90', + 'isbl', + 'java', + 'javascript', + 'jboss-cli', + 'json', + 'julia', + 'julia-repl', + 'kotlin', + 'lasso', + 'latex', + 'ldif', + 'leaf', + 'less', + 'lisp', + 'livecodeserver', + 'livescript', + 'llvm', + 'lsl', + 'lua', + 'makefile', + 'markdown', + 'mathematica', + 'matlab', + 'maxima', + 'mel', + 'mercury', + 'mipsasm', + 'mizar', + 'mojolicious', + 'monkey', + 'moonscript', + 'n1ql', + 'nginx', + 'nim', + 'nix', + 'node-repl', + 'nsis', + 'objectivec', + 'ocaml', + 'openscad', + 'oxygene', + 'parser3', + 'perl', + 'pf', + 'pgsql', + 'php', + 'php-template', + 'plaintext', + 'pony', + 'powershell', + 'processing', + 'profile', + 'prolog', + 'properties', + 'protobuf', + 'puppet', + 'purebasic', + 'python', + 'python-repl', + 'q', + 'qml', + 'reasonml', + 'rib', + 'r', + 'roboconf', + 'routeros', + 'rsl', + 'ruby', + 'ruleslanguage', + 'rust', + 'sas', + 'scala', + 'scheme', + 'scilab', + 'scss', + 'shell', + 'smali', + 'smalltalk', + 'sml', + 'sqf', + 'sql', + 'sql_more', + 'stan', + 'stata', + 'step21', + 'stylus', + 'subunit', + 'swift', + 'taggerscript', + 'tap', + 'tcl', + 'thrift', + 'tp', + 'twig', + 'typescript', + 'vala', + 'vbnet', + 'vbscript-html', + 'vbscript', + 'verilog', + 'vhdl', + 'vim', + 'x86asm', + 'xl', + 'xml', + 'xquery', + 'yaml', + 'zephir' +] const supportCharts = ['sequence', 'flow', 'graphviz', 'mermaid', 'abc'] const supportHeaders = [ { diff --git a/webpack.common.js b/webpack.common.js index 199e209d4..48b5bf147 100644 --- a/webpack.common.js +++ b/webpack.common.js @@ -248,7 +248,6 @@ module.exports = { 'bootstrap-validator', 'expose-loader?exposes=jsyaml!js-yaml', 'expose-loader?exposes=moment!moment', - 'expose-loader?exposes=hljs!highlight.js', 'expose-loader?exposes=emojify!emojify.js', 'expose-loader?exposes=LZString!lz-string', 'flowchart.js', @@ -279,7 +278,6 @@ module.exports = { 'babel-polyfill', 'expose-loader?exposes=jsyaml!js-yaml', 'expose-loader?exposes=moment!moment', - 'expose-loader?exposes=hljs!highlight.js', 'expose-loader?exposes=emojify!emojify.js', 'flowchart.js', 'js-sequence-diagrams', @@ -312,7 +310,6 @@ module.exports = { 'bootstrap-tooltip', 'expose-loader?exposes=jsyaml!js-yaml', 'expose-loader?exposes=moment!moment', - 'expose-loader?exposes=hljs!highlight.js', 'expose-loader?exposes=emojify!emojify.js', 'flowchart.js', 'js-sequence-diagrams', @@ -342,7 +339,6 @@ module.exports = { 'socket.io-client': 'io', 'jquery': '$', 'moment': 'moment', - 'highlight.js': 'hljs', 'select2': 'select2' },