Resize code blocks?

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:

5 Likes

Maybe we can re-use our “Expand Table” feature to work on codeblocks too…

3 Likes

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. :frowning:

2 Likes

It’s probably a naïve suggestion, but what about a white-space: break-spaces; to have word wrap?

1 Like

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:

6 Likes

@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… :crossed_fingers: :innocent:

2 Likes

I’ve turned on show_copy_button_on_codeblocks and this is a nice interim step. :innocent:
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…)

1 Like