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:
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.