You can consistently use a monospaced font with well-designed characters for coding (e.g., to distinguish clearly between l, 1, and I, and between O and 0, and between -, −, –, and —).
This help page is a how-to guide. It details processes or procedures of some aspect(s) of Wikipedia's norms and practices. It is not one of Wiki's policies or guidelines, and may reflect varying levels of consensus and vetting. |
Add something like one of the code snippets below into your Special:MyPage/common.css page, replacing "Roboto Mono" with whatever your preferred coding font is (Roboto Mono was picked as a freely-available coding font for this example).
If you don't want to manually add this code to your CSS page but would rather @import
(transclude) it, see meta:User:SMcCandlish/codefont.css for quick instructions.
This code will do the following:
,
, etc.
{{mxt}}
and other monospaced templates in the {{xt}}
family.monospaced
) that output as monospace.If you know of an additional class to add here, please update this page or mention it on the talk page.
Horizontal style
/* Use my font, when available, for code */ code, pre, samp, kbd, tt, .example-mono, .userlinks-username, .monospaced, .keyboard-key, .button, .plaincode { font-family: "Roboto Mono", monospace !important; } /* Make some of the editable stuff monospaced */ #wpTextbox1, #wpSummary, #searchInput, #searchText { font-family: "Roboto Mono", monospace !important; }
Vertical style
/* Use my font, when available, for code */ code, pre, samp, kbd, tt, .example-mono, .userlinks-username, .monospaced, .keyboard-key, .button .plaincode { font-family: "Roboto Mono", monospace !important; } /* Make some of the editable stuff monospaced */ #wpTextbox1, #wpSummary, #searchInput, #searchText { font-family: "Roboto Mono", monospace !important; }
Cleanup efforts
If you'd like to help clean up instances of the <tt>...tt>
element – which has not been valid HTML since the 1990s, and should usually be replaced with <code>...code>
(this may vary by context) – you can add something like the following to your common.css to make <tt>
stick out like a sore thumb:
/* Flag bad code for cleanup */ tt { color: DarkRed; background: Pink; }
You can also do this with ,
,
, and other deprecated elements. For CSS you can just import for this, see meta:User:SMcCandlish/lint.css.
This is a documentation snippet page transcluded (without the banner or this doc section) into other template documentation, and into Help:User style, for consistency. It takes no parameters.
Typical usage:
== User CSS for a monospaced coding font == {{collapse top|left=y|title=Have monospaced templates in this group – and your editing window – use your preferred monospaced font:}} {{Mxt/User CSS for a monospaced coding font}} {{collapse bottom}}
It can also be used as a stand-alone how-to page; a redirect to it, Help:User CSS for a monospaced coding font, is categorized as such. It is also transcluded as a section, at Help:User style#User CSS for a monospaced coding font.