Template:Mxt/User CSS for a monospaced coding font
Sarna News

- Bad 'Mechs - Thresher Mk II
- HEXTECH Wave 9 Review - Winding Rivers, Tall Walls, and Underground Tunnels
- Hired Steel and Making MechWarrior 5: Clans Cinematics with Constantin & Bernhard of TMC
- Your BattleTech News Round-Up For December, 2024
- Community Outreach - Caterwauling On CamoSpecs With Matt "00Dawg" Frederiksen
- Read more →
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 —
).
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).
This code will do the following:
- Apply a consistent monospace font of your choice (and the fallback system-default monospace, should that font go missing or not have characters you need) to all the normally monospaced HTML elements like
<code>
,<pre>
, etc. - Do the same for the classes used by
{{mxt}}
and other monospaced templates in the{{xt}}
family - Do the same for additional site-wide classes (as 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.
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 <font>
, <center>
, <strike>
, 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 w: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}}