64

It seems that some people don't understand how the "make code sample" button {} works.

I encounter posts like this all the time:


Incorrect code indent screenshot


The problem appears to be that they first click {}, and then paste in their code, after the initial 4 spaces have been inserted:

enter image description here

enter image description here

When this happens, only the first line is indented, causing the behavior above. This is the only way I can figure out for this to happen.

Of course, selecting all of the code, then clicking {} yields the correct result, even adding the line after the closing }.

I know you can't fix stupid, but is there anything that can be done here? Does anyone else see this often (1-2 edits per evening, I'd say)?

16
  • 34
    Is the click-first-then-enter-code mode actually used by anyone? I feel like all that should do is pop up a box saying "hey, highlight some code first."
    – roippi
    Commented May 13, 2014 at 3:30
  • 11
    @roippi Exactly. I've been playing with the editor, and can't understand how the click-first is helpful. The only thing it does provide is visual feedback of what (one line) of indented => formatted code looks like. Commented May 13, 2014 at 3:32
  • 5
    Some people are lazy and just don't like to format their code. Commented May 13, 2014 at 3:42
  • 12
    It took me a while to figure out that you have to select text before clicking and it's not mentioned anywhere when you click the '?' for help Commented May 13, 2014 at 7:06
  • 1
    @HarryBlargle Isn't that the expected behaviour that we have since the phpBB forums in the 90s? I mean you wouldn't just press the link button without highlighting, right?
    – Theolodis
    Commented May 13, 2014 at 7:30
  • 8
    My point is that (as seen) most people don't know this, and it's never mentioned anywhere. In fact when you click the code button it says 'enter code here' instead of saying 'select some code first' which could lead people to believe that clicking first and then pasting in code is the right way to do it. Commented May 13, 2014 at 7:37
  • 6
    I actually didn't know that button existed until just recently. I had previously been pasting into a text editor, adding some indentation, and then pasting into the question/answer.
    – vmrob
    Commented May 13, 2014 at 8:42
  • Agree 100% with @jmort253, it even gives you a preview so you can see that you have inserted it wrong but people don't take any care. This applies to formatting, grammar and question / answer quality.
    – user692942
    Commented May 13, 2014 at 9:06
  • 3
    That programmers use buttons at all is kind of amusing to me. If I'm typing in a textbox, the last thing I want to do is reach for my mouse. The shortcut is Ctrl/Cmd+K.
    – Cody Gray Mod
    Commented May 13, 2014 at 18:34
  • @roippi and JonathonReinhart: I think click-first-then-insert is a holdover from BBCode days, when it would have inserted [code][/code] and moved the cursor between the two code tags
    – Izkata
    Commented May 13, 2014 at 19:15
  • And if I'm in a "code" mindset, I actually have vim integrated with Firefox (ctrl+i to activate) - 'tis easy to indent there ;)
    – Izkata
    Commented May 13, 2014 at 19:23
  • @CodyGray Pressing Ctrl+K, Ctrl+V would produce the same thing I've described here. Commented May 13, 2014 at 20:22
  • 2
    Thank you for explaining how to use that! I've been doing it manually after only the first line ends up being correct.
    – mauve
    Commented May 14, 2014 at 20:16
  • 4
    I've been using this site for two years and just figured out, by reading this question, that the {} button has extra functionality if you highlight your code snippet first. I thought it was just a useless button that inserts 4 spaces before a single line to show you how to format code snippets. If we want new users to use the button correctly, we should document how it works - I like @HarryBlargle's suggestion of making the text the button generates say "select some code first" instead of "enter code here."
    – Edward
    Commented Jan 9, 2015 at 16:46
  • 3
    It's been two years since this question was posted. Why is this still not fixed?! People still struggle to format their code correctly! This is a real problem for languages like Python, where indentation can make or break code!
    – Aran-Fey
    Commented May 19, 2016 at 11:56

5 Answers 5

26

There are a few ways you could try and "fix stupid" here. The best approach, in my opinion, would be to adopt some behaviour that tries to keep indentation consistent as the user enters data with newlines into the editor box. This includes just typing code into the box, which can be frustrating when you're 3 levels deep and you hit return, then have to type 12 space characters to get the caret where you need it.

Arguably, this kind of thing would have been more difficult a few years ago, which might have made it seem like too much effort to add to the simple markdown input box on SE sites. Nowadays, it's not terribly difficult. The DOM oninput event can be used to detect all types of input, including space. When capturing the event, if you have a reference to the previous value, you can detect the data that's been entered and adjust it if necessary.

I've thrown together a rudimentary example (I only tested in Chrome, it's not intended to be a complete solution). As an added bonus, the code will (crudely) detect if you paste multiple lines of code with varying levels of indentation and automatically indent it as a code block.

7
  • 4
    Very nice! Works in Firefox too, BTW. Commented May 13, 2014 at 14:07
  • 9
    I would argue that any "stupid" is in the UI, not in the users; the behavior of the button is unintuitive, especially for the kind of formatting button it's associated with. Commented May 13, 2014 at 18:38
  • 23
    May I add suggestion to make TAB button work by producing 4 spaces rather than jumping to submit button? Often when coding, IDE's tab does just that - indentation - and tabing feels natural way of accomplishing it, and lack of it constantly trips me up.
    – LB2
    Commented May 13, 2014 at 18:44
  • 1
    Very nice work, I would love to see this actually being added. @LB2 Agreed, this gets me all the time. If the tab key would work as expected my life would be a lot easier. Commented May 13, 2014 at 19:07
  • @LB2 You might be interested in the answers of this question about programs which open a textarea's content in your favorite editor/IDE. It's a lot easier to improve ill-formatted text that way.
    – ComFreek
    Commented May 14, 2014 at 19:53
  • 1
    Do NOT change the behavior of TAB. This would create a keyboard trap for users who rely on keyboard-only. Yes, it would be nice for most of us who can easily handle a keyboard and mouse, but that doesn't excuse changing it for those who need it. Commented May 23, 2014 at 18:01
  • @LB2 Same here! It's super confusing when I press tab and then it goes to the submit button.
    – 10 Rep
    Commented Sep 4, 2020 at 16:45
6

I don't think that many people type code into the box, they copypasta.

Actually, I would personally discourage writing code in there; normally you should have a testcase somewhere else prepared that you ran through a compiler. For good questions (and also answers) there should have been some thought about the code, which usually involves having it somewhere else first.

Also the symptom you are seeing seems to be coming mostly from copypaste, otherwise it would only be the first line that is indented.

Assuming you are right, there are probably two main ways people put in code.

First button, then paste

For this we should probably have a button "paste code". This button would open a popup, which then will be filled with your copypaste, and then is pasted into the edit field with 4 spaces indentation. Optionally there could be a "reformat indentation" tickbox that will try to guess proper indentation (depends on language used).

First code, then button

For this there should be a button that only is clickable when you have selected something (one char enough? at least three?), otherwise greyed out. It will indent by 4 spaces all the lines that are part of your selection.

Since this will likely make the "paste code here" button useless in that situation, it could be greyed out while something is selected.

Or to be extra fancy, the button at the current "code" position could change, depending on whether you have something selected or not.

4
  • 8
    Depends. If I'm asking a question, I'll definitely copy-paste. When writing answers, I type the code into the answer box about 90% of the time. It has to be something really complicated that I'm answering, forcing me to open an editor and a compiler, before I have any need to copy-paste. That said, I never use the toolbar button and am furious when I'm on a computer without this installed.
    – Cody Gray Mod
    Commented May 13, 2014 at 18:29
  • @CodyGray: Intresting. I like to make sure that the code I have in my answers actually compiles/works. Maybe there is a difference in the languages, or types of questions to answer? Also I think the OPs intention here was mainly to "fix" questions.
    – PlasmaHH
    Commented May 14, 2014 at 8:20
  • 1
    On average, it takes too much time and effort to fire up the whole toolchain just to compose a simple answer. I usually crank out code that compiles/works. If it doesn't, it's usually something painfully obvious, like a missing semicolon. I figure if the asker can't figure that out, they are beyond help. (Totally agreed on the problems and solutions Jonathan is proposing here in the question, though.)
    – Cody Gray Mod
    Commented May 14, 2014 at 9:19
  • @CodyGray: We are probably on quite different environments then. For me depending on the size of the code (and place I am currently), I use the geordi irc bot, ideone.com or just edit a file with vim...
    – PlasmaHH
    Commented May 14, 2014 at 9:28
5

Suggestion

Instead of inserting

    enter code here

clicking the button should just insert

```
enter code here
```

Side note

When this happens, only the first line is indented, causing the behavior above. This is the only way I can figure out for this to happen.

I can also imagine that it happens as follows:

User pastes code unindented:

int main() {
    cout << "hello" << endl;
}

User sees:

int main() { cout << "hello" << endl; }

User wonders why code isn't rendered as code, has read somewhere about "indent by 4 spaces" and starts adding 4 spaces in the first line:

    int main() {
    cout << "hello" << endl;
}

User sees:

int main() {
cout << "hello" << endl;

}

User is happy that code is rendered as code, but doesn't care about missing indentation and doesn't notice that the last line isn't rendered as code, and consequently does not add 4 spaces to the remaining lines.

I suspect this is especially the case with Python code, since there is no closing curly brace that isn't rendered properly, and the function body is hopefully already indented by 4 spaces due to strong convention.

3
  • At the time this question was written, SO didn't support the flavor of Markdown which supported code "fences". Commented Sep 4, 2020 at 14:53
  • 2
    I know, but now it does, so I think this would be a good solution.
    – mkrieger1
    Commented Sep 4, 2020 at 16:03
  • I agree, this would at least prevent broken code in OP's scenario. (IIRC, there was a feature request for SO to promote code fences over spacing now that it works. Hopefully, if fences become more commonly used it'll reduce the frequency of the scenario you describe.)
    – BSMP
    Commented Sep 4, 2020 at 19:30
1

I already suggested this in this answer, but I'm posting it here as well since it also solves the problem mentioned in this question. I'm not going to make this answer as detailed as the other one, since posting the details here would be mostly repeating the other answer.

The Insert Snippet button is very user-friendly since basically everything the user has to do is enter their code in the dialog box and then press "Save & insert into post", and it does the indentation and all the other necessary formatting for you. The Code Sample button, on the other hand, isn't at all as user friendly, as you explained in your question. So my suggestion is to make the Code Sample button act like the Insert Snippet button - Open a dialog box similar to the Insert Snippet dialog box where users just need to enter their code. Something like this:

enter image description here

This dialog box would appear when no text is selected, instead of adding enter code here indented 4 spaces. If text is selected, it would indent it to make a code sample like it already does.

As it is currently, the user will just see one line of enter code here indented 4 spaces, and will have to guess that all lines need to be indented 4 spaces, which isn't necessarily obvious for new users. This feature would have the advantage of making the Code Sample button as easy to use as the Code Snippet button without adding a useless "Run" button.

1

Since nothing has happened on this front for years, I hereby phrase out the simplest possible fix, which might be a bit hackish but would work perfectly fine:

When pressing the {} button without any text/code being selected, then instead of inserting

My foo quobez this wun:

    enter code here

it should insert

My foo quobez this wun:

Enter code here, then select it and press the “Code sample” button again

(as before, it should be pre-selected).

That would prevent the confusion between Markdown indentation and code indentation, which really is a persistent problem in particular when new users post questions about Python or Haskell (where the indentation can actually make a semantic difference and it's often not clear whether the problem that's asked about is really due to wrong indentation or if that's merely an artifact of the Stackoverflow format).

I doubt anybody would find this change controversial, and it would be trivial to implement, so please do it.


In fact this proposal would basically retain the old behaviour: if you simply press the {} button twice, then the auto-inserted text gets indented, just like the currently auto-inserted text is. So even if somebody for whatever reason relies on that, they would still be fine.

2
  • 1
    I would suggest using the word "select" rather than "mark". At least in my dialect, "select" means drag the cursor over something to highlight it. Commented Jul 11, 2018 at 16:52
  • You're right, that's a better word. Commented Jul 11, 2018 at 18:04

You must log in to answer this question.

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