diff --git a/.eleventy.js b/.eleventy.js index 392b2c3..07e0378 100644 --- a/.eleventy.js +++ b/.eleventy.js @@ -7,7 +7,8 @@ const markdownPrismJs = require("./src/markdownSyntaxHighlightOptions"); module.exports = { initArguments: { Prism }, configFunction: function(eleventyConfig, options = {}) { - options = Object.assign({ alwaysWrapLineHighlights: false }, options); + options = Object.assign({ alwaysWrapLineHighlights: false, + showLineNumbers: false}, options); // TODO hbs? if( hasTemplateFormat(options.templateFormats, "liquid") ) { @@ -26,6 +27,9 @@ module.exports = { }); } + // this is where the plugin code gets hooked up + // in the default md's highlighter + if( hasTemplateFormat(options.templateFormats, "md") ) { eleventyConfig.addMarkdownHighlighter(markdownPrismJs(options)); } diff --git a/README.md b/README.md index ca5b52c..e75be6c 100644 --- a/README.md +++ b/README.md @@ -1,5 +1,19 @@ # eleventy-plugin-syntaxhighlight +To show line numbers, set the `showLineNumbers` option to true. +This is a global setting. + +``` +module.exports = function(eleventyConfig) { + eleventyConfig.addPlugin(syntaxHighlight, { + alwaysWrapLineHighlights: true, + showLineNumbers: false + }); + + eleventyConfig.setTemplateFormats("njk,liquid,md,css"); +}; +``` + A pack of [Eleventy](https://github.com/11ty/eleventy) plugins for syntax highlighting. No browser/client JavaScript here, these highlight transformations are all done at build-time. ## Read the [Full Documentation on 11ty.dev](https://www.11ty.dev/docs/plugins/syntaxhighlight/) diff --git a/demo/eleventy-config.js b/demo/eleventy-config.js index ba2cbe7..d17ec49 100644 --- a/demo/eleventy-config.js +++ b/demo/eleventy-config.js @@ -2,7 +2,8 @@ const syntaxHighlight = require("../.eleventy.js"); module.exports = function(eleventyConfig) { eleventyConfig.addPlugin(syntaxHighlight, { - // alwaysWrapLineHighlights: true + alwaysWrapLineHighlights: true, + showLineNumbers: false }); eleventyConfig.setTemplateFormats("njk,liquid,md,css"); diff --git a/demo/line-numbers.css b/demo/line-numbers.css new file mode 100644 index 0000000..43e47d1 --- /dev/null +++ b/demo/line-numbers.css @@ -0,0 +1,54 @@ +/*** + * LINE NUMBERS + * https://raw.githubusercontent.com/PrismJS/prism/master/plugins/line-numbers/prism-line-numbers.css + ***/ + + pre[class*="language-"].line-numbers { + position: relative; + padding-left: 3.8em; + counter-reset: linenumber; +} + +pre[class*="language-"].line-numbers > code { + position: relative; + white-space: inherit; +} + +.line-numbers .line-numbers-rows { + position: absolute; + pointer-events: none; + top: -4px; /* hack to get numbers to line up with text */ + font-size: 100%; + left: -3.8em; + width: 3em; /* works for line-numbers below 1000 lines */ + letter-spacing: -1px; + border-right: 1px solid #999; + + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + +} + +.line-numbers-rows > span { + pointer-events: none; + display: block; + counter-increment: linenumber; +} + +.line-numbers-rows > span:before { + content: counter(linenumber); + color: #999; + display: block; + padding-right: 0.8em; + text-align: right; +} + +.highlight-line-add { + background-color: rgb(197, 234, 197); +} + +.highlight-line-remove { + background-color: rgb(253, 204, 204); +} diff --git a/demo/test-markdown.md b/demo/test-markdown.md index 2dda09c..ed93463 100644 --- a/demo/test-markdown.md +++ b/demo/test-markdown.md @@ -5,26 +5,35 @@ + + +ts + ```ts function myFunction() { return true; } ``` +typescript + ```typescript function myFunction() { return true; } ``` +js + ```js function myFunction() { return true; } ``` +js ```js let multilineString = ` @@ -34,8 +43,34 @@ let multilineString = ` `; ``` +## Table + +markdown + +``` markdown +| State | Capital | +| :------------ | :------ | +| New York | Albany | +| Nebraska | Lincoln | +| New Hampshire | Concord | +``` + +markdown/1,3 + +``` markdown/1,3 +| State | Capital | +| :------------ | :------ | +| New York | Albany | +| Nebraska | Lincoln | +| New Hampshire | Concord | +``` + + + ## Dash line +js/- + ```js/- let multilineString = ` this is the first line @@ -44,6 +79,8 @@ let multilineString = ` `; ``` +js/1,3 + ```js/1,3 let multilineString = ` this is the first line @@ -52,5 +89,27 @@ let multilineString = ` `; ``` +text/1,3 + +```text/1,3 + this is the first line + this is the second line + this is the third line + this is the fourth line + this is the fifth line +``` + + + +text/1,3/2,4 + +```text/1,3/2,4 + this is the first line + this is the second line + this is the third line + this is the fourth line + this is the fifth line +``` + diff --git a/src/markdownSyntaxHighlightOptions.js b/src/markdownSyntaxHighlightOptions.js index 999820b..d41bed5 100644 --- a/src/markdownSyntaxHighlightOptions.js +++ b/src/markdownSyntaxHighlightOptions.js @@ -2,8 +2,19 @@ const Prism = require("prismjs"); const PrismLoader = require("./PrismLoader"); const HighlightLinesGroup = require("./HighlightLinesGroup"); +/** + * + * lang / 1,2,5-8 + * highlight lines 1,2,5,6,7,8 + * + * lang / 1, 9 / 2-4,6 + * add lines 1, 9 + * delete lines 2,3,4,6 + */ + module.exports = function(options = {}) { - return function(str, language) { + let plugin = function( str, language) { + if(!language) { // empty string means defer to the upstream escaping code built into markdown lib. return ""; @@ -21,9 +32,26 @@ module.exports = function(options = {}) { html = Prism.highlight(str, PrismLoader(language), language); } + // Prism's markdown highlighter renders tables + // with a newline before the end of the corresponding + // markdown line. It's hacky, but I'd rather + // fix it up here than figure out how to + // fix Prism's markdown highlighter + + if(language === 'markdown'){ + let wickedPattern=/<\/span>\n<\/span>/g + let goodReplacement='\n' + html = html.replace(wickedPattern, goodReplacement) + } + let hasHighlightNumbers = split.length > 0; let highlights = new HighlightLinesGroup(split.join("/"), "/"); - let lines = html.split("\n").slice(0, -1); // The last line is empty. + + let lines = html.split("\n") + // The last line is usually empty + // but not always -- such as tables + if (lines[lines.length-1] === "") + lines.pop() lines = lines.map(function(line, j) { if(options.alwaysWrapLineHighlights || hasHighlightNumbers) { @@ -33,6 +61,26 @@ module.exports = function(options = {}) { return line; }); - return `
${lines.join("
")}
`; + let lineNumbers = "" // the "" string that does the numbering + if (options.showLineNumbers) { + lineNumbers = `` + } + + let classNames = `language-${language}` + + (options.showLineNumbers + ? " line-numbers" + : "") + // the line-numbers CSS class shifts the lines right + // to make room for the line numbers + + let retStr = `
` +
+                    `${lines.join("
")}` +
+                    lineNumbers +
+                  `
` + + return retStr }; + + return plugin; }; + diff --git a/test/MarkdownHighlightTest.js b/test/MarkdownHighlightTest.js index 2161b40..0e1dbf5 100644 --- a/test/MarkdownHighlightTest.js +++ b/test/MarkdownHighlightTest.js @@ -22,6 +22,17 @@ alert(); \`\`\``).trim(), `
alert();
`); }); +test("Test Markdown Highlighter Line Numbers", t => { + let mdLib = md(); + mdLib.set({ + highlight: markdownPrismJsOptions({ alwaysWrapLineHighlights: true, + showLineNumbers: true}) + }); + t.is(mdLib.render(`\`\`\`js +alert(); +\`\`\``).trim(), `
alert();
`); +}); + // test("Test Markdown Highlighter Block Comment", t => { // let mdLib = md();