Help:Displaying code text

From Terraria Wiki
Jump to navigation Jump to search

Code text is usually formatted in a special way to visually set it apart from regular article text. On the Terraria Wiki, there are multiple methods to apply this formatting, outlined below.

HTML tags

The standard HTML <code></code> tag is most commonly used to display code text. The text is rendered with a monospace font and a faint border. This is primarily intended to be used for single-line text and code within regular article text. The <pre></pre> tag is better suited for code text that spans multiple lines. It produces a separate box and occupies more space. <code> respects and applies all wikicode syntax, whereas <pre> ignores it entirely. A third method is using <div class="mw-code"></code>, which mimics the styling of <pre></pre> but still respects wikicode syntax. It is best to avoid manual linebreaks here and instead only use <br/> in order to avoid spacing issues.

Wikicode Multiple lines
<code> ✔️
<pre> ✔️
class="mw-code" ✔️ ✔️

Examples

<code>
Code Result
This is <code>code text</code>
This is code text
Over <code>multiple<br/>lines</code>
Over multiple
lines
Over <code>multiple

lines</code>
Over multiple

lines

<code>{{desktop}}</code>
Desktop version Desktop
<pre>
Code Result
This is <pre>code text</pre>  
This is
code text
Over <pre>multiple<br/>lines</pre>
Over
multiple<br/>lines
Over <pre>multiple

lines</pre>
Over
multiple

lines
<pre>{{desktop}}</pre>
{{desktop}}
class="mw-code"
Code Result
This is <div class="mw-code">code text</div>  
This is
code text
Over <div class="mw-code">multiple<br/>lines</div>
Over
multiple
lines
Over <div class="mw-code">multiple

lines</div>
Over
multiple lines
<div class="mw-code">Many

manual linebreaks

cause weird

spacing issues</div>
Many

manual linebreaks

cause weird

spacing issues
<div class="mw-code">It's better<br/>to use<br/><!--
-->HTML tags<br/><!--
-->for linebreaks</div>
It's better
to use
HTML tags
for linebreaks
<div class="mw-code">{{desktop}}</div>

Extension tag

The MediaWiki extension SyntaxHighlight provides the tag <syntaxhighlight></syntaxhighlight> which, in addition to applying a code-style format, allows highlighting the text according to the syntax of a certain programming language. The tag <source></source> is an alias, but it is deprecated and should not be used (see Category:Pages using deprecated source tags for a list of pages that still use it). Similarly to <pre>, all wiki syntax is ignored.

The tag accepts several parameters, see the documentation for details and examples. A full list of available programming languages for highlighting can be found in the Pygments documentation; the values listed under "Short names" for each of the languages there are the values that can be used for the tag's lang parameter. For example, to highlight the code according to C# syntax, the possible values are csharp, c#, and cs.

<syntaxhighlight> is automatically used by the software on CSS, JavaScript, and Lua pages on the wiki (e.g. MediaWiki:Gadget-previewTab.css, MediaWiki:Common.js, or Module:Bananas). If the page is too long (e.g. MediaWiki:Common.css), the syntax highlighting is suspended and the default "text" formatting is used.

Examples

Code Result
The CSS rule is <syntaxhighlight lang="css" inline>background-color:#fff;</syntaxhighlight>.
The CSS rule is background-color:#fff;.
<syntaxhighlight lang="text" inline>{{desktop}}</syntaxhighlight>
{{desktop}}
JavaScript excerpt:
<syntaxhighlight lang="js" line linelinks="jsexcerpt1" start="71" highlight="2,6-7">
/**
 * Handle wide tables
 */
$(function() {
	var handleWideTables = function(tables) {
		if(!tables){
			return;
		}
	}
}
</syntaxhighlight>
JavaScript excerpt:
/**
 * Handle wide tables
 */
$(function() {
	var handleWideTables = function(tables) {
		if(!tables){
			return;
		}
	}
}
<syntaxhighlight lang="text">Over multiple
lines</syntaxhighlight>
Over multiple
lines

Template

The template {{code}} formats code text as well. Its functionality is restricted by the usual limitations of templates, such as characters like | or = having to be escaped, etc. Its advantage is that {{code|text}} is slightly faster to type than <code>text</code>, but because of the worse usability and intuitiveness, the latter is generally favored.

It uses <syntaxhighlight> internally and thus supports some of its parameters.

Examples

Code Result
This is {{code|code text}}
This is code text
Not over {{code|multiple<br/>lines}}
Not over multiple<br/>lines
Not over {{code|multiple

lines}}
Not over multiple lines
{{code|{{desktop}}}}
[[File:Desktop only.png|16x12px|Desktop version|link=Desktop version history]][[Desktop version history|&nbsp;Desktop]]
{{code|{{=}} or {{)}} need escaping; not with &#61; HTML entities}}
= or }} need escaping; not with &#61; HTML entities
The CSS rule is {{code|lang=css|background-color:#fff;}}.
The CSS rule is background-color:#fff;.