Help:Displaying code text
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 | Result |
---|---|
This is <code>code text</code> |
This is code text
|
Over <code>multiple<br/>lines</code> |
Over multiple
|
Over <code>multiple lines</code> |
Over multiple
|
<code>{{desktop}}</code> |
Desktop
|
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}} |
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: |
<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
|
Not over {{code|multiple<br/>lines}} |
Not over
|
Not over {{code|multiple lines}} |
Not over
|
{{code|{{desktop}}}} |
|
{{code|{{=}} or {{)}} need escaping; not with = HTML entities}} |
|
The CSS rule is {{code|lang=css|background-color:#fff;}}. |
The CSS rule is .
|