From 706c96972692fe328c6bbee0d3780a195dc0572b Mon Sep 17 00:00:00 2001 From: Michael Schmidt Date: Sat, 1 Dec 2018 21:09:13 +0100 Subject: [PATCH] Add support for code blocks in Markdown (#1562) It also supports syntax highlighting! The highlighting is done in two steps: 1. Add an alias `language-****` containing the given language to the `code-block` token. This happens in the `after-tokenize` hook. 2. Highlight the code with the `wrap` hook. This is to get around the encoding (`util.encode`) of tokens in `Prism.highlight`. By using this procedure we get the correct execution of the `before-tokenize`, `after-tokenize`, and `wrap` hook for all included languages. --- components/prism-markdown.js | 88 ++++++++++++++++++++++ components/prism-markdown.min.js | 2 +- tests/languages/markdown/code_feature.test | 15 +++- 3 files changed, 102 insertions(+), 3 deletions(-) diff --git a/components/prism-markdown.js b/components/prism-markdown.js index 5f2510dbfd..22c6a4b681 100644 --- a/components/prism-markdown.js +++ b/components/prism-markdown.js @@ -16,6 +16,24 @@ Prism.languages.insertBefore('markdown', 'prolog', { // ``code`` pattern: /``.+?``|`[^`\n]+`/, alias: 'keyword' + }, + { + // ```optional language + // code block + // ``` + pattern: /^```[\s\S]*?^```$/m, + greedy: true, + inside: { + 'code-block': { + pattern: /^(```.*(?:\r?\n|\r))[\s\S]+?(?=(?:\r?\n|\r)^```$)/m, + lookbehind: true + }, + 'code-language': { + pattern: /^(```).+/, + lookbehind: true + }, + 'punctuation': /```/ + } } ], 'title': [ @@ -137,3 +155,73 @@ Prism.languages.markdown['italic'].inside['bold'] = Prism.languages.markdown['bo Prism.languages.markdown['italic'].inside['strike'] = Prism.languages.markdown['strike']; Prism.languages.markdown['strike'].inside['bold'] = Prism.languages.markdown['bold']; Prism.languages.markdown['strike'].inside['italic'] = Prism.languages.markdown['italic']; + +Prism.hooks.add('after-tokenize', function (env) { + if (env.language !== 'markdown') { + return; + } + + function walkTokens(tokens) { + if (!tokens || typeof tokens === 'string') { + return; + } + + for (var i = 0, l = tokens.length; i < l; i++) { + var token = tokens[i]; + + if (token.type !== 'code') { + walkTokens(token.content); + continue; + } + + var codeLang = token.content[1]; + var codeBlock = token.content[3]; + + if (codeLang && codeBlock && + codeLang.type === 'code-language' && codeBlock.type === 'code-block' && + typeof codeLang.content === 'string') { + + // this might be a language that Prism does not support + var alias = 'language-' + codeLang.content.trim().split(/\s+/)[0].toLowerCase(); + + // add alias + if (!codeBlock.alias) { + codeBlock.alias = [alias]; + } else if (typeof codeBlock.alias === 'string') { + codeBlock.alias = [codeBlock.alias, alias]; + } else { + codeBlock.alias.push(alias); + } + } + } + } + + walkTokens(env.tokens); +}); + +Prism.hooks.add('wrap', function (env) { + if (env.type !== 'code-block') { + return; + } + + var codeLang = ''; + for (var i = 0, l = env.classes.length; i < l; i++) { + var cls = env.classes[i]; + var match = /language-(\w+)/.exec(cls); + if (match) { + codeLang = match[1]; + break; + } + } + + var grammar = Prism.languages[codeLang]; + + if (!grammar) { + return; + } + + // reverse Prism.util.encode + var code = env.content.replace(/</g, '<').replace(/&/g, '&'); + + env.content = Prism.highlight(code, grammar, codeLang); +}); diff --git a/components/prism-markdown.min.js b/components/prism-markdown.min.js index 44b17fc9d8..b062e980f9 100644 --- a/components/prism-markdown.min.js +++ b/components/prism-markdown.min.js @@ -1 +1 @@ -Prism.languages.markdown=Prism.languages.extend("markup",{}),Prism.languages.insertBefore("markdown","prolog",{blockquote:{pattern:/^>(?:[\t ]*>)*/m,alias:"punctuation"},code:[{pattern:/^(?: {4}|\t).+/m,alias:"keyword"},{pattern:/``.+?``|`[^`\n]+`/,alias:"keyword"}],title:[{pattern:/\S.*(?:\r?\n|\r)(?:==+|--+)/,alias:"important",inside:{punctuation:/==+$|--+$/}},{pattern:/(^\s*)#+.+/m,lookbehind:!0,alias:"important",inside:{punctuation:/^#+|#+$/}}],hr:{pattern:/(^\s*)([*-])(?:[\t ]*\2){2,}(?=\s*$)/m,lookbehind:!0,alias:"punctuation"},list:{pattern:/(^\s*)(?:[*+-]|\d+\.)(?=[\t ].)/m,lookbehind:!0,alias:"punctuation"},"url-reference":{pattern:/!?\[[^\]]+\]:[\t ]+(?:\S+|<(?:\\.|[^>\\])+>)(?:[\t ]+(?:"(?:\\.|[^"\\])*"|'(?:\\.|[^'\\])*'|\((?:\\.|[^)\\])*\)))?/,inside:{variable:{pattern:/^(!?\[)[^\]]+/,lookbehind:!0},string:/(?:"(?:\\.|[^"\\])*"|'(?:\\.|[^'\\])*'|\((?:\\.|[^)\\])*\))$/,punctuation:/^[\[\]!:]|[<>]/},alias:"url"},bold:{pattern:/(^|[^\\])(\*\*|__)(?:(?:\r?\n|\r)(?!\r?\n|\r)|.)+?\2/,lookbehind:!0,greedy:!0,inside:{punctuation:/^\*\*|^__|\*\*$|__$/}},italic:{pattern:/(^|[^\\])([*_])(?:(?:\r?\n|\r)(?!\r?\n|\r)|.)+?\2/,lookbehind:!0,greedy:!0,inside:{punctuation:/^[*_]|[*_]$/}},strike:{pattern:/(^|[^\\])(~~?)(?:(?:\r?\n|\r)(?!\r?\n|\r)|.)+?\2/,lookbehind:!0,greedy:!0,inside:{punctuation:/^~~?|~~?$/}},url:{pattern:/!?\[[^\]]+\](?:\([^\s)]+(?:[\t ]+"(?:\\.|[^"\\])*")?\)| ?\[[^\]\n]*\])/,inside:{variable:{pattern:/(!?\[)[^\]]+(?=\]$)/,lookbehind:!0},string:{pattern:/"(?:\\.|[^"\\])*"(?=\)$)/}}}}),Prism.languages.markdown.bold.inside.url=Prism.languages.markdown.url,Prism.languages.markdown.italic.inside.url=Prism.languages.markdown.url,Prism.languages.markdown.strike.inside.url=Prism.languages.markdown.url,Prism.languages.markdown.bold.inside.italic=Prism.languages.markdown.italic,Prism.languages.markdown.bold.inside.strike=Prism.languages.markdown.strike,Prism.languages.markdown.italic.inside.bold=Prism.languages.markdown.bold,Prism.languages.markdown.italic.inside.strike=Prism.languages.markdown.strike,Prism.languages.markdown.strike.inside.bold=Prism.languages.markdown.bold,Prism.languages.markdown.strike.inside.italic=Prism.languages.markdown.italic; \ No newline at end of file +Prism.languages.markdown=Prism.languages.extend("markup",{}),Prism.languages.insertBefore("markdown","prolog",{blockquote:{pattern:/^>(?:[\t ]*>)*/m,alias:"punctuation"},code:[{pattern:/^(?: {4}|\t).+/m,alias:"keyword"},{pattern:/``.+?``|`[^`\n]+`/,alias:"keyword"},{pattern:/^```[\s\S]*?^```$/m,greedy:!0,inside:{"code-block":{pattern:/^(```.*(?:\r?\n|\r))[\s\S]+?(?=(?:\r?\n|\r)^```$)/m,lookbehind:!0},"code-language":{pattern:/^(```).+/,lookbehind:!0},punctuation:/```/}}],title:[{pattern:/\S.*(?:\r?\n|\r)(?:==+|--+)/,alias:"important",inside:{punctuation:/==+$|--+$/}},{pattern:/(^\s*)#+.+/m,lookbehind:!0,alias:"important",inside:{punctuation:/^#+|#+$/}}],hr:{pattern:/(^\s*)([*-])(?:[\t ]*\2){2,}(?=\s*$)/m,lookbehind:!0,alias:"punctuation"},list:{pattern:/(^\s*)(?:[*+-]|\d+\.)(?=[\t ].)/m,lookbehind:!0,alias:"punctuation"},"url-reference":{pattern:/!?\[[^\]]+\]:[\t ]+(?:\S+|<(?:\\.|[^>\\])+>)(?:[\t ]+(?:"(?:\\.|[^"\\])*"|'(?:\\.|[^'\\])*'|\((?:\\.|[^)\\])*\)))?/,inside:{variable:{pattern:/^(!?\[)[^\]]+/,lookbehind:!0},string:/(?:"(?:\\.|[^"\\])*"|'(?:\\.|[^'\\])*'|\((?:\\.|[^)\\])*\))$/,punctuation:/^[\[\]!:]|[<>]/},alias:"url"},bold:{pattern:/(^|[^\\])(\*\*|__)(?:(?:\r?\n|\r)(?!\r?\n|\r)|.)+?\2/,lookbehind:!0,greedy:!0,inside:{punctuation:/^\*\*|^__|\*\*$|__$/}},italic:{pattern:/(^|[^\\])([*_])(?:(?:\r?\n|\r)(?!\r?\n|\r)|.)+?\2/,lookbehind:!0,greedy:!0,inside:{punctuation:/^[*_]|[*_]$/}},strike:{pattern:/(^|[^\\])(~~?)(?:(?:\r?\n|\r)(?!\r?\n|\r)|.)+?\2/,lookbehind:!0,greedy:!0,inside:{punctuation:/^~~?|~~?$/}},url:{pattern:/!?\[[^\]]+\](?:\([^\s)]+(?:[\t ]+"(?:\\.|[^"\\])*")?\)| ?\[[^\]\n]*\])/,inside:{variable:{pattern:/(!?\[)[^\]]+(?=\]$)/,lookbehind:!0},string:{pattern:/"(?:\\.|[^"\\])*"(?=\)$)/}}}}),Prism.languages.markdown.bold.inside.url=Prism.languages.markdown.url,Prism.languages.markdown.italic.inside.url=Prism.languages.markdown.url,Prism.languages.markdown.strike.inside.url=Prism.languages.markdown.url,Prism.languages.markdown.bold.inside.italic=Prism.languages.markdown.italic,Prism.languages.markdown.bold.inside.strike=Prism.languages.markdown.strike,Prism.languages.markdown.italic.inside.bold=Prism.languages.markdown.bold,Prism.languages.markdown.italic.inside.strike=Prism.languages.markdown.strike,Prism.languages.markdown.strike.inside.bold=Prism.languages.markdown.bold,Prism.languages.markdown.strike.inside.italic=Prism.languages.markdown.italic,Prism.hooks.add("after-tokenize",function(a){function n(a){if(a&&"string"!=typeof a)for(var e=0,i=a.length;i>e;e++){var r=a[e];if("code"===r.type){var t=r.content[1],s=r.content[3];if(t&&s&&"code-language"===t.type&&"code-block"===s.type&&"string"==typeof t.content){var o="language-"+t.content.trim().split(/\s+/)[0].toLowerCase();s.alias?"string"==typeof s.alias?s.alias=[s.alias,o]:s.alias.push(o):s.alias=[o]}}else n(r.content)}}"markdown"===a.language&&n(a.tokens)}),Prism.hooks.add("wrap",function(a){if("code-block"===a.type){for(var n="",e=0,i=a.classes.length;i>e;e++){var r=a.classes[e],t=/language-(\w+)/.exec(r);if(t){n=t[1];break}}var s=Prism.languages[n];if(s){var o=a.content.replace(/</g,"<").replace(/&/g,"&");a.content=Prism.highlight(o,s,n)}}}); \ No newline at end of file diff --git a/tests/languages/markdown/code_feature.test b/tests/languages/markdown/code_feature.test index 2696ca72e2..948c50920c 100644 --- a/tests/languages/markdown/code_feature.test +++ b/tests/languages/markdown/code_feature.test @@ -5,13 +5,24 @@ foobar +``` js +var a = 0; +``` + ---------------------------------------------------- [ ["code", "`foo bar baz`"], ["code", "``foo `bar` baz``"], ["code", " foobar"], - ["code", "\tfoobar"] + ["code", "\tfoobar"], + + ["code", [ + ["punctuation", "```"], + ["code-language", " js"], + ["code-block", "var a = 0;"], + ["punctuation", "```"] + ]] ] ---------------------------------------------------- @@ -19,4 +30,4 @@ Checks for code blocks and inline code. The first code block is indented with 4 spaces, the second one is indented with 1 tab. The initial dot is necessary because of the first part being trimmed -by the test runner. \ No newline at end of file +by the test runner.