View source for Template:Mxt/User CSS for a monospaced coding font

<includeonly><div style="float:right; padding:0 1em;">{{navbar|Mxt/User CSS for a monospaced coding font|plain=y}}</div></includeonly>
You can consistently use a monospaced font with well-designed characters for coding (e.g., to distinguish clearly between <code>l</code>, <code>1</code>, and <code>I</code>, and between <code>O</code> and <code>0</code>, and between <code>-</code>, <code>−</code>, <code>–</code>, and <code>—</code>).

Add something like one of the code snippets below into your {{samp|[[Special:MyPage/common.css]]}} page, replacing {{kbd|"Roboto Mono"}} with whatever your preferred coding font is ([https://fonts.google.com/specimen/Roboto+Mono 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 {{samp|monospace}}, should that font go missing or not have characters you need) to all the normally monospaced HTML elements like {{tag|code|o}}, {{tag|pre|o}}, etc.
* Do the same for the classes used by {{tlx|mxt}} and other monospaced templates in the {{tlx|xt}} family
* Do the same for additional site-wide classes (as identified so far, e.g. <code>.monospaced</code>) 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.

<!--DO NOT ADD var TO THIS LIST! It must be able to inherit the font of surrounding text, because it is used outside code, as in "If <var>A</var> then <var>B</var>", and in math equations.-->
'''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 */
#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 */
#wpTextbox1,
#wpSummary,
#searchInput,
#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 not been valid HTML 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 [[w:Wikipedia:HTML 5#Obsolete elements and attributes|deprecated elements]].  For CSS you can just import for this, see [[meta:User:SMcCandlish/lint.css]].<noinclude><!--

-->{{Documentation|content=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:
<pre><nowiki>
== 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}}
</nowiki></pre>
[[Category:Template documentation]]
<!--End documentation.-->}}</noinclude>