Resize code blocks?

Feature
1

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:

Selection_1144
Selection_1144755×657 169 KB

7 Likes
2

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

3 Likes
5

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
6

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

1 Like
7

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):

image
image777×242 12.3 KB

Then a modal will be shown without the horizontal scrolling:

image
image1741×485 41.8 KB

6 Likes
8

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

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
10

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?

1 Like
11

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?

12

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