17

When I write code using JS/HTML snippet editor (orange icon):

and paste code which contains one or more tab () characters as line indentation, then the snippet editor shows me this:

The same code in the answer "preview" looks like this:

While the same code in the answer editor looks like this:

So, we see three different places where code is viewed have different indentation for the line console.log('b'). This inconsistency often forces the author to put "blind" line indentation fixes into the snippet editor to ensure the code is properly formatted when rendered.

My proposition: let's show code indentation in a consistent way (especially in the snippet editor and answer editor/preview)


For reproducibility, here is the snippet used for this question:

function f() {
  console.log('a'); // I use 2 space to line indentation
	console.log('b'); // I use tab to line indentation
}

3
  • Does clicking the Tidy button in the editor fix it? The trick here is, do we take someone's pasted code and replace all of their tabs with spaces? Even if all lines were indented with tabs? Or only in cases where there is a mix? How about if the user indented with three spaces in some lines, tabs in others, a mix of tabs and spaces in yet others? Commented Feb 27, 2019 at 15:38
  • 11
    Counter-proposal: don’t use tabs for indentation, you heretic!
    – Cody Gray Mod
    Commented Feb 27, 2019 at 16:39
  • 1
    counter-counter-proposal: tabs take less bytes, are resizable at display, are actually made for indentation (and can prevent some indentation horrors i've seen, like "i use 2 spaces here, 3 there and 5 elsewhere"), let my people go, you dictator!! (mmh maybe was it too harsh a word? :P)
    – Kaddath
    Commented Feb 28, 2019 at 11:06

1 Answer 1

3

The "tidy" button replaces tabs with spaces, so pressing it will fix indentation issues - but, some people like tabs and their existing code styling.

Note that tabs in the HTML and CSS sections are also inconsistent, it's not only the JS section that has the issue.

Because the editor (and most answers that contain snippets) use 2-space indentation, a possible solution for viewed code blocks in posts would be to set the tab-size style of <code> inside .snippet elements:

.snippet code {
  tab-size: 2
}

(default tab-size looks to be 8, there is no existing tab-size property on these elements)

Result:

enter image description here

Short of an official fix, this can easily be implemented client-side with a styling manager like Stylish or a userscript.

The tab size inside of post textboxes is explicitly set to 4 (rule: textarea.wmd-input, textarea#wmd-input { tab-size: 4 }), but there looks to be a good reason for it. Code blocks (not snippets) have their tab characters replaced with 4 spaces each when the post is rendered:

console.log('foo');    // 4-space indentation for code block
    console.log('bar') // 4-space followed by tab - edit this post to see

(Snippet behavior is different - tab characters inside of snippets do not get replaced when rendered.)

So, I'm inclined to say that the 4-space-tab for the <textarea>s probably shouldn't be changed - many existing posts (and future edits to them) count on it for proper indentation in non-snippet code blocks. It's probably best to make edits to snippets in the snippet editor anyway.

3
  • 4
    The tidy button also changes the indentation to 2 spaces, and not everyone can comfy read that
    – Ferrybig
    Commented Feb 28, 2019 at 10:13
  • 4
    "some people like tabs" those poor, poor folks...
    – TylerH
    Commented Mar 1, 2019 at 21:06
  • Case: In myy VSCode editor when I press TAB key it write 4 spaces (and this is nice) and I have habbit to press TAB key instead push space 4 times - but if I use jsfiddle.net (because it show error line number in JS code - in contrast to SO snippets which not shows usable information when code has syntax error) it not write 4 spaces after TAB button press - so when I copy such code to snippet it is formated wrong Commented Mar 6, 2019 at 6:54

You must log in to answer this question.

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