Prism - Code folding with details and summary

Nov 15, 2016 JavaScript Prism

I have started development of a code folding plugin for Prism syntax highlighting. The comment by Lea Verou showed me that the details and summary tags combined with the Keep markup plugin are a more comfortable solution.

Conditions

The idea from above is just possible with the new details and summary tags and the Keep markup plugin.

details and summary

The details and summary tags are pretty new. We can hide everything in the details tag except the content of the summary.

Example

Here a small example.

<details>
    <summary>Here is the summary</summary>
    <p>Here a paragraph that can be hided.</p>
</details>

Keep markup plugin

The Keep markup plugin will make it possible to use HTML tags inside of the code element. In our case details and summary.

Code folding

We just have to add <details><summary> infront of the starting line, a </summary> in front of the next line and </details> in front of our ending line. We can add the attribute open="true" to the details for initial open details. Here a small example with the HTML code from above.

<details>
    <summary>Here is the summary</summary>
    <p>Here a paragraph that can be hided.</p>
</details>

<pre><code class="language-html"><details open="true"><summary>&lt;details&gt;
</summary>    &lt;summary&gt;Here is the summary&lt;&#x2F;summary&gt;
    &lt;p&gt;Here a paragraph that can be hided.&lt;&#x2F;p&gt;
</details>&lt;&#x2F;details&gt;</code></pre>