diff --git a/README.md b/README.md index 81bab18..ce28302 100644 --- a/README.md +++ b/README.md @@ -61,6 +61,7 @@ Example: Parameters: * `lang`: (Optional) One of the [supported languages]. Only necessary if the language is not detected from the file extension. * `line`: (Optional) Show line numbers. +* `specificLines`: (Optional) Show only specific lines. Can be a single line number or a range separated with a hyphen (-). Multiple line numbers or ranges can be separated by commas. Examples: @@ -74,6 +75,11 @@ Render PHP file with line numbers: {{#embed:https://example.com/fluffy/kittens.php|lang=php|line}} ``` +Render PHP file with specific lines: +``` +{{#embed:https://example.com/fluffy/kittens.php|lang=php|specificLines=1-3,8}} +``` + ### Refreshing external content To refresh all the pages containing one of the parser functions added by this extension, run diff --git a/extension.json b/extension.json index 6166558..08ad627 100644 --- a/extension.json +++ b/extension.json @@ -74,7 +74,8 @@ "es6": true, "scripts": [ "prism/prism.js", - "bitbucket-edit.js" + "bitbucket-edit.js", + "code-specific-lines.js" ] }, "ext.external-content.code-renderer.styles": { diff --git a/resources/code-renderer.css b/resources/code-renderer.css index eb7bff0..f59f3c7 100644 --- a/resources/code-renderer.css +++ b/resources/code-renderer.css @@ -29,3 +29,17 @@ pre[class*="language-"] { .line-numbers-rows > span::before { color: #72777d; } + +.hide-line { + display: none; +} + +.line-numbers-rows .hide-line, +.line-numbers-rows .hide-line:before { + display: block; + height: 0px; + font-size: 1px; + background: #f0f0f0 !important; + color: #f0f0f0 !important; + text-shadow: none; +} \ No newline at end of file diff --git a/resources/code-specific-lines.js b/resources/code-specific-lines.js new file mode 100644 index 0000000..9fa6e36 --- /dev/null +++ b/resources/code-specific-lines.js @@ -0,0 +1,78 @@ +Prism.hooks.add( 'complete', function( env ) { + var showLineRanges = env.element.parentElement.getAttribute( 'data-show-lines' ); + + if (showLineRanges) { + var showLines = showLines( showLineRanges ); + + var tokenList = tokenList( env.element.innerHTML, showLines ); + + var lineNumbersActive = Prism.util.isActive( env.element, 'line-numbers' ); + + if ( lineNumbersActive ) { + var lineNumberList = lineNumberList( env.element.querySelectorAll( '.line-numbers-rows span' ), showLines ); + + env.element.innerHTML = tokenList.join( '' ) + ''; + } + else { + env.element.innerHTML = tokenList.join( '' ); + } + } + + function showLines( showLineRanges ) { + var showLines = []; + + showLineRanges.replace( /\s+/g, '' ).split( ',' ).filter( Boolean ).forEach( function( currentRange ) { + if (currentRange.includes( '-' )) { + var range = currentRange.split( '-' ); + + if ( range[0] > range[1] ) { + [range[0], range[1]] = [range[1], range[0]]; + } + + for ( var counter = range[0]; counter <= range[1]; counter++ ) { + showLines.push( Number( counter ) ); + } + } + else { + showLines.push( Number( currentRange ) ); + } + }); + + return showLines; + } + + function tokenList( HTML, showLines ) { + var tokenList = HTML.split( /\n(?!$)/g ); + var tokenCount = tokenList.length; + const regex = /(