Alter "format as code" button ('Ctrl+K') to detect when your selection is in a list, and format appropriately

Question

Normally when you want to enter code in an answer you can simply paste your code, highlight it and hit the "format as code" (curly braces icon) on the toolbar above your answer ('Ctrl+K' does the same thing). That indents by four spaces to produce something like this:

alert("hello");

Thats all fine and dandy but if you want to include code in a list, that is where the "format as code" button fails, because it always simply adds (or removes) 4 spaces before the highlighted block. I am proposing that the "format as code" function be modified to detect how deep you are in a list and format the code (add spaces) accordingly. For example:

• This is my first list item

  alert("Format as code should indent me by 8 spaces");
  

• This is my second list item

  alert("Format as code should indent me by 8 spaces");
  

  • This list item is indented by four spaces

    alert("Format as code should indent me by 12 spaces");
    

    • This list item is indented by eight spaces

      alert("Format as code should indent me by 16 spaces");
      

Answer 1

I agree this is super annoying and needs to be fixed, but for now there is a simple way to trick the Javascript to do what you want in a few keystrokes, without having to use an external editor. I was always doing that before, or counting spaces by hand, both of which were really cumbersome. So I'd like to share.

Suppose you have something like the following:

code_that_needs_indenting = function() {
    // ... some long boring code
};

Press Ctrl-K to indent it 4 spaces, then insert a character on the line above without indentation:

a
    code_that_needs_indenting = function() {
        // ... some long boring code
    };

Select the entire block (including the character) and press Ctrl-K again. You have now indented the block by 8 spaces.

    a
        code_that_needs_indenting = function() {
            // ... some long boring code
        };

Move the character back to the beginning, and rinse and repeat if you have even deeper nesting in your list:

a        
        code_that_needs_indenting = function() {
            // ... some long boring code
        };

Press Ctrl-K to get your code indented by 12 spaces:

    a            
            code_that_needs_indenting = function() {
                // ... some long boring code
            };

...and so on.

P.S. the process by which I had to generate the blocks above was a real m.f.