Template:Mxt/User CSS for a monospaced coding font: Difference between revisions

Revision as of 08:40, 6 January 2018

Revision as of 08:47, 6 January 2018

Line 2:

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>).

Add something like one of the code snippets below into your <{{samp>|[[Special:MyPage/common.css]]</samp>}} page, replacing <{{kbd>|"Roboto Mono"</kbd>}} with whatever your preferred coding font is (Roboto Mono was picked as a freely-available coding font [https://fonts.google.com/specimen/Roboto+Mono] for this example).

This code will do the following:

* Apply a consistent monospace font of your choice (and the fallback system-default <{{samp>|monospace</samp>}}, 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 additional site-wide classes (as identified so far, e.g. <code>.userlinks</code>) that output as monospace.

* Do the same for all the classes used by {{tlx|mxt}} and other monospaced templates in the {{tlx|xt}} family

Line 11:

If you know of an additional class to add here, please update this page or mention it on [[Template talk:Mxt/User CSS for a monospaced coding font|the talk page]].

<!--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=

Line 48:

}}

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

{{syntaxhighlight|lang=css|1=