Prism plugin Code Folding prototype

[GordonLesti]

Hello,
I'm very thankful for Prism. This pull request is more like a feature request with a prototype. A plugin to fold lines in the code, like some text editors are doing it with functions and loops.
The main idea was to split the text nodes on a newline character and to wrap all nodes inside of the code element that are between a given start and end into a span element that is collapsible.
As said above, this pull request is just a prototype to see if you are interested in a plugin like this.
Known issues at the moment:

• the coding style is ugly and unreadable
• the black background of the Funky theme is not working inside of the span block
• the foldable span elements can not be nested
• the plugin is not tested with other Prism plugins
• there is not a single test at the moment
• not tested under Windows

I have created a small Demo for you. Let me know if you think it would be better to develop a plugin like this outside of Prism.

[Golmote]

Hi! I checked to demo and I admit this looks really promising! ;)

[GordonLesti]

@Golmote do you think it has a chance to be merged if I fix the open issues from above or should I better develop it outside of Prism?

[Golmote]

Yes, it could be merged as a plugin in the official repo, no problem.

Just tell us once you consider it done so we can test it.

[LeaVerou]

My usability 2 cents: I would be opposed to specifying line numbers for collapsed sections. That's very fragile and unmaintainable. It would be good as an override, but not as the only way to collapse sections. Sections should be determined by code structure.

[Golmote]

Haha yes that crossed my mind too. But that would imply Prism has info about the code structure for each and every language we support... That's a huge feature to add, don't you think? I agree it would be awesome though!

[LeaVerou]

True. Alternatively, how about it requires the keep markup plugin and uses <details>/<summary>? That'd be more semantic too.

[GordonLesti]

I like the idea with the keep markup plugin.

[GordonLesti]

I have tested the idea with details and summary and it works pretty well. I have written a small post about it and will close this PR.

[LeaVerou]

Nice! While <details> and <summary> does most of the job decently, there might still be value in a stylesheet-only plugin that makes it more suitable for code folding. E.g. right now the arrow of the summary messes with the code alignment. Also, there is no arrow indicating where the folding region ends.

[GordonLesti]

Hello @Golmote @LeaVerou
I tried the last weeks something like a CSS only plugin for <details> and <summary> combined with the Keep markup plugin, but unfortunately it is not possible with the current browsers to style the elements as expected.
What do you think about replacing <details> and <summary> with something like <span class="prism-details"> and <span class="prism-summary">, combined with the Keep markup plugin and some Javascript that is doing the same behavior as <details> and <summary>?

[LeaVerou]

No, replacing semantic elements with spans is terrible.
What is not possible exactly?

[nlundquist]

I've released my implementation of code folding for Prism here: https://github.com/nlundquist/prism-js-fold

It works via the <details>/<summary> tags suggested by Lea, doing a efficient pass over characters of the input, inserting tags wherever pairs of {} or [] are found. The approach has worked phenomenally for me with JS & JSON and should work just as well any C-like language.

I haven't run into any problems styling the toggle or collapsible regions as desired.