9

Frequently I've found it necessary to highlight an entire code block (usually to copy elsewhere):

here is code
here is more code
here be dragons

but the only way to do it seems to be to highlight the block by dragging across the whole thing.

I've been through many of the feature requests mentioning this missing feature (usually under the heading "copy all/copy to clipboard"), but I haven't (yet) seen an actual implementation.

Since SO doesn't presently have this functionality, has anyone written a GreaseMonkey/browser extension/magic stylesheet/etc. to add it? If not, I may try my hand at it and post that as an answer.

Improve this question
2
  • @Asad: (i) I'm actually looking for a "select all" button (I have useful things I can do just with selected text using text services), and (ii) that other question contains no implementations that I can see (which I am specifically asking for). Commented Mar 1, 2013 at 5:07
  • 1
    I'm not asking for a copy button! I just want select all :) From there it is trivial to copy, or manipulate with text services. Commented Mar 1, 2013 at 5:09

2 Answers 2

Reset to default
3

EDIT : I found this userscript that fits your description pretty well. It shows a small "Select" link at the corner of code block that can be used to select its contents.

Here you go. Looks kind of ugly (I just stick a button after the pre element), but I'll leave the CSSing to you:

// ==UserScript==
// @name           Copyall
// @namespace      http://example.com
// @include        http://stackoverflow.com/*
// @include        http://serverfault.com/*
// @include        http://superuser.com/*
// @include        http://meta.stackoverflow.com/*
// @include        http://meta.serverfault.com/*
// @include        http://meta.superuser.com/*
// @include        https://stackapps.com/*
// @include        http://*.stackexchange.com/*
// @include        http://askubuntu.com/*
// @include        http://meta.askubuntu.com/*
// @include        http://answers.onstartups.com/*
// @include        http://meta.answers.onstartups.com/*
// @include        http://mathoverflow.net/*
// @include        http://area51.stackexchange.com/proposals/*
// ==/UserScript==

$('pre:has(code)').each(function(){

    //using the XBrowser function from http://stackoverflow.com/questions/985272/
    function selectText(element) {
        var doc = document
            , text = element
            , range, selection
        ;    
        if (doc.body.createTextRange) { //ms
            range = doc.body.createTextRange();
            range.moveToElementText(text);
            range.select();
        } else if (window.getSelection) { //all others
            selection = window.getSelection();        
            range = doc.createRange();
            range.selectNodeContents(text);
            selection.removeAllRanges();
            selection.addRange(range);
        }
    }

    var input = $("<input type='button' value='Select all'/>"),
        that = this;
    input.click(function(){
        selectText($('code',that)[0]);
    });
    $(this).after(input);
});
Improve this answer
6
  • Hm, doesn't seem to work (either here or on SO)... Commented Mar 1, 2013 at 5:33
  • @nneonneo It didn't work on SO, because the @include only specified meta (I've added other sites now). It should have worked on Meta, provided you installed it as a GM script Commented Mar 1, 2013 at 5:38
  • I changed the @include to http://*.stackoverflow.com/*, which I assumed would work. Commented Mar 1, 2013 at 5:39
  • OK, working now. Probably me "correcting" the script wrong :P Commented Mar 1, 2013 at 5:40
  • @Asad - A humble request: Please add the script in stackapps.com. (Add all your scripts there if possible) So that I can directly install it on single click (I am too lazy to install script) :-) Commented Mar 1, 2013 at 5:44
  • 1
    @hims056 I was about to follow your suggestion, but I actually found a much better implementation of this here Commented Mar 1, 2013 at 6:02
0

I took @Asad's code and modified it a bit to suit my style. It needs a little tweaking, but it looks a bit nicer (according to my own odd sense :)

// ==UserScript==
// @name           Copyall
// @namespace      http://example.com
// @include        http://stackoverflow.com/*
// @include        http://serverfault.com/*
// @include        http://superuser.com/*
// @include        http://meta.stackoverflow.com/*
// @include        http://meta.serverfault.com/*
// @include        http://meta.superuser.com/*
// @include        http://stackapps.com/*
// @include        http://*.stackexchange.com/*
// @include        http://askubuntu.com/*
// @include        http://meta.askubuntu.com/*
// @include        http://answers.onstartups.com/*
// @include        http://meta.answers.onstartups.com/*
// @include        http://mathoverflow.net/*
// @include        http://area51.stackexchange.com/proposals/*
// ==/UserScript==

var sheet = document.createElement('style')
sheet.innerHTML = (".neon_selectall_wrap { position: relative; }" +
".neon_selectall { float:right; position:absolute; top:0px; right:0px; font-family: sans-serif; color: #cccccc; }" +
".neon_selectall:hover { color: #00c; cursor: pointer; }");
document.body.appendChild(sheet);

$('pre:has(code)').each(function(){

    //using the XBrowser function from http://stackoverflow.com/questions/985272/
    function selectText(element) {
        var doc = document
            , text = element
            , range, selection
        ;    
        if (doc.body.createTextRange) { //ms
            range = doc.body.createTextRange();
            range.moveToElementText(text);
            range.select();
        } else if (window.getSelection) { //all others
            selection = window.getSelection();        
            range = doc.createRange();
            range.selectNodeContents(text);
            selection.removeAllRanges();
            selection.addRange(range);
        }
    }

    var input = $('<div class="neon_selectall">Select all</div>'),
        that = this;
    input.click(function(){
        selectText($('code',that)[0]);
    });
    $(this).wrap('<div class="neon_selectall_wrap">').after(input);
});

The main change is making the link into a little div that floats at the top-right:

enter image description here

Improve this answer
2
  • There is already a userscript that does this. See this link Commented Mar 1, 2013 at 6:18
  • Yup, saw it. Both are good, but I happen to like this one that we made :) Commented Mar 1, 2013 at 6:19

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.