From 4b0dc084265e00da6a5b35dd720396e2eba1f976 Mon Sep 17 00:00:00 2001 From: Baptiste Augrain Date: Fri, 14 Sep 2018 00:03:33 +0200 Subject: [PATCH] highlight code block for chart.js --- browser/components/MarkdownEditor.js | 2 +- browser/components/MarkdownSplitEditor.js | 2 +- browser/lib/markdown-it-fence.js | 4 +- extra_scripts/codemirror/mode/bfm/bfm.js | 107 ++++++++++++++++++++++ lib/main.html | 6 ++ 5 files changed, 118 insertions(+), 3 deletions(-) create mode 100644 extra_scripts/codemirror/mode/bfm/bfm.js diff --git a/browser/components/MarkdownEditor.js b/browser/components/MarkdownEditor.js index ee80c887..63673583 100644 --- a/browser/components/MarkdownEditor.js +++ b/browser/components/MarkdownEditor.js @@ -250,7 +250,7 @@ class MarkdownEditor extends React.Component { : 'codeEditor--hide' } ref='code' - mode='GitHub Flavored Markdown' + mode='Boost Flavored Markdown' value={value} theme={config.editor.theme} keyMap={config.editor.keyMap} diff --git a/browser/components/MarkdownSplitEditor.js b/browser/components/MarkdownSplitEditor.js index 8fa3cc07..ce518a89 100644 --- a/browser/components/MarkdownSplitEditor.js +++ b/browser/components/MarkdownSplitEditor.js @@ -145,7 +145,7 @@ class MarkdownSplitEditor extends React.Component { styleName='codeEditor' ref='code' width={this.state.codeEditorWidthInPercent + '%'} - mode='GitHub Flavored Markdown' + mode='Boost Flavored Markdown' value={value} theme={config.editor.theme} keyMap={config.editor.keyMap} diff --git a/browser/lib/markdown-it-fence.js b/browser/lib/markdown-it-fence.js index 040ac540..983ed71e 100644 --- a/browser/lib/markdown-it-fence.js +++ b/browser/lib/markdown-it-fence.js @@ -1,6 +1,8 @@ 'use strict' module.exports = function (md, renderers, defaultRenderer) { + const paramsRE = /^[ \t]*([\w+#-]+)?(?:\(((?:\s*\w[-\w]*(?:=(?:'(?:.*?[^\\])?'|"(?:.*?[^\\])?"|(?:[^'"][^\s]*)))?)*)\))?(?::([^:]*)(?::(\d+))?)?\s*$/ + function fence (state, startLine, endLine) { let pos = state.bMarks[startLine] + state.tShift[startLine] let max = state.eMarks[startLine] @@ -66,7 +68,7 @@ module.exports = function (md, renderers, defaultRenderer) { let fileName = '' let firstLineNumber = 0 - let match = /^(\w[-\w]*)?(?:\(((?:\s*\w[-\w]*(?:=(?:'(?:.*?[^\\])?'|"(?:.*?[^\\])?"|(?:[^'"][^\s]*)))?)*)\))?(?::([^:]*)(?::(\d+))?)?\s*$/.exec(params) + let match = paramsRE.exec(params) if (match) { if (match[1]) { langType = match[1] diff --git a/extra_scripts/codemirror/mode/bfm/bfm.js b/extra_scripts/codemirror/mode/bfm/bfm.js new file mode 100644 index 00000000..21a1e25f --- /dev/null +++ b/extra_scripts/codemirror/mode/bfm/bfm.js @@ -0,0 +1,107 @@ +(function(mod) { + if (typeof exports == "object" && typeof module == "object") // CommonJS + mod(require("../codemirror/lib/codemirror"), require("../codemirror/mode/gfm/gfm"), require("../codemirror/mode/yaml-frontmatter/yaml-frontmatter")) + else if (typeof define == "function" && define.amd) // AMD + define(["../codemirror/lib/codemirror", "../codemirror/mode/gfm/gfm", "../codemirror/mode/yaml-frontmatter/yaml-frontmatter"], mod) + else // Plain browser env + mod(CodeMirror) +})(function(CodeMirror) { + 'use strict' + + const fencedCodeRE = /^(~~~+|```+)[ \t]*([\w+#-]+)?(?:\(((?:\s*\w[-\w]*(?:=(?:'(?:.*?[^\\])?'|"(?:.*?[^\\])?"|(?:[^'"][^\s]*)))?)*)\))?(?::([^:]*)(?::(\d+))?)?\s*$/ + + function getMode(name, params, config, cm) { + if (!name) { + return null + } + + const parameters = {} + if (params) { + const regex = /(\w[-\w]*)(?:=(?:'(.*?[^\\])?'|"(.*?[^\\])?"|([^'"][^\s]*)))?/g + + let match + while ((match = regex.exec(params))) { + parameters[match[1]] = match[2] || match[3] || match[4] || null + } + } + + if (name === 'chart') { + name = parameters.hasOwnProperty('yaml') ? 'yaml' : 'json' + } + + const found = CodeMirror.findModeByName(name) + if (!found) { + return null + } + + if (CodeMirror.modes.hasOwnProperty(found.mode)) { + const mode = CodeMirror.getMode(config, found.mode) + + return mode.name === 'null' ? null : mode + } else { + CodeMirror.requireMode(found.mode, () => { + cm.setOption('mode', cm.getOption('mode')) + }) + } + } + + CodeMirror.defineMode('bfm', function (config, baseConfig) { + var bfmOverlay = { + startState: function() { + return { + fencedEndRE: null + } + }, + copyState: function(s) { + return { + localMode: s.localMode, + localState: s.localMode ? CodeMirror.copyState(s.localMode, s.localState) : null, + + fencedEndRE: s.fencedEndRE + } + }, + token: function(stream, state) { + state.combineTokens = false + + if (state.fencedEndRE && stream.match(state.fencedEndRE)) { + state.fencedEndRE = null + state.localMode = null + state.localState = null + + return null + } + + if (state.localMode) { + return state.localMode.token(stream, state.localState) || '' + } + + const match = stream.match(fencedCodeRE, true) + if (match) { + state.fencedEndRE = new RegExp(match[1] + '+ *$') + + state.localMode = getMode(match[2], match[3], config, stream.lineOracle.doc.cm) + if (state.localMode) { + state.localState = CodeMirror.startState(state.localMode) + } + + return null + } + + state.combineTokens = true + stream.next() + return null + }, + } + + baseConfig.name = 'yaml-frontmatter' + return CodeMirror.overlayMode(CodeMirror.getMode(config, baseConfig), bfmOverlay) + }, 'yaml-frontmatter') + + CodeMirror.defineMIME('text/x-bfm', 'bfm') + + CodeMirror.modeInfo.push({ + name: "Boost Flavored Markdown", + mime: "text/x-bfm", + mode: "bfm" + }) +}) \ No newline at end of file diff --git a/lib/main.html b/lib/main.html index 7366fa04..7a082f3a 100644 --- a/lib/main.html +++ b/lib/main.html @@ -93,8 +93,14 @@ + + + + + +