Resize code blocks?
The discussion revolves around the feature to resize code blocks in posts. ganncamp initiated the conversation, seeking a feature or theme to allow readers to resize code blocks, especially when dealing with logs.
A potential solution was proposed by Falco to reuse the “Expand Table” feature for code blocks. ganncamp experimented with CSS to add vertical resize, but encountered issues with code block height.
Canapin suggested using white-space: break-spaces; for word wrap, but ganncamp explained that code blocks should not wrap.
martin shared a feature to fullscreen code blocks, which can be enabled by setting show_copy_button_on_codeblocks. This feature adds a fullscreen button to code blocks with horizontal scroll, and ganncamp found it to be a nice interim step.
However, Jose_C_Gomez encountered issues with the copy button not showing, and martin clarified that the expand button only shows if the code block scrolls horizontally.
The discussion concludes with ganncamp reiterating the need for inline resizable code blocks, citing limitations with the current fullscreen feature.
I’m looking for a feature or a theme that would allow me, as a reader, to resize code blocks in posts.
Why? We spend a lot of time looking at logs, and depending on the environment, there can be a lot of “preamble” on each log line. Here’s an example:
Maybe we can re-use our “Expand Table” feature to work on codeblocks too…
Well, I haven’t figured out horizontal resize, but I was able to add vertical resize with some CSS:
// Scrollable code blocks
.hljs {
resize: vertical;
height: 515px;
max-height: unset;
}
Edit: Well… nevermind. I just realized that when the code block is short, that^ makes the div too tall. 
It’s probably a naïve suggestion, but what about a white-space: break-spaces; to have word wrap?
I actually did some work earlier in the year to fullscreen code blocks. First, you have to have the show_copy_button_on_codeblocks setting enabled. Then, any code block that has a horizontal scroll will have 2 buttons – the copy button and the fullscreen button (the copy button will be there regardless):
Then a modal will be shown without the horizontal scrolling:
@Canapin you really don’t want code blocks to wrap. That’s actually why I format 99% of the posts that I touch: to put the things that shouldn’t linewrap in code blocks.
And thanks for the tip @martin. I may try this in the meantime, but I’m still holding out hope for inline resize… 
I’ve turned on show_copy_button_on_codeblocks and this is a nice interim step.
Worth noting that you have to actually mouseover the code block for the buttons to show up. I thought at first it wasn’t working.
And on the topic of inline resizable code blocks, it might be worth pointing out that the Data Explorer SQL editor is fully resizable. (I know the page is built differently, but…)
So when I enable show_copy_button_on_codeblocks it doesn’t show the copy option (or the expand). Is there something else I’m missing?
The expand button will only show if the code block scrolls horizontally. I am not sure why the copy button wouldn’t show. It is hidden until you hover the code block, maybe that’s it?
I’ve been quite for a while, but I still want to be able to expand code blocks inline.
Right at the moment, I’m viewing code in the popup. And the reply/quote feature apparently isn’t available. 
