Add collapsible code blocks #2425

@ReK42 I'm also in need of collapsible block so I will implement that today or tomorrow...

Here the syntax I plan to use:

%>## Title
%>
%>foobar
%>
%>```
%> print "Hello world!"
%>```

What do you think?

@daiyam so each line would need to be prefaced with "%>"? Would it be possible to do it as a block instead, so each line does not need to be modifed? Something like:

%>
## Title

foobar

\```
print "Hello world!"
\```
%>

@ReK42 Yes, prefaced by %> like blockquotes.

@daiyam is a syntax change required at all? I envisioned this as a UI change when the markdown is rendered: all code blocks are collapsible and either all, or just ones with >10 lines, default to being collapsed.

As mentioned, these blocks can reach hundreds of lines. Requiring the user to add a couple characters to the beginning of every line is a significant burden. If a syntax change is required, can a start/end tag be used instead, like how the triple backtick for code blocks currently works?

Edit: Another alternative would be to limit the size of rendered code blocks to 10-15 lines and include a vertical scrollbar to navigate within them.

Looking into it, it appears you're using CodeMirror to render these blocks. CodeMirror has built-in support for dynamic height. Right now the height is always set to auto, which will show the full contents. The collapsing could be implemented by adding a collapse icon above/next to the block and having the onclick toggle the height between auto and a fixed value. There should probably also be a hidden overlay that becomes visible when collapsed and provides a visual hint to the user that there is more content.

@ReK42 sorry, we are talking about 2 different features, my bad 😢 You are looking to collapse all or a part of only the code blocks. That wouldn't need any syntax changes; only some extra settings. Do you have an example/code of what you are looking for?

@daiyam I've attached a quick PoC I drew up. The important bits are all in index.html:

• The style element at line 12285
• The script element at line 12343
• The added button element inside the span.filename element of the code block, at line 12382

boostnote-poc.zip

@ReK42 what do you think of the following preferences ?

@daiyam yes, that looks great!

@ReK42 I've implemented it in the PR #2471.

@daiyam thanks! I've tested it and posted a few issues in the PR thread.

Killer feature for me. Any progress?

@thorro I would need to split my PR to just collapse code blocks.

@boostio has funded $60.00 to this issue.

• Submit pull request via IssueHunt to receive this reward.
• Want to contribute? Chip in to this issue via IssueHunt.
• Checkout the IssueHunt Issue Explorer to see more funded issues.
• Need help from developers? Add your repository on IssueHunt to raise funds.

What I nice feature to have, please.