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

Revision as of 05:56, 22 July 2024

Latest revision as of 19:40, 29 September 2024

Line 1:

<noinclude>{{Wikipedia how-to}}</noinclude><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>).

You canTo consistently use a [[monospaced font]] with well-designed characters for coding (e.g.,so as to distinguish clearly distinguish 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>)., the system-default monospaced font can be changed:

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

If youlike don'tit wantas-is, toyou manuallycan add this code to your CSS page but would rathersimply <code>@import</code> (transclude) it,: see [[meta:User:SMcCandlish/codefont.css]] for quick instructions.

Add somethingOtherwise, likecopy one of the code snippets below intoto your {{samp|[[Special:MyPage/common.css]]}} or [[meta:Special:MyPage/global.css]] page, replacing {{kbd|"Roboto Mono"}} within whateverthe code with your preferred coding font is. ([https://fonts.google.com/specimen/Roboto+Mono Roboto Mono] was pickedused in this example as ait freely-availableis good, free coding font, for thisuser-editable examplematerial on the wiki).

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.

This code will do the following:

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

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

* 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 [[:Category:Example-formatting templates|Example-formatting templates]], such as {{tlx|mxt}} and {{tlx|xt}}.

* DoApply the same forto 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.

* If youany knowadditional of[[Class an(computer additionalprogramming)|classes]] are known classthat toshould addbe hereadded, 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.-->