Viewing the source code

Question

When doing a CR, it's important to be able to quickly find methods/classes/whatever in the source. Currently, it's just terrible as you get a couple of small scrolling views and the search takes way more time than anything else.

That's specific to CR, as other sites rarely need that much code. There should be a way to

• open a code block in a new tab
• or download all code blocks as a zip file
• or git clone the whole question
• or (at the very least) expand all code block to their full size

or anything else. Scrolling in a posting containing multiple scroll views is a [insert you favorite swear]. The current state of CR is simply unsuitable for CR.

Answer 1

I couldn't agree more. It's very important to copy-paste code into an IDE for a good, detailed, tested review. Unfortunately, copying code in scrolling boxes is not as easy as it should be. It would be nice if you could just click within a box and press Control A, but that's not how browsers work. That will select everything.

Something that could help is a simple button above each block of code to select the text inside the code block, so you can press Control C to copy it. I'd like to emphasize the point of selecting text as opposed to copying to clipboard directly. Copying to clipboard is more complicated and usually implemented by Flash, which I don't want to enable. Selecting text is totally harmless, and easy to do.

For a proof of concept, run the code snippet below. (Another example of the technique on one of my web-tools.)

jQuery.fn.selectText = function () {
    var element = this[0];
    var range;
    if (document.body.createTextRange) {
        range = document.body.createTextRange();
        range.moveToElementText(element);
        range.select();
    } else if (window.getSelection) {
        var selection = window.getSelection();
        range = document.createRange();
        range.selectNodeContents(element);
        selection.removeAllRanges();
        selection.addRange(range);
    }
};   
$('button.select').click(function () {
  $('.editor pre').selectText();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="editor">
<button class="select">Select text</button>
<pre>
def get_data(dir)
  newest = get_most_recent_file_numbers(dir)

  data = {} # might even be able to get rid of this with clever use of Hash.new
  data = $file_prefixes.each do |type, file_prefix|
    file = File.open("#{dir}/#{file_prefix}_#{newest[type]}.csv")
    file.readline
    ???
  end
end
</pre>
</div>

Answer 2

Your first three suggestions suffer from a big problem:

Code on CR is not organized in files!

This makes implementing the very top 3 "fixes" quite a mess, as you'd need to parse the question body for code-blocks and extract them to a separate (where you want to export it to)

Additionally git-cloning / git remote workspaces are not quite as easy as using them is. You're basically asking something close to impossible with the current form of SE in general.

Your "at the very least" point has a relatively simple fix, though.

Use a user-style (or similar), that overrides the max-height: 600px; style-rule for pre

Answer 3

What I do when I want code from the question,

• click the Edit link
• Highlight what I want
• Ctrl + C
• then create a new blank file in Notepad++
• Paste into new file
• select language formatting

then I can easily read, re-write, change tabs to spaces, use the fancy Alt + Shift command to insert all the tabs to the code, or delete an extra tab on all lines of the code, etc., etc., etc.

Answer 4

janos' idea can be easily applied to all code snippets automaticaly. They all seem to start with <pre><code>, so I find them and add the button.

I'd personally prefer to open the snippet in a new tab/window, but this is the next step.

jQuery('pre > code').parent()
        .prepend(jQuery('<button>Select code</button>').click(function (event) {
    console.log(event.target);
    var element = event.target.nextSibling;
    var range;
    if (document.body.createTextRange) {
        range = document.body.createTextRange();
        range.moveToElementText(element);
        range.select();
    } else if (window.getSelection) {
        var selection = window.getSelection();
        range = document.createRange();
        range.selectNodeContents(element);
        selection.removeAllRanges();
        selection.addRange(range);
    }
}));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<pre>
<code>
def get_data(dir)
  lorem ipsum dolor sit amet, consectetur adipiscing elit.
</code>
</pre>

Answer 5

In the meantime, there have been projects doing exactly this to make it easier on the reviewer. From the top of my mind there are at least these two:

• From Q to compiler in less than 30 seconds for Python.
• From new Q to compiler in 30 seconds for C++.

Both are written in the language they target by Edward. While they don't open the IDE for you, all relevant files are saved to your harddisk making the final step quite easy.