Added Line Range plugin and index.html for example#1810
Added Line Range plugin and index.html for example#1810atomize wants to merge 1 commit intoPrismJS:masterfrom
Conversation
|
@atomize, that's an awesome plugin. I really like the idea and I think that Prism should definitely support this feature. But I don't think that there needs to be a new plugin. |
|
@RunDevelopment, hey there & thanks for the speedy reply! I'm glad you think this feature is useful. Ohh... Aha! The File Highlight plugin does seem to be just a small step away from having the ability to split line ranges and stay efficient. I would be happy to take this on and see what implementing the efficient line splitting feature in the File Highlight plugin might require. |
|
@atomize Thank you for taking on this problem! Don't hesitate to ask me if you have any problems along the way. |
|
Sure thing, I have a question actually... I have successfully extended the prism-file-highlight.js to include this functionality, no fetch no promises, and it works just fine as it did, caching the response and the DOM etc.... However, as I was testing it didn't work at first, until I saw the comment in the plugin's index.html reading |
Fetch Line Range
A plugin for Prism.js -
Efficiently display a range of line numbers from a fetched source file
See an example here. Source for this example in the docs/ folder
How to use
Include prism-line-range.js in your markup after you call prism.js
Adding a
data-fetchanddata-rangeattribute to an empty<pre>will trigger Fetch Line Numbers. Thedata-fetchattribute takes a filepath or valid URL, and thedata-rangeattribute expects a comma separated value of integers that describe the desired range of lines to display (1,15). The markup for some code chunks might look like this:The first block would display the first 5 lines.
The second block would be lines 6-10
Line Numbers plugin support
Fetch Line Range automatically inserts the correct
data-startparameter for use with the Line Numbers plugin. This way, the line numbers displayed will correspond correctly with the code file that was fetched. you can override this functionality by setting thedata-startattribute on your<pre>element manually, and Fetch Line Range will use it instead of injecting a value.Caveats
Whitespace Normalization: If you are using the Whitespace Normalization plugin with Prism, leading and trailing empty lines are stripped even if included
data-rangeattribute. This does not affect the line numbering.fetch() and Promise: Under the hood, Fetch Line Range uses
fetch()andPromisewhich are (wtf let's get a move on =) not supported by all browser environments. For these cases there is a minified version with Promises and fetch() polyfilled in the smallest manner I could find (in my home repo). The resulting polyfilled plugin is a whopping 10.8kb, compared to without the polyfills of ~1.6kb.