57

If someone uses backticks for a whole code block, you end up with ugly multi-line bland emphasis that won't do any syntax highlighting, like this:

string foo = "hello world"; Console.WriteLine(foo); Console.ReadKey(true);

Several times in the last month I've needed to edit a post to change that style to the normal indentation:

string foo = "hello world";
Console.WriteLine(foo);
Console.ReadKey(true);

This never used to happen, but I've recently come across it several times. What's going on here? Has something changed to make the former style more easily discoverable, or the latter style harder? Or, is nothing going on, and it's my imagination or the luck of the draw? And if this is an issue, what do we do about it?

19
  • I haven't seen that much in java. Commented Mar 7, 2017 at 22:23
  • 11
    From this related question, I think a good feature request would be to automatically convert the markdown into a full code block when there is a newline inside an inline code block. Commented Mar 7, 2017 at 22:24
  • 1
    In terms of "why?" I don't think we have a way of knowing without asking people that do it. In terms of "what do we do about it?" I think you've answered your own question - just edit it, there really isn't more that we can do. Commented Mar 7, 2017 at 22:26
  • 44
    Probably the "why?" is "Because GitHub"... Commented Mar 7, 2017 at 22:31
  • 4
    @MikeMcCaughan: That would seem to explain misuse of fenced code blocks (which don't actually work on SO proper), but not sequences of one-line inline code spans to fake a code block. Commented Mar 8, 2017 at 3:33
  • @NathanTuggy Curiously, I do have the impression that, as of late, there has been more misuse of fenced code blocks down at [haskell]. As you say, though, this isn't necesarily the same phenomenon, and also I might just be seeing things.
    – duplode
    Commented Mar 8, 2017 at 3:55
  • 29
    Look at this from the perspective of someone who has not used this editor before. If you are typing along and then click the code sample button in the editor, it inserts some filler text enclosed in back ticks. They just start thinking that's how you insert code. Nothing tells you to do it the "proper" way by pasting the code, selecting it, and then clicking code sample. Frankly I find the indentation thing annoying to get right in the SO editor because of the way that button works. Commented Mar 8, 2017 at 7:59
  • 7
    Something that users blessed with good monitors and eyesight may not realise is that the people who do this can't necessarily even see that the formatting is wrong if they look in the preview section. On my monitor at work, where I am now, the grey background of Stack Overflow's codeblocks and the white background of posts in which they appear are exactly the same colour; I had to click 'edit' to see which style was used in this question. Without being able to see the ugly grey lines that the backtick approach causes, there's no clue to the user that they've screwed up.
    – Mark Amery
    Commented Mar 8, 2017 at 11:37
  • 2
    It always happened, as far as I know it actually happens less now than in the past. Commented Mar 8, 2017 at 14:14
  • 1
    Happens all the time in JavaScript and HTML tags.
    – canon
    Commented Mar 8, 2017 at 14:24
  • 2
    @MikeMcCaughan It's not just GitHub. Any Markdown implementation which follows the CommonMark spec must support fenced code blocks: spec.commonmark.org/0.27/#fenced-code-blocks
    – Ajedi32
    Commented Mar 8, 2017 at 14:24
  • 2
    See also: meta.stackexchange.com/q/125148/192171
    – Ajedi32
    Commented Mar 8, 2017 at 14:25
  • 2
    @4castle personally, even a single line of code should be a code-block in my opinion. Back-ticks should only ever be used as described... "inline", as part of a sentence to highlight variable names etc. I even prefer code-blocks for RegEx if I'm completely honest.
    – user692942
    Commented Mar 9, 2017 at 11:08
  • 2
    Welcome to the club.
    – SeinopSys
    Commented Mar 9, 2017 at 17:16
  • 1
    I can't comment on if it's getting worse, but it was common enough not to be surprising a few years ago when I was earning my Gold Review Badges waiting for Civ's AI to play its turns. Commented Mar 9, 2017 at 19:50

6 Answers 6

26

If you see it, just edit it.

I don't think there's anything that has changed internally to cause this sort of behavior, but the easiest solution to this problem is just to edit it out if you see it.

8
  • 2
    A workaround is indeed an easy solution, but the best solution would be prevention, for example in the form of a warning message.
    – CodeCaster
    Commented Mar 8, 2017 at 14:29
  • 1
    @CodeCaster one would argue that they have the preview to warn them...
    – Braiam
    Commented Mar 8, 2017 at 14:45
  • 3
    @Braiam If they don't know that there's a better way to do it, then the preview doesn't help. If that's how someone thinks SO formats it's code blocks, they may think it sucks, but feel they have no choice but to use it anyway.
    – Servy
    Commented Mar 8, 2017 at 14:56
  • 3
    There is one thing i don't like though, when you hit the tab, it focus on the tag list instead of auto put 4 spaces... Sometimes i directly write code and it's annoying to be focused back into tag list because i often accidentally push it instinctively thinking it's going to put 4 spaces... Commented Mar 8, 2017 at 20:56
  • 2
    I appreciate that it's a lot of extra work and we should just edit it. But the system seems at least smart enough to implement an automatic conversion to a block of code using inline backticks, no?
    – user7236046
    Commented Mar 9, 2017 at 11:21
  • @DanielJames: Honestly I remain unconvinced that this is a problem so large that we need to have automated systems in place to mitigate it. It's easier and more straightforward to spend a minute (if you can spare it) to edit it. No harm in leaving a comment to the OP asking them to be mindful of it, either.
    – Makoto
    Commented Mar 9, 2017 at 17:28
  • 1
    "but the easiest solution to this problem is just to edit it out if you see it...." - Why is that the easiest? It seems like using an computer/algorithm to do it would be easiest for most users since it relieves them from doing it.
    – jww
    Commented Mar 10, 2017 at 14:39
  • @jww: I refer you to my earlier comment. I'm not convinced that this is such a wide-scale problem that automation is truly warranted here.
    – Makoto
    Commented Mar 10, 2017 at 17:21
17

I always think the help icon is too much hidden:

Help Icon

We should make it more visible to new users. Maybe some flashing blue point like we had in documentation. This could be there on the first 3 posts.

The main problem is, that most users know BB-Codes and never heard about markdown. Backtick is more like the BB-Code [code][/code] than 4 indents.

5
  • 1
    Honestly, if someone can't be bothered to find out how a technology works before attempting to use it, babysitting them by making the "Help" icon more prominent isn't going to change things. Commented Mar 9, 2017 at 19:20
  • 1
    @LightnessRacesinOrbit Like it or not, most people are in a rush and aren't going to go through a tour or read a help page first before trying something. I think it's worth adding some additional unobtrusive feedback for new users. Commented Mar 9, 2017 at 19:30
  • 1
    @NateBarbettini: Why do you think making the "distracting" information more prominent will help when these people are "in a rush"? Honestly, they're still not going to read it. And personally I have no sympathy; they can come back when they're not "in a rush", or improve their time management skills. This is not a support helpdesk. Commented Mar 9, 2017 at 19:31
  • 1
    @LightnessRacesinOrbit Because some visual feedback (or a banner that shows up the first time you use a large Github-style code block) could help people understand the correct syntax to use here. Commented Mar 9, 2017 at 19:33
  • 1
    @Nate: These people don't care. They won't read anything. They don't even look at the preview pane, which they have to scroll past to get to the "submit" button. Commented Mar 9, 2017 at 19:44
11

I will adress the "what do we do about it?" part of the question.

Because this is the github style, and github is used by many developers, stackoverflow should just add support for the syntax.

Render multiline backtick-style code blocks the same way as the indented codeblocks, and only treat them as inline code snippets if they are actually placed inline. Newly posted content should automatically transformed to one syntax type (probably the indent). There is already precedence for modifying content like this, in the automated removal of salutations.

Don't bother improving the help. Many new users don't read it anyway so it won't address the problem.
Don't bother adding a warning dialog. That's just annoying and violates the principle of least suprise.
Don't bother editing old content. Boring busy work and you have better things to do with your time.

14
  • Almost none of the instances of people using inline code formatting when they should be using a code block involve that syntax. I think I've seen someone doing that maybe once or twice. Unless it's a problem in different tags than those I frequent, I don't think that this is a major source of the problem here.
    – Servy
    Commented Mar 9, 2017 at 18:05
  • Which Syntax are you talking about? There are triple backticks or single backticks. They both work inline. And they both kinda "work" on multiline but don't look good. Both can be fixed by automation.
    – wim
    Commented Mar 9, 2017 at 18:09
  • I see the triple-tick syntax quite often in the javascript tag, and other related web-technology tags. I expect it's because JavaScript is used in a very high proportion of projects in GitHub, whereas C#/.NET (which I believe you specialize in, @Servy) has a lower percentage. That's based on a post here: github.com/blog/2047-language-trends-on-github Commented Mar 9, 2017 at 18:10
  • 7
    People are posting large code snippets with single backticks. If they weren't formatting it properly because they were used to GitHub, then they'd be using triple backticks, but I'm just not seeing that, so that doesn't make sense as an explanation. Handling that case therefore wouldn't address the problem, because that's not the syntax people are using.
    – Servy
    Commented Mar 9, 2017 at 18:11
  • @Servy Yes. I'm suggesting the single backtick style can be automatically fixed up as well. Why not?
    – wim
    Commented Mar 9, 2017 at 18:12
  • @Servy Just because you're not seeing it, doesn't mean it's not happening... Commented Mar 9, 2017 at 18:13
  • 2
    @wim Well for starters it'd break all of the posts that are currently using it correctly to mean what it's meant for the entire existance of the site, all so that a handful of people that are using it inappropriately will have it get fixed. That'd cause more harm than good.
    – Servy
    Commented Mar 9, 2017 at 18:15
  • @MikeMcCaughan Sure, but I'd like to see some compelling evidence that this is actually happening a fair amount, given that I've seen virtually none of it (when it's the kind of thing that I would notice, as I spend a lot of time reviewing low quality posts on the site). If someone could actually present some indication that that specific syntax is actually used a lot; enough for it to be worth supporting, and that it's simply in tags that I don't frequently, then I'd be more than happy to support adding it.
    – Servy
    Commented Mar 9, 2017 at 18:16
  • ...it'd break all of the posts that are currently using it correctly <-- example of one, please? I am not aware of any correct use of multi-line inline, but if there is one it might change my opinion on the matter.
    – wim
    Commented Mar 9, 2017 at 18:18
  • @wim You want an example of a use of an inline code snippet that should actually be rendedered inline?
    – Servy
    Commented Mar 9, 2017 at 18:20
  • 2
    I want an example of a use case of a multi-line inline code snippet that should not be a code block instead.
    – wim
    Commented Mar 9, 2017 at 18:20
  • 2
    @wim there isn't one, you shouldn't be able to have a "multiline" "inline" it's contradictory. Back-ticks are for "inline" code references (variable, method, class names etc.), I'd be inclined to argue they should never contain even a line of code.
    – user692942
    Commented Mar 9, 2017 at 19:11
  • 2
    @Lankymart Yes. That's the argument I'm making. But Servy seems to be suggesting there is a legitimate use-case that we could be missing ...
    – wim
    Commented Mar 9, 2017 at 19:13
  • @wim Servy doesn't understand what you're suggesting, as evidence of this note his reply clearly misses your point that you've made clear to everyone else: "You want an example of a use of an inline code snippet that should actually be rendedered inline?" I've had this sort of problem with him before. There's nothing productive to come out of these kinds of discussions with him.
    – AaronLS
    Commented Mar 10, 2017 at 16:16
7

Maybe I'm way off, but I suspect it's pure human nature.

Putting backticks around copy-pasted code is much easier than indenting each line by 4 spaces. People are lazy. They will do whatever requires the least effort.

Also, people are used to GitHub's fenced code blocks. If you try that on SO, you get:

var text = 'Hello World!'; console.log(text);

That isn't what they want, so they try reducing the number of backticks to one:

var text = 'Hello World!'; console.log(text);

By then, their lazy nature has already done too much work, so they just post it as-is.

This is just my personal theory; you have the right to disagree. :)

2
  • 1
    Sound reasoning and you're probably not far off, unfortunately it's the same old problem across multiple aspects of the site. Some people are just too lazy to do things properly. If only they realised they can just copy paste their code, select it with the mouse and click the { } button on the editor to indent it all at once, but maybe even that is just too much work as well. O.o
    – user692942
    Commented Mar 9, 2017 at 19:15
  • 3
    @Lankymart At the risk of exposing myself as dumb, I have to honestly say I never knew the { } button indented multiline code. I'd used the inline behavior, and I assumed that was all the button did. Perhaps something in the UX could be improved here?
    – RyanZim
    Commented Mar 9, 2017 at 19:31
5

My, subjective, experience us that it's newcomers who tend to use back ticks as shown in your example, and there doesn't seem to be an increase in this - I frequent the review queues and can't say there's been a change. I just edit them out and figure that they will understand the difference.

Perhaps I am being naive, but beyond this, I've not been bothered by it for new users.

If a user has a few posts, or has accumulated a bit of rep that shows, they have made a few posts, for example, 150 rep or more, I'll edit and leave a comment,as then I'm annoyed, as I figure if you've been around the site long enough it's easy enough to discern the preferred formatting.

Beyond this, I don't see it as a major problem to warrant changing our guidelines for new users, as most people get the hang of it pretty quickly.

2

To answer the "what do we do about it?" part of the question, I'd suggest fixing one thing that has annoyed me, and might be part of the cause of the problem (though I have no evidence for this). This annoyance is the Tab key behavior. So far only Antoine Pelletier has mentioned it in a comment, but I think it needs to be discussed, even if the discussion is only "No, we have evidence that that's not going to help".

Currently, if you're editing an answer and you hit Tab or Shift-Tab, the cursor focus leaves the edit box and goes elsewhere, either to the "Post Your Answer" button or to the Search box in the page header. This is appropriate behavior for a website, but when I'm typing an answer into Stack Overflow, my brain is in "code editor" mode -- which means that I expect Tab and Shift-Tab to indent or dedent.

I'd like to see the answer-edit box capture the Tab and Shift-Tab keystrokes and, instead, have them indent or dedent the currently selected block. (Or, if no block of code is selected, Tab would insert indentation spaces* at the current position, and Shift-Tab would dedent the current line). If this is implemented, it might also be nice to capture the Backspace key and have it act in an indentation-aware fashion, deleting one "level" of indentation (4 spaces by default).

One possible complication to all this is that the code that people are inserting may have all kinds of different internal indentation. But since Markup requires 4 spaces of lead indentation to define a code block, that's what Tab and Shift-Tab should do: indent the selected lines just enough that they can become a code block. That way, I can type something like:

def sample_python_code():
  print("I like 2 space indentation")
  if True:
    print("but only when answering Stack Overflow questions")
    if False:
      print("because I like not having a horizontal scrollbar when I type a lot")

into the answer editor. When I select those lines (or the 20 lines of a real code example) and hit Tab, it will insert precisely four spaces at the front, to become:

    def sample_python_code():
      print("I like 2 space indentation")
      if True:
        print("but only when answering Stack Overflow questions")
        if False:
          print("because I like not having a horizontal scrollbar when I type a lot")

which, in turn, becomes a proper code block that looks like the first example in this answer. (This example got recursive in a hurry, since I had to use a code block to show what I meant.)

I have no evidence that the lack of Tab-key functionality is causing this issue. After all, users bothered by it (like me) could easily just highlight a code block and hit the {} button, or else copy their code into any programming editor and hit Tab once to insert the four spaces they need. But it's still worth discussing, since it's a UX principle that any obstacle you put in the path of your users will hinder at least some of them from accomplishing the goal. So perhaps the lack of Tab-key functionality is part of the cause; and even if it isn't, it's still something that would be nice to have.

* To try, perhaps in vain, forestall the inevitable "tab characters vs. space characters for indentation" debate... I propose that the behavior of the Tab key be exactly identical to what happens now when you hit the {} button in the answer editor. Since that button inserts space characters, so would the Tab key in the answer editor.

You must log in to answer this question.

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