Reduce tab size in code samples

[dboulet]

I’d like to propose a small change to the appearance of tabs within code blocks in the Codex. By default, browsers display tabs within PRE tags with a width of 8 spaces—this often results in unwanted line breaks as the indentation pushes the code far to the right. Using the tab-size property in CSS, the width of the tabs can be reduced and the appearance of the indented code can be improved.

More about tab-size: ​https://developer.mozilla.org/en-US/docs/Web/CSS/tab-size

[samuelsidler]

In general, we're moving away from using the Codex. Do you see issues with code blocks on developer.wordpress.org?

[dboulet]

Good to know, samuelsidler. The same CSS could also be added to developer.wordpress.org, though code examples seem to be more rare there.

[melchoyce]

Can you add a before/after screenshot of this applied to developer.wordpress.org? Thanks!

[dboulet]

Code indented with tabs (tab-size set to 4 on the right)

[dboulet]

I’ve attached a before/after screenshot of the page at ​https://developer.wordpress.org/reference/functions/add_shortcode/, the default tab size is shown on the left, and the right side displays the result of using tab-size: 4;. I actually cheated a little here, as the actual code samples on the page are indented using spaces. I altered the source code of the page, changing the indentation to tabs in order to demonstrate the potential for change in my screenshot.

I’ve noticed that most code samples in the Codex and on developer.wordpress.org are indented using spaces, I’m assuming this is for consistency in spacing. My hope was that this change would allow the indentation in online code samples to be converted to tabs, in accordance with the ​WordPress PHP Coding Standards. The main issue that I’m hoping to resolve is that I often copy/paste code from the Codex and end up with mixed indentation in my files.

[ocean90]

Browser support for tab-size isn't really great. With the new developer resource on the horizon, which is using spaces for indentation, that isn't quite an issue anymore.