-
Notifications
You must be signed in to change notification settings - Fork 2
Prism fixes #17
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Prism fixes #17
Changes from 23 commits
df40440
29efc30
f9ba9b4
01b93ff
833ab0c
902a4e2
b332645
1269415
22fa618
48650c8
888e37b
39a66c1
ef43122
fa9a5a2
11b58b6
89dbdec
3e2b5f1
37e0be6
2feb51c
8919ed4
66ae96d
b115fab
d455b64
6170026
28a3cd2
3fddf5e
88e009a
0bc00c6
e50921b
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,33 +1,80 @@ | ||
| require("./prettify.less"); | ||
|
|
||
| require("./prism-config"); | ||
| var Prism = require("prismjs"); | ||
| require("prismjs/plugins/line-numbers/prism-line-numbers.js"); | ||
| require("prismjs/plugins/previewers/prism-previewers.js"); | ||
| require("prismjs/plugins/command-line/prism-command-line.js"); | ||
| require("prismjs/plugins/line-highlight/prism-line-highlight.js"); | ||
| require("prismjs/plugins/toolbar/prism-toolbar.js"); | ||
| require("prismjs/plugins/copy-to-clipboard/prism-copy-to-clipboard.js"); | ||
| require("./prism-collapse.js"); | ||
|
|
||
| require("prismjs/themes/prism-coy.css"); | ||
| require("prismjs/plugins/line-numbers/prism-line-numbers.css"); | ||
| require("prismjs/plugins/previewers/prism-previewers.css"); | ||
| require("prismjs/plugins/command-line/prism-command-line.css"); | ||
| require("prismjs/plugins/line-highlight/prism-line-highlight.css"); | ||
| require("prismjs/plugins/toolbar/prism-toolbar.css"); | ||
| require("./prism-collapse.less"); | ||
|
|
||
| /** | ||
| * @parent bit-docs-prettify/static | ||
| * @module {function} bit-docs-prettify/prettify.js | ||
| * | ||
| * Main front end JavaScript file for static portion of this plugin. | ||
| * | ||
| * @signature `prettyPrint()` | ||
| * | ||
| * Finds all `<code>` elements on the page and adds the `prettyprint` class | ||
| * before executing the required pretty print engine. | ||
| * | ||
| * Also requires [bit-docs-prettify/prettify.less]. | ||
| * Get node for provided line number | ||
| * Copied from prism-line-numbers.js and modified to support nested spans | ||
| * @param {Element} element pre element | ||
| * @param {Number} number line number | ||
| * @return {Element|undefined} | ||
| */ | ||
| module.exports = function(){ | ||
| Prism.plugins.lineNumbers.getLine = function (element, number) { | ||
|
||
| if (element.tagName !== 'PRE' || !element.classList.contains('line-numbers')) { | ||
| return; | ||
| } | ||
|
|
||
| var lineNumberRows = element.querySelector('.line-numbers-rows'); | ||
| var lineNumbers = lineNumberRows.querySelectorAll('span'); | ||
| var lineNumberStart = parseInt(element.getAttribute('data-start'), 10) || 1; | ||
| var lineNumberEnd = lineNumberStart + (lineNumbers.length - 1); | ||
|
|
||
| if (number < lineNumberStart) { | ||
| number = lineNumberStart; | ||
| } | ||
| if (number > lineNumberEnd) { | ||
| number = lineNumberEnd; | ||
| } | ||
|
|
||
| var lineIndex = number - lineNumberStart; | ||
|
|
||
| return lineNumbers[lineIndex]; | ||
| }; | ||
|
|
||
| Prism.languages.insertBefore('javascript', 'template-string', { | ||
| 'html-template-string': { | ||
| pattern: /`(?:[\s\S])*<[a-z-]+(?:\s+[^<>]*)?>(?:[\s\S])*`/, | ||
| inside: { | ||
| 'interpolation': { | ||
| pattern: /\$\{[^}]+\}/, | ||
| inside: { | ||
| 'interpolation-punctuation': { | ||
| pattern: /^\$\{|\}$/, | ||
| alias: 'punctuation' | ||
| }, | ||
| rest: Prism.languages.javascript | ||
| } | ||
| }, | ||
| rest: Prism.languages.html | ||
| } | ||
| } | ||
| }); | ||
|
|
||
| module.exports = function() { | ||
| var codes = document.getElementsByTagName("code"); | ||
| for (var i = 0; i < codes.length; i++) { | ||
| var code = codes[i]; | ||
|
|
||
| if (code.textContent.slice(-1) === "\n") { | ||
| code.textContent = code.textContent.slice(0, -1); | ||
| } | ||
|
|
||
| if (code.parentNode.nodeName.toUpperCase() === "PRE") { | ||
| code.parentNode.className += " line-numbers"; | ||
|
|
||
|
|
@@ -37,13 +84,9 @@ module.exports = function(){ | |
|
|
||
| if (code.className.includes("language-shell")) { | ||
| code.parentNode.className += " command-line"; | ||
|
|
||
| if (code.textContent.slice(-1) === "\n") { | ||
| code.textContent = code.textContent.slice(0, -1); | ||
| } | ||
| } | ||
| } | ||
| } | ||
|
|
||
| Prism.highlightAll(); | ||
| } | ||
| window.requestAnimationFrame(Prism.highlightAll); | ||
| }; | ||
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,4 +1,18 @@ | ||
| pre[class*="language-"] > code { | ||
| border-left: none !important; | ||
| box-shadow: 0px 0px 0px 1px #dfdfdf !important; | ||
| article { | ||
| pre[class*="language-"] > code { | ||
| font-size: 16px; | ||
| border-left: none; | ||
| box-shadow: 0px 0px 0px 1px #dfdfdf; | ||
| background-image: none; | ||
| } | ||
|
|
||
| pre[class*=language-]:after, pre[class*=language-]:before { | ||
| display: none; | ||
| content: none; | ||
| } | ||
|
|
||
| .line-highlight { | ||
| background: rgba(0, 180, 0, .1); | ||
| background: linear-gradient(to right, rgba(0, 180, 0, .1) 70%, rgba(0, 180, 0, 0)); | ||
| } | ||
| } |
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,170 @@ | ||
| if (typeof self === 'undefined' || !self.Prism || !self.document || !document.querySelector) { | ||
| throw new Error('Prism must be loaded before prism-collapse'); | ||
| } | ||
|
|
||
| function hasClass(element, className) { | ||
| className = " " + className + " "; | ||
| return (" " + element.className + " ").replace(/[\n\t]/g, " ").indexOf(className) > -1 | ||
| } | ||
|
|
||
| function adjustHighlights(pre, collapseRange, visible) { | ||
| collapseRange = collapseRange.split('-').map(function(value) { | ||
| return parseInt(value); | ||
| }); | ||
|
|
||
| var highlights = $(pre).find('.line-highlight'); | ||
| var lineHeight = getLineHeight(highlights); | ||
|
|
||
| highlights.each(function() { | ||
| var highlight = $(this); | ||
| var range = highlight.attr('data-range').split('-').map(function(value) { | ||
| return parseInt(value); | ||
| }); | ||
|
|
||
| if (range.length === 1) { | ||
| var line = range[0]; | ||
| if (line < collapseRange[0]) { | ||
| return; | ||
| } | ||
|
|
||
| if (line > collapseRange[1]) { | ||
| var top = parseFloat(highlight.css('top').slice(0, -2)); | ||
| var offset = (collapseRange[1] - collapseRange[0]) * lineHeight; | ||
|
|
||
| highlight.css('top', top + (visible ? offset : -offset)); | ||
| return; | ||
| } | ||
|
|
||
| highlight.css('display', visible ? 'block' : 'none'); | ||
| return; | ||
| } | ||
|
|
||
| if (range.length === 2) { | ||
| if (range[1] < collapseRange[0]) { | ||
| return; | ||
| } | ||
|
|
||
| if (range[0] > collapseRange[1]) { | ||
| var top = parseFloat(highlight.css('top').slice(0, -2)); | ||
| var offset = (collapseRange[1] - collapseRange[0]) * lineHeight; | ||
|
|
||
| highlight.css('top', top + (visible ? offset : -offset)); | ||
| return; | ||
| } | ||
|
|
||
| highlight.css('display', visible ? 'block' : 'none'); | ||
| return; | ||
| } | ||
| }); | ||
|
|
||
| function getLineHeight(highlights) { | ||
| var highlight = highlights.eq(0); | ||
| var height = parseFloat(highlight.css('height').slice(0, -2)); | ||
|
|
||
| var range = highlight.attr('data-range').split('-').map(function(value) { | ||
| return parseInt(value); | ||
| }); | ||
|
|
||
| if (range.length === 1) { | ||
| return height; | ||
| } | ||
|
|
||
| return height / (range[1] - range[0] + 1); | ||
| } | ||
| } | ||
|
|
||
| function collapseLines(pre, config, hasLineNumbers) { | ||
| var inserts = []; | ||
|
|
||
| var ranges = config.split(','); | ||
| for (var i = 0; i < ranges.length; i++) { | ||
| var range = ranges[i]; | ||
| var parts = range.split('-'); | ||
|
|
||
| var wrapper = '<div class="collapse collapsed" data-index="' + i + '" data-range="' + range + '">'; | ||
| inserts.push([ | ||
| +parts[0], | ||
| wrapper + '<div class="collapse-code">', | ||
| wrapper + '<div class="collapse-lines">' | ||
| ]); | ||
|
|
||
| inserts.push([ | ||
| +parts[1] + 1, | ||
| '</div></div>', | ||
| '</div></div>' | ||
| ]); | ||
|
|
||
| adjustHighlights(pre, range, false); | ||
| } | ||
|
|
||
| inserts.sort(function (a, b) { | ||
| return b[0] - a[0]; | ||
| }); | ||
|
|
||
|
|
||
| var codeContainer = pre.children[0]; | ||
|
|
||
| var numbersContainer = null; | ||
| var numbers = null; | ||
| if (hasLineNumbers) { | ||
| numbersContainer = codeContainer.lastChild; | ||
| numbersContainer.remove(); | ||
|
|
||
| numbers = numbersContainer.innerHTML.split('<span></span>'); | ||
| } | ||
|
|
||
| var code = codeContainer.innerHTML.split('\n'); | ||
| code = code.map(function(line, index) { | ||
| if (index === code.length - 1) { | ||
| return line; | ||
| } | ||
|
|
||
| return line + '\n'; | ||
| }); | ||
|
|
||
| for (var i = 0; i < inserts.length; i++) { | ||
| var line = Math.min(code.length - 1, inserts[i][0] - 1); | ||
|
|
||
| code.splice(line, 0, inserts[i][1]); | ||
| numbers[line] += inserts[i][2]; | ||
| } | ||
|
|
||
| codeContainer.innerHTML = code.join(''); | ||
|
|
||
| if (hasLineNumbers) { | ||
| numbersContainer.innerHTML = numbers.join('<span></span>'); | ||
| codeContainer.appendChild(numbersContainer); | ||
| } | ||
| } | ||
|
|
||
| Prism.hooks.add('complete', function completeHook(env) { | ||
| var pre = env.element.parentNode; | ||
| var config = pre && pre.getAttribute('data-collapse'); | ||
|
|
||
| if (!pre || !config || !/pre/i.test(pre.nodeName)) { | ||
| return; | ||
| } | ||
|
|
||
| var hasLineNumbers = Prism.plugins.lineNumbers; | ||
| var isLineNumbersLoaded = env.plugins && env.plugins.lineNumbers; | ||
|
|
||
| if (hasClass(pre, 'line-numbers') && hasLineNumbers && !isLineNumbersLoaded) { | ||
| Prism.hooks.add('line-numbers', completeHook); | ||
| } else { | ||
| collapseLines(pre, config, hasLineNumbers); | ||
| } | ||
| }); | ||
|
|
||
| $('body').on('click', 'pre code .collapse.collapsed', function() { | ||
| var collapse = $(this); | ||
| var pre = collapse.closest('pre'); | ||
| var code = collapse.closest('code'); | ||
| var index = collapse.attr('data-index'); | ||
|
|
||
| code | ||
| .find('.collapse[data-index=' + index + ']') | ||
| .removeClass('collapsed') | ||
| ; | ||
|
|
||
| adjustHighlights(pre, collapse.attr('data-range'), true); | ||
| }); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
generally w/ steal, you don't include the
.jsThere was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
fixed