11

As the title says, can SO introduce a button/shortcut to be pressed on which the code block/s provided inside question/answer could stretch out fullscreen and can be reverted back.

The need for this feature arises when OP or answerer posts a code that is large and scrollbar appears and it is somewhat distracting to read it fully when mouse goes out of scrollbar area and page scrolls down instead of that code section.

5
  • In which direction? Horizontally or vertically or both?
    – user1907906
    Commented May 4, 2015 at 7:14
  • 3
    @Tichodroma Both. Anyways it dosen't matters bc it will be opening up full screen. Commented May 4, 2015 at 7:17
  • There is a greasemonkey script for this stackoverflow-code-expando Commented May 4, 2015 at 9:43
  • 4
    @AbhinavGauniyal I support your idea that we should have this feature. Some post has a lot of lines and some line even long too. Example, error from log file of android studio. It difficult to focus and sometime don't want to help to answer the question.
    – K.Sopheak
    Commented Sep 16, 2016 at 2:21
  • 1
    Dart and XAML, for example, commonly have deeply nested code that will make the code wide (as well as tall). Zooming in to utilize the whole screen width does not help because the font gets extremely large. Github can be used as a good reference how to make a convenient code block. I highly support this proposal!
    – D G
    Commented Jul 4 at 16:22

3 Answers 3

9

I strongly support this request.

I really hate having to scroll so much when reading code. Over the past year I have been using StackOverflow I have been copy/pasting large code snippets into notepad just so I can read them properly. I've become so engrained in this habit that it wasn't until now I just realised how much time I've been wasting.

And to top it off, I can't even do CTRL+A on the code block to copy / paste into notepad easily :)

I hope this question gets revived after the 5 years it has been here and gets implemented. Clicki

1

I don't think such a feature is necessary. If a post contains code that is not readable in the normal mode of display, the post probably has a problem. The code should be shorted and/or formatted so that it fits in the normal space available.

And I don't think such a feature is what SO wants as a community for good code. A full-screen option would encourage people to drop even more unreadable code into their posts than they already do today.

2
  • 6
    I'm not at all supporting dumping of whole codebase in an answer , but different persons follow different code styles and everyone dosen't limits their code at 80 characters.Moreover as I have mentioned in my question , getting into fullscreen helps in focusing towards problem and avoids ux issues like double scroll jump. Commented May 4, 2015 at 7:31
  • 2
    A lot of posts have code that is formatted in this way. It's better to have an expand button than it is foster an attitude of down-voting people for not formatting their question. Besides, which screen size should people format for? We read this site on anything from ultra-wide monitors down to mobile phones. Commented Jun 12, 2020 at 11:36
0

I also strongly support this feature request that can actually be implemented instantly. The code should be as simple as below.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        .container {
            width: 50%;
            margin: 0 auto;
            position: relative;
        }

        pre {
            background-color: #f4f4f4;
            padding: 10px;
            border-radius: 5px;
            overflow-x: auto;
            font-size: 14px;
            line-height: 1.5;
        }
    </style>
</head>

<body id="body">

    <div class="container">
        <p>
            Double-click on any code block to toggle fullscreen mode.
        </p>
        <pre>Long and wide code goes here!</pre>
    </div>

    <script>
        function toggleFullscreen(element) {
            if (!document.fullscreenElement) {
                element.requestFullscreen()
            } else {
                document.exitFullscreen();
            }
        }

        // Add event listeners to each code block
        document.querySelectorAll('.container pre')
            .forEach(block => {
                block.addEventListener('dblclick', () => toggleFullscreen(block));
            });
    </script>
</body>

</html>

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .