Template:Mxt/User CSS for a monospaced coding font: Difference between revisions
meta>SMcCandlish ce |
meta>SMcCandlish +2 classes |
||
| Line 5: | Line 5: | ||
This code will do the following: | 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 | * 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. | ||
* Make the | * 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 | |||
* 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 you know of an additional class to add here, please update this page or mention it on the talk page. | If you know of an additional class to add here, please update this page or mention it on the talk page. | ||
| Line 13: | Line 15: | ||
{{syntaxhighlight|lang=css|1= | {{syntaxhighlight|lang=css|1= | ||
/* Use my font for code, when available, to save my eyes */ | /* Use my font for code, when available, to save my eyes */ | ||
code, pre, samp, kbd, tt, .example-mono, .bad-example-mono, .neutral-example-mono, .deprecated-example-mono { font-family: "Roboto Mono", monospace !important; } | code, pre, samp, kbd, tt, .userlinks, .example-mono, .bad-example-mono, .neutral-example-mono, .deprecated-example-mono { font-family: "Roboto Mono", monospace !important; } | ||
/* Make some of the editable stuff monospaced */ | /* Make some of the editable stuff monospaced */ | ||
#wpTextbox1, #wpSummary { font-family: "Roboto Mono", monospace !important; } | #wpTextbox1, #wpSummary, #searchInput { font-family: "Roboto Mono", monospace !important; } | ||
}} | }} | ||
| Line 26: | Line 28: | ||
kbd, | kbd, | ||
tt, | tt, | ||
.userlinks, | |||
.example-mono, | .example-mono, | ||
.bad-example-mono, | .bad-example-mono, | ||
| Line 34: | Line 37: | ||
/* Make some of the editable stuff monospaced */ | /* Make some of the editable stuff monospaced */ | ||
#wpTextbox1, | #wpTextbox1, | ||
#wpSummary { | #wpSummary, | ||
#searchInput { | |||
font-family: "Roboto Mono", monospace !important; | font-family: "Roboto Mono", monospace !important; | ||
} | } | ||
Revision as of 14:07, 5 January 2018
 | This help page is a how-to guide. It details processes or procedures of some aspect(s) of Wikipedia's norms and practices. It is not one of Wikipedia's policies or guidelines, as it has not been thoroughly vetted by the community. |
You can consistently use a monospaced font with well-designed characters for coding, e.g. to distinguish clearly between l, 1, and I).
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 [1] 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 additional site-wide classes (as identified so far, e.g.
.userlinks) that output as monospace. - Do the same for all the classes used by
{{mxt}}and other monospaced templates in the{{xt}}family - 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 you know of an additional class to add here, please update this page or mention it on the talk page.
Horizontal style <syntaxhighlight lang="css">/* Use my font for code, when available, to save my eyes */ code, pre, samp, kbd, tt, .userlinks, .example-mono, .bad-example-mono, .neutral-example-mono, .deprecated-example-mono { font-family: "Roboto Mono", monospace !important; } /* Make some of the editable stuff monospaced */
- wpTextbox1, #wpSummary, #searchInput { font-family: "Roboto Mono", monospace !important; }</syntaxhighlight>
Vertical style <syntaxhighlight lang="css">/* Use my font for code, when available, to save my eyes */ code, pre, samp, kbd, tt, .userlinks, .example-mono, .bad-example-mono, .neutral-example-mono, .deprecated-example-mono {
font-family: "Roboto Mono", monospace !important;
} /* Make some of the editable stuff monospaced */
- wpTextbox1,
- wpSummary,
- searchInput {
font-family: "Roboto Mono", monospace !important;
}</syntaxhighlight>
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>, though 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:
<syntaxhighlight lang="css">/* Flag bad code for cleanup */ tt { color: DarkRed; background: Pink; }</syntaxhighlight>
Template documentationThis is a documentation snippet page transcluded (without the banner or this doc section) into other template documentation 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}}
It can also used as a stand-alone how-to page; a redirect to it, Help:User CSS for a monospaced coding font, is categorized as such.
