Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
vue-hljs-with-line-number
Advanced tools
vue-hljs-with-line-number - npm Package Compare versions
Comparing version 1.0.5 to 1.0.6
@@ -10,7 +10,7 @@ // jshint multistr:true | ||
| function lineNumbersBlock (element, options) { | ||
| function lineNumbersBlock (target, element, options) { | ||
| if (typeof element !== 'object') return; | ||
| async(function () { | ||
| element.innerHTML = lineNumbersInternal(element, options); | ||
| target.innerHTML = lineNumbersInternal(element, options); | ||
| }); | ||
@@ -188,219 +188,2 @@ } | ||
| /* | ||
| function (w, d) { | ||
| 'use strict'; | ||
| var TABLE_NAME = 'hljs-ln', | ||
| LINE_NAME = 'hljs-ln-line', | ||
| CODE_BLOCK_NAME = 'hljs-ln-code', | ||
| NUMBERS_BLOCK_NAME = 'hljs-ln-numbers', | ||
| NUMBER_LINE_NAME = 'hljs-ln-n', | ||
| DATA_ATTR_NAME = 'data-line-number', | ||
| BREAK_LINE_REGEXP = /\r\n|\r|\n/g; | ||
| format( | ||
| .hljs-ln{ border-collapse:collapse } | ||
| .hljs-ln td{ padding:0 } | ||
| .hljs-ln-n:before{ content: attr(data-line-number) } | ||
| [ | ||
| TABLE_NAME, | ||
| NUMBER_LINE_NAME, | ||
| DATA_ATTR_NAME | ||
| ]); | ||
| if (w.hljs) { | ||
| w.hljs.initLineNumbersOnLoad = initLineNumbersOnLoad; | ||
| w.hljs.lineNumbersBlock = lineNumbersBlock; | ||
| w.hljs.lineNumbersValue = lineNumbersValue; | ||
| addStyles(); | ||
| } else { | ||
| w.console.error('highlight.js not detected!'); | ||
| } | ||
| function isHljsLnCodeDescendant(domElt) { | ||
| var curElt = domElt; | ||
| while (curElt) { | ||
| if (curElt.className && curElt.className.indexOf('hljs-ln-code') !== -1) { | ||
| return true; | ||
| } | ||
| curElt = curElt.parentNode; | ||
| } | ||
| return false; | ||
| } | ||
| function getHljsLnTable(hljsLnDomElt) { | ||
| var curElt = hljsLnDomElt; | ||
| while (curElt.nodeName !== 'TABLE') { | ||
| curElt = curElt.parentNode; | ||
| } | ||
| return curElt; | ||
| } | ||
| // Function to workaround a copy issue with Microsoft Edge. | ||
| // Due to hljs-ln wrapping the lines of code inside a <table> element, | ||
| // itself wrapped inside a <pre> element, window.getSelection().toString() | ||
| // does not contain any line breaks. So we need to get them back using the | ||
| // rendered code in the DOM as reference. | ||
| function edgeGetSelectedCodeLines(selection) { | ||
| // current selected text without line breaks | ||
| var selectionText = selection.toString(); | ||
| // get the <td> element wrapping the first line of selected code | ||
| var tdAnchor = selection.anchorNode; | ||
| while (tdAnchor.nodeName !== 'TD') { | ||
| tdAnchor = tdAnchor.parentNode; | ||
| } | ||
| // get the <td> element wrapping the last line of selected code | ||
| var tdFocus = selection.focusNode; | ||
| while (tdFocus.nodeName !== 'TD') { | ||
| tdFocus = tdFocus.parentNode; | ||
| } | ||
| // extract line numbers | ||
| var firstLineNumber = parseInt(tdAnchor.dataset.lineNumber); | ||
| var lastLineNumber = parseInt(tdFocus.dataset.lineNumber); | ||
| // multi-lines copied case | ||
| if (firstLineNumber != lastLineNumber) { | ||
| var firstLineText = tdAnchor.textContent; | ||
| var lastLineText = tdFocus.textContent; | ||
| // if the selection was made backward, swap values | ||
| if (firstLineNumber > lastLineNumber) { | ||
| var tmp = firstLineNumber; | ||
| firstLineNumber = lastLineNumber; | ||
| lastLineNumber = tmp; | ||
| tmp = firstLineText; | ||
| firstLineText = lastLineText; | ||
| lastLineText = tmp; | ||
| } | ||
| // discard not copied characters in first line | ||
| while (selectionText.indexOf(firstLineText) !== 0) { | ||
| firstLineText = firstLineText.slice(1); | ||
| } | ||
| // discard not copied characters in last line | ||
| while (selectionText.lastIndexOf(lastLineText) === -1) { | ||
| lastLineText = lastLineText.slice(0, -1); | ||
| } | ||
| // reconstruct and return the real copied text | ||
| var selectedText = firstLineText; | ||
| var hljsLnTable = getHljsLnTable(tdAnchor); | ||
| for (var i = firstLineNumber + 1 ; i < lastLineNumber ; ++i) { | ||
| var codeLineSel = format('.{0}[{1}="{2}"]', [CODE_BLOCK_NAME, DATA_ATTR_NAME, i]); | ||
| var codeLineElt = hljsLnTable.querySelector(codeLineSel); | ||
| selectedText += '\n' + codeLineElt.textContent; | ||
| } | ||
| selectedText += '\n' + lastLineText; | ||
| return selectedText; | ||
| // single copied line case | ||
| } else { | ||
| return selectionText; | ||
| } | ||
| } | ||
| // ensure consistent code copy/paste behavior across all browsers | ||
| // (see https://github.com/wcoder/highlightjs-line-numbers.js/issues/51) | ||
| document.addEventListener('copy', function(e) { | ||
| // get current selection | ||
| var selection = window.getSelection(); | ||
| // override behavior when one wants to copy line of codes | ||
| if (isHljsLnCodeDescendant(selection.anchorNode)) { | ||
| var selectionText; | ||
| // workaround an issue with Microsoft Edge as copied line breaks | ||
| // are removed otherwise from the selection string | ||
| if (window.navigator.userAgent.indexOf('Edge') !== -1) { | ||
| selectionText = edgeGetSelectedCodeLines(selection); | ||
| } else { | ||
| // other browsers can directly use the selection string | ||
| selectionText = selection.toString(); | ||
| } | ||
| e.clipboardData.setData('text/plain', selectionText); | ||
| e.preventDefault(); | ||
| } | ||
| }); | ||
| function addStyles () { | ||
| var css = d.createElement('style'); | ||
| css.type = 'text/css'; | ||
| css.innerHTML = format( | ||
| '.{0}{border-collapse:collapse}' + | ||
| '.{0} td{padding:0}' + | ||
| '.{1}:before{content:attr({2})}', | ||
| [ | ||
| TABLE_NAME, | ||
| NUMBER_LINE_NAME, | ||
| DATA_ATTR_NAME | ||
| ]); | ||
| d.getElementsByTagName('head')[0].appendChild(css); | ||
| } | ||
| function initLineNumbersOnLoad (options) { | ||
| if (d.readyState === 'interactive' || d.readyState === 'complete') { | ||
| documentReady(options); | ||
| } else { | ||
| w.addEventListener('DOMContentLoaded', function () { | ||
| documentReady(options); | ||
| }); | ||
| } | ||
| } | ||
| function documentReady (options) { | ||
| try { | ||
| var blocks = d.querySelectorAll('code.hljs,code.nohighlight'); | ||
| for (var i in blocks) { | ||
| if (blocks.hasOwnProperty(i)) { | ||
| if (!isPluginDisabledForBlock(blocks[i])) { | ||
| lineNumbersBlock(blocks[i], options); | ||
| } | ||
| } | ||
| } | ||
| } catch (e) { | ||
| w.console.error('LineNumbers error: ', e); | ||
| } | ||
| } | ||
| function isPluginDisabledForBlock(element) { | ||
| return element.classList.contains('nohljsln'); | ||
| } | ||
| function lineNumbersValue (value, options) { | ||
| if (typeof value !== 'string') return; | ||
| var element = document.createElement('code') | ||
| element.innerHTML = value | ||
| return lineNumbersInternal(element, options); | ||
| } | ||
| /// | ||
| /// HELPERS | ||
| /// | ||
| }*/ | ||
| module.exports = lineNumbersBlock; |
22
index.js
@@ -16,15 +16,17 @@ 'use strict'; | ||
| var i; | ||
| let element = document.createElement('div'); | ||
| for (i = 0; i < targets.length; i += 1) { | ||
| target = targets[i]; | ||
| let code = target.textContent; | ||
| if (typeof binding.value === 'string') { | ||
| // if a value is directly assigned to the directive, use this | ||
| // instead of the element content. | ||
| target.textContent = binding.value; | ||
| code = binding.value; | ||
| } | ||
| hljs.highlightBlock(target); | ||
| hljs.lineNumbersBlock(target, { | ||
| singleLine: binding.value.split('\n').length ==1 | ||
| element.innerHTML = hljs.highlightAuto(`<span>${code}</span>`).value | ||
| hljs.lineNumbersBlock(target, element, { | ||
| singleLine: code.split('\n').length == 1 | ||
| }); | ||
@@ -39,10 +41,12 @@ } | ||
| let element = document.createElement('div'); | ||
| for (i = 0; i < targets.length; i += 1) { | ||
| target = targets[i]; | ||
| let code = target.textContent; | ||
| if (typeof binding.value === 'string') { | ||
| target.textContent = binding.value; | ||
| code = binding.value; | ||
| } | ||
| hljs.highlightBlock(target); | ||
| hljs.lineNumbersBlock(target, { | ||
| singleLine: binding.value.split('\n').length ==1 | ||
| element.innerHTML = hljs.highlightAuto(`<span>${code}</span>`).value | ||
| hljs.lineNumbersBlock(target, element, { | ||
| singleLine: code.split('\n').length == 1 | ||
| }); | ||
@@ -49,0 +53,0 @@ } |
| { | ||
| "name": "vue-hljs-with-line-number", | ||
| "version": "1.0.5", | ||
| "version": "1.0.6", | ||
| "description": "Syntax highlighting with highlight.js for Vue.js 2.x", | ||
@@ -5,0 +5,0 @@ "homepage": "https://github.com/imlinhanchao/vue-hljs-with-line-number", |
@@ -62,2 +62,5 @@ # vue-hljs-with-line-number | ||
| ## Changelog | ||
| v1.0.6 | ||
| - Fix the problem that code block and line number alternately appear. | ||
| v1.0.5 | ||
@@ -64,0 +67,0 @@ - Fixed issue that options spell error. |
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Improved metrics
- Number of lines in readme file
- increased by3.75%
83
Worsened metrics
- Total package byte prevSize
- decreased by-32.07%
13656
- Lines of code
- decreased by-34.65%
315
No dependency changes