Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add collapsible code blocks #2425

Open
ReK42 opened this issue Sep 27, 2018 · 15 comments

Comments

@ReK42
Copy link

commented Sep 27, 2018

Issuehunt badges

I do network recon and use Boostnote to track the progress and results. That often involves pasting command line output and device config files into the note as code blocks. These blocks, especially the configs, can be hundreds of lines long.

It would make the note much more readable if code blocks were collapsible when viewing the note, especially if blocks over a certain length (10-15 lines) defaulted to being collapsed.

There is a $60.00 open bounty on this issue. Add more on Issuehunt.

@daiyam

This comment has been minimized.

Copy link
Contributor

commented Oct 1, 2018

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

@ReK42

This comment has been minimized.

Copy link
Author

commented Oct 1, 2018

@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!"
\```
%>
@daiyam

This comment has been minimized.

Copy link
Contributor

commented Oct 1, 2018

@ReK42 Yes, prefaced by %> like blockquotes.

@ReK42

This comment has been minimized.

Copy link
Author

commented Oct 1, 2018

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

@ReK42

This comment has been minimized.

Copy link
Author

commented Oct 1, 2018

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.

@daiyam

This comment has been minimized.

Copy link
Contributor

commented Oct 1, 2018

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

@ReK42

This comment has been minimized.

Copy link
Author

commented Oct 2, 2018

@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

@daiyam

This comment has been minimized.

Copy link
Contributor

commented Oct 4, 2018

@ReK42 what do you think of the following preferences ?

screenshot

screenshot

@ReK42

This comment has been minimized.

Copy link
Author

commented Oct 4, 2018

@daiyam yes, that looks great!

@daiyam

This comment has been minimized.

Copy link
Contributor

commented Oct 6, 2018

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

@ReK42

This comment has been minimized.

Copy link
Author

commented Oct 9, 2018

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

@thorro

This comment has been minimized.

Copy link

commented Nov 18, 2018

Killer feature for me. Any progress?

@daiyam

This comment has been minimized.

Copy link
Contributor

commented Nov 18, 2018

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

@IssueHuntBot

This comment has been minimized.

Copy link

commented May 1, 2019

@BoostIO has funded $60.00 to this issue.


@matheusfaustino

This comment has been minimized.

Copy link

commented May 30, 2019

What I nice feature to have, please.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
6 participants
You can’t perform that action at this time.