Template:Mxt/User CSS for a monospaced coding font#Cleanup efforts

{{Wikipedia how-to}}

To consistently use a monospaced font with well-designed characters for coding so as to clearly distinguish between l, 1, and I, and between O and 0, and between -, −, –, and —, the system-default monospaced font can be changed:

If like it as-is, you can simply @import (transclude) it: see meta:User:SMcCandlish/codefont.css for quick instructions.

Otherwise, copy one of the code snippets below to your Special:MyPage/common.css or meta:Special:MyPage/global.css page, replacing {{kbd|"Roboto Mono"}} in the code with your preferred coding font. ([https://fonts.google.com/specimen/Roboto+Mono Roboto Mono] was used in this example as it is good, free coding font, for user-editable material on the wiki).

This code will:

• Apply a consistent monospace font of choice to all the normally monospaced HTML elements like {{tag|code|o}}, {{tag|pre|o}}, etc.
• Fallback to system-default {{samp|monospace}} font, should the chosen font be unavailable or lack the necessary characters.
• Do the same for the output of all Example-formatting templates, such as {{tlx|mxt}} and {{tlx|xt}}.
• Apply to additional site-wide classes identified so far (e.g., .monospaced) that output as monospace.
• Make the three most frequently encountered editing fields also use this font stack: the main editing window, the edit summary line, and the search entry box.
• If any additional classes are known that should be added, please update this page or mention it on the talk page.

Horizontal style

{{syntaxhighlight|lang=css|1=

/* 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 */

1. wpTextbox1, #wpSummary, #searchInput, #searchText { font-family: "Roboto Mono", monospace !important; }

}}

Vertical style

{{syntaxhighlight|lang=css|1=

/* 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 */

1. wpTextbox1,
2. wpSummary,
3. searchInput,
4. searchText {

font-family: "Roboto Mono", monospace !important;

}

}}

{{anchor|Cleanup efforts}}Cleanup efforts

If you'd like to help clean up instances of the {{tag|{{!mxt|tt}}}} element – which has been discouraged since the 1990s, and should usually be replaced with {{tag|{{mxt|code}}}} (this may vary by context) – you can add something like the following to your {{samp|common.css}} to make {{tag|{{!mxt|tt}}|o}} stick out like a sore thumb:

{{syntaxhighlight|lang=css|1=

/* Flag bad code for cleanup */

tt { color: DarkRed; background: Pink; }

}}

You can also do this with {{tag|font|o}}, {{tag|center|o}}, {{tag|strike|o}}, and other deprecated elements. For CSS you can just import for this, see meta:User:SMcCandlish/lint.css.{{Documentation|content=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: