Added Line Range plugin and index.html for example

[atomize]

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

<script src="js/prism.js"></script>
<script src="../prism-line-range.min.js"></script>

Adding a data-fetch and data-range attribute to an empty <pre> will trigger Fetch Line Numbers. The data-fetch attribute takes a filepath or valid URL, and the data-range attribute 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.

<pre data-fetch="../prism-line-range.js" data-range="1,5" class="language-js line-numbers"></pre>

The second block would be lines 6-10

<pre data-fetch="../prism-line-range.js" data-range="6,10" class="language-js line-numbers"></pre>

Line Numbers plugin support

Fetch Line Range automatically inserts the correct data-start parameter 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 the data-start attribute 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-range attribute. This does not affect the line numbering.

fetch() and Promise: Under the hood, Fetch Line Range uses fetch() and Promise which 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.

[RunDevelopment]

@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.
We already have the File highlight plugin which does almost exactly the same as yours (apart from the line range), the difference being that it's based on XHRs and used by many already (e.g. prismjs.com).
So rather than making a new plugin, why not make this a new feature of File highlight? This would also remove the necessity for a fetch polyfill but the File highlight plugin doesn't support caching files, so we would have to implement this.

[atomize]

@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.

[RunDevelopment]

@atomize Thank you for taking on this problem!

Don't hesitate to ask me if you have any problems along the way.

[atomize]

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 <!-- The File Highlight plugin is already included into Prism.js build --> -- once I included a script tag to my modified version beneath the call to prism.js - all worked well -- So my question, how do I bake in my modified plugin source to the core, since this plugin is baked in? Also, should we close this and continue discussion of this in a different place? or is here good? =)

[RunDevelopment]

I made ourselves a new home 🏠 #1812.

---

You need to run npx gulp. This will rebuild prism.js.