User:Evon R'al/Wiki coding notes: Difference between revisions

(24 intermediate revisions by the same user not shown)

Line 35:

*** {{T|GetSkillPrice}} [[Image:Tick.png|link=]]

== Citizen skin ==

* [[MediaWiki:Citizen-footer-desc]]

* [[MediaWiki:Citizen-footer-tagline]]

Design-tokens notes:

--background-color-warning-subtle

Mainly to emphasize table headers

</div>

--background-color-base

Use to return to base color when parent element has another color.

</div>

--background-color-neutral

</div>

--background-color-destructive-subtle

</div>

--background-color-error

</div>

--color-error

</div>

--color-warning

</div>

--color-content-added

</div>

--color-inverted-fixed

</div>

--color-base

</div>

--font-size-small

</div>

--font-size-medium

</div>

--font-size-large

</div>

[[User:Bates Larsson|Bates]]' message about design-tokens [[https://discord.com/channels/301496390066896896/706641916460007434/1371844304263315558 Discord]]

Elmara Olth-Semah link to codex [https://discord.com/channels/301496390066896896/706641916460007434/1372274609335832687 Discord] (design-tokens). Direct [https://doc.wikimedia.org/codex/latest/design-tokens/color.html codex]

== Flex box ==

<pre>

</div>

</pre>

== Wiki mark-up ==

Line 40:

Line 112:

See also: [[mediawikiwiki:Help:Links]]

~~==== Piped link ====~~

Links are case sensitive, with the exception of the first character.

~~A piped link is an internal or [[#interwiki link|interwiki]] link where~~ the ~~link target and link label are both specified~~.

==== Space or underscore ====

The wiki software automatically changes spaces to underscores (_) in internal ~~links (Need to check for~~ inter wiki links). So [[Relic_and_data_sites]] and [[Relic and data sites]] are equivalent. Eliminating the need to change the underscore version into a piped link for nice readability, providing a "cleaner" source.

The wiki software automatically changes spaces to underscores (_), in the resulting html link, in internal and inter wiki links. So <nowiki>[[Relic_and_data_sites]]</nowiki> ([[Relic_and_data_sites]]) and <nowiki>[[Relic and data sites]]</nowiki> ([[Relic and data sites]]) are equivalent. Eliminating the need to change the underscore version into a piped link for nice readability, providing a "cleaner" source. The use of spaces is preferred.

==== Link end trick ====

{{Note box|'''Link end "trick"''' (Word-ending links)

Putting text directly connecting to the closing ]] results in that text being added to the displayed text.<br>

<code><nowiki>[[Venture]]s</nowiki></code> results in [[Venture]]s while the link still goes to Venture.<br>

<code><nowiki>[[Venture]]abunchofletters</nowiki></code> results in [[Venture]]abunchofletters while the link still goes to Venture.

For more details see: [[mediawikiwiki:Help:Links]]

|italics= no}}

==== Internal link====

==== Piped link ====

Internal (or intrawiki) links check the existence of the target page. If the page doesn't exist, is misspelled or the case is incorrect the link turns [[~~redlink~~|red]].

A piped link is an internal or [[#interwiki link|interwiki]] link where the link target and link label are both specified. Piped links should be used sparingly, if a wiki redirect is available it should be used instead.

==== Internal link ====

Internal (and intrawiki) links check the existence of the target page. If the page doesn't exist, is misspelled or the case is incorrect the link turns [[red link|red]].

'''Syntax:''' <code><nowiki>[[<namespace>:<page name>#<anchor>|<label>]]</nowiki></code>

Line 59:

Line 142:

<code><nowiki>[[Venture]]</nowiki></code> results in [[Venture]]<br>

As the first letter is not case sensitive <code><nowiki>[[venture]]</nowiki></code> also results in a valid link [[venture]]

~~{{Note box|'''Link end "trick"''' (Word-ending links)~~

~~Putting text directly connecting to the closing ]] results in that text being added to the displayed text.<br>~~

~~<code><nowiki>[[Venture]]s</nowiki></code> results in [[Venture]]s while the link still goes to Venture.<br>~~

~~<code><nowiki>[[Venture]]abunchofletters</nowiki></code> results in [[Venture]]abunchofletters while the link still goes to Venture.~~

~~For more details see: [[mediawikiwiki:Help:Links]]~~

~~|italics= no}}~~

:; Namespace and Page name : To go to a page outside the main namespace the namespace needs to be added to the link

Line 74:

Line 149:

:; Page name and Anchor : Using a Page name and an Anchor gets to a specific location within a page.

:: Using an Anchor only, leads to a specific location within the page.

<code><nowiki>[[combat ~~sites~~#Expeditions]]</nowiki></code> gives [[combat ~~sites~~#Expeditions]]<br>

<code><nowiki>[[combat site#Expeditions]]</nowiki></code> gives [[combat site#Expeditions]]<br>

The existence of the page is still checked, but the existence of the anchor is not.<br>

Note: If a non existing anchor is used the link goes to the top of the page.<br>

<code><nowiki>[[combat ~~sites~~#no exist]]</nowiki></code> gives [[combat ~~sites~~#no exist]], leading to the top of the combat ~~sites~~ page

<code><nowiki>[[combat site#no exist]]</nowiki></code> gives [[combat site#no exist]], leading to the top of the combat site page

<code><nowiki>[[#Signatures]]</nowiki></code> gives [[#Signatures]] leading to the Signatures heading on this page.

Line 87:

Line 162:

The use of label is particularly useful when namespaces or anchors are used. To increase readability.<br>

<code><nowiki>[[User:Evon R'al|Evon R'al]]</nowiki>'s user page</code> gives [[User:Evon R'al|Evon R'al]]'s user page<br>

<code>A link to <nowiki>[[combat ~~sites~~#Expeditions|Expeditions]]</nowiki></code> gives "A link to [[combat ~~sites~~#Expeditions|Expeditions]]".

<code>A link to <nowiki>[[combat site#Expeditions|Expeditions]]</nowiki></code> gives "A link to [[combat site#Expeditions|Expeditions]]".

{{Note|While not particularly useful the link end trick will work.}}

Line 123:

Line 198:

* [https://wiki.eveuniversity.org/api.php?action=query&meta=siteinfo&siprop=namespaces&format=xml List of namespaces (In raw XML)]

==== Interwiki link====

==== Interwiki link ====

Interwiki links are internal-style links to other websites using an "interwiki prefix". For a list of valid interwiki prefixes see [[Special:interwiki]].

Interwiki links are made by using the interwiki prefix as the first parameter in an internal link.

A ~~intrawiki~~ link to MediaWiki's help page about links looks like <code><nowiki>[[Mediawikiwiki:Help:Links]]</nowiki></code> which gives [[Mediawikiwiki:Help:Links]]

A interwiki link to MediaWiki's help page about links looks like <code><nowiki>[[Mediawikiwiki:Help:Links]]</nowiki></code> which gives [[Mediawikiwiki:Help:Links]]

The link end and pipe ~~tricks~~ described at internal links work for interwiki links just as-well. And use of a label to change the presentation of a link also works.

The [[#link end trick|link end trick]] and the pipe trick, described at internal links, work for interwiki links just as-well. And use of a label to change the presentation of a link also works.

==== External link====

==== External link ====

External links are rendered different from internal and interwiki links. On the UNI Wiki the links have a marker at the end. The exact marker depends on if the link is HTTP of HTTPS.

Line 148:

Line 223:

* Finally the external link rendering can be suppressed by using the CSS class {{Co|wheat|plainlinks}} making the link look like an internal one. <code><nowiki><span class="plainlinks">[https://wiki.eveuniversity.org/index.php?title=User:Evon_R%27al Evon R'al's user page]</span></nowiki></code> produces <span class="plainlinks">[https://wiki.eveuniversity.org/index.php?title=User:Evon_R%27al Evon R'al's user page]</span>

=== Formula presentation ===

UniWiki uses the extension <s>[[:Mediawikiwiki:Extension:SimpleMathJax|SimpleMathJax]]</s> [[:Mediawikiwiki:Extension:Math|Math]] for the presentation of formulas. The formula to be presented needs to be encased with the tags <nowiki><math></nowiki> and <nowiki></math></nowiki>. <math>\tex</math> or <math>\LaTeX</math> markup can be used. Errors will be marked as <math>\sqrt</math>

To display a formula the following markup can be used:

{| class="wikitable" style="text-align: center;"

|-

! Source !! MathJax presentation || Notes

|-

| X^n || <math> X^n </math> || exponentiation ?<br> superscript

|-

| a \times b || <math> a \times b </math> || multiplication

|-

| a / b || <math>a / b</math> || division

|-

| \frac {a} {b} ||<math> \frac {a} {b} </math> || division/fraction

|-

| \displaystyle \frac{a}{b} || <math> \displaystyle \frac {a} {b} </math> || division/fraction

|-

| \sqrt {X} || <math>\displaystyle \sqrt {X} </math> || square root

|-

| \sqrt [n] {X} || <math> \sqrt [n] {X} </math> || root

|-

| a + b || <math> a + b </math> || addition

|-

| a - b || <math> a - b </math> || abstraction

|-

| V_{max} ||<math> V_{max} </math> || subscript

|-

| \text{text} ||<math> \text{text} </math> || roman text

|-

| text || <math> text </math> || italic text

|-

| \color{blue} b ||<math> \color{blue} b </math> || color

|-

| \color{blue} \text{Blue} || <math> \color{blue} \text{Blue} </math> ||

|-

| { \color{blue} b } X || <math> { \color{blue} b } X </math> || partial color

|-

| \sin || <math> \sin </math> ||

|-

| \cos || <math> \cos </math> ||

|-

| \tan || <math> \tan </math> ||

|-

| \ln || <math> \ln </math> || natural logarithm

|-

| \log || <math> \log </math> || logarithm

|-

| \infty || <math> \infty </math> || Infinity

|-

| \pi || <math> \pi </math> || pi

|-

| \displaystyle \left( \frac {a} {b} \right) || <math> \displaystyle \left( \frac {a} {b} \right) </math> ||

|-

| \left( \frac {a} {b} \right) || <math> \left( \frac {a} {b} \right) </math> || Works with (, [, < and { (needs to be escaped \{ )

|-

| ( \frac {a} {b} ) || <math> ( \frac {a} {b} ) </math> || See ( hight difference with previous

|-

| a \n b \\ c || <math> a \\ b \\ c </math> || newline within a <nowiki><math></nowiki> block

|-

| \ begin{align}<br>

a & = b \times c \\<br>

b \times c & = a<br>

\end{align}

| <math> \begin{align}

a & = b \times c \\

b \times c & = a

\end{align} </math> || Align on &

|}

@@ Line 35: / Line 35: @@
 *** {{T|GetSkillPrice}} [[Image:Tick.png|link=]]
+== Citizen skin ==
+* [[MediaWiki:Citizen-footer-desc]]
+* [[MediaWiki:Citizen-footer-tagline]]
+Design-tokens notes:
+<div style="display : flex; flex-wrap: wrap; gap: 1.5em;">
+<div style="background-color: var(--background-color-warning-subtle);">
+--background-color-warning-subtle
+Mainly to emphasize table headers
+</div>
+<div style="background-color: var(--background-color-base); max-width: 15em;">
+--background-color-base
+Use to return to base color when parent element has another color.
+</div>
+<div style="background-color: var(--background-color-neutral);">
+--background-color-neutral
+</div>
+<div style="background-color: var(--background-color-destructive-subtle);">
+--background-color-destructive-subtle
+</div>
+<div style="background-color: var(--background-color-error);">
+--background-color-error
+</div>
+</div>
+<div style="display : flex; flex-wrap: wrap; gap: 1.5em;">
+<div style="color: var(--color-error);">
+--color-error
+</div>
+<div style="color: var(--color-warning);">
+--color-warning
+</div>
+<div style="color: var(--color-content-added);">
+--color-content-added
+</div>
+<div style="background-color: var(--background-color-neutral);color: var(--color-inverted-fixed);">
+--color-inverted-fixed
+</div>
+<div style="color: var(--color-base);">
+--color-base
+</div>
+</div>
+<div style="display : flex; flex-wrap: wrap; gap: 1.5em;">
+<div style="font-size: var(--font-size-small);">
+--font-size-small
+</div>
+<div style="font-size: var(--font-size-medium);">
+--font-size-medium
+</div>
+<div style="color: var(--font-size-large);">
+--font-size-large
+</div>
+</div>
+[[User:Bates Larsson|Bates]]' message about design-tokens [[https://discord.com/channels/301496390066896896/706641916460007434/1371844304263315558 Discord]]
+Elmara Olth-Semah link to codex [https://discord.com/channels/301496390066896896/706641916460007434/1372274609335832687 Discord] (design-tokens). Direct [https://doc.wikimedia.org/codex/latest/design-tokens/color.html codex]
+== Flex box ==
+<pre>
+<div style="display : flex; flex-wrap: wrap; gap: 1.5em;">
+<div> </div>
+<div> </div>
+</div>
+</pre>
 == Wiki mark-up ==
@@ Line 40: / Line 112: @@
 See also: [[mediawikiwiki:Help:Links]]
-==== Piped link ====
+Links are case sensitive, with the exception of the first character.
-A piped link is an internal or [[#interwiki link|interwiki]] link where the link target and link label are both specified.
 ==== Space or underscore ====
-The wiki software automatically changes spaces to underscores (_) in internal links (Need to check for inter wiki links). So [[Relic_and_data_sites]] and [[Relic and data sites]] are equivalent. Eliminating the need to change the underscore version into a piped link for nice readability, providing a "cleaner" source.
+The wiki software automatically changes spaces to underscores (_), in the resulting html link, in internal and inter wiki links. So <nowiki>[[Relic_and_data_sites]]</nowiki> ([[Relic_and_data_sites]]) and <nowiki>[[Relic and data sites]]</nowiki> ([[Relic and data sites]]) are equivalent. Eliminating the need to change the underscore version into a piped link for nice readability, providing a "cleaner" source. The use of spaces is preferred.
+==== Link end trick ====
+{{Note box|'''Link end "trick"''' (Word-ending links)
+Putting text directly connecting to the closing ]] results in that text being added to the displayed text.<br>
+<code><nowiki>[[Venture]]s</nowiki></code> results in [[Venture]]s while the link still goes to Venture.<br>
+<code><nowiki>[[Venture]]abunchofletters</nowiki></code> results in [[Venture]]abunchofletters while the link still goes to Venture.
+For more details see: [[mediawikiwiki:Help:Links]]
+|italics= no}}
-==== Internal link====
+==== Piped link ====
-Internal (or intrawiki) links check the existence of the target page. If the page doesn't exist, is misspelled or the case is incorrect the link turns [[redlink|red]].
+A piped link is an internal or [[#interwiki link|interwiki]] link where the link target and link label are both specified. Piped links should be used sparingly, if a wiki redirect is available it should be used instead.
+==== Internal link ====
+Internal (and intrawiki) links check the existence of the target page. If the page doesn't exist, is misspelled or the case is incorrect the link turns [[red link|red]].
 '''Syntax:''' <code><nowiki>[[<namespace>:<page name>#<anchor>|<label>]]</nowiki></code>
@@ Line 59: / Line 142: @@
 <code><nowiki>[[Venture]]</nowiki></code> results in [[Venture]]<br>
 As the first letter is not case sensitive <code><nowiki>[[venture]]</nowiki></code> also results in a valid link [[venture]]
-{{Note box|'''Link end "trick"''' (Word-ending links)
-Putting text directly connecting to the closing ]] results in that text being added to the displayed text.<br>
-<code><nowiki>[[Venture]]s</nowiki></code> results in [[Venture]]s while the link still goes to Venture.<br>
-<code><nowiki>[[Venture]]abunchofletters</nowiki></code> results in [[Venture]]abunchofletters while the link still goes to Venture.
-For more details see: [[mediawikiwiki:Help:Links]]
-|italics= no}}
 :; Namespace and Page name : To go to a page outside the main namespace the namespace needs to be added to the link
@@ Line 74: / Line 149: @@
 :; Page name and Anchor : Using a Page name and an Anchor gets to a specific location within a page.
 :: Using an Anchor only, leads to a specific location within the page.
-<code><nowiki>[[combat sites#Expeditions]]</nowiki></code> gives [[combat sites#Expeditions]]<br>
+<code><nowiki>[[combat site#Expeditions]]</nowiki></code> gives [[combat site#Expeditions]]<br>
 The existence of the page is still checked, but the existence of the anchor is not.<br>
 Note: If a non existing anchor is used the link goes to the top of the page.<br>
-<code><nowiki>[[combat sites#no exist]]</nowiki></code> gives [[combat sites#no exist]], leading to the top of the combat sites page
+<code><nowiki>[[combat site#no exist]]</nowiki></code> gives [[combat site#no exist]], leading to the top of the combat site page
 <code><nowiki>[[#Signatures]]</nowiki></code> gives [[#Signatures]] leading to the Signatures heading on this page.
@@ Line 87: / Line 162: @@
 The use of label is particularly useful when namespaces or anchors are used. To increase readability.<br>
 <code><nowiki>[[User:Evon R'al|Evon R'al]]</nowiki>'s user page</code> gives [[User:Evon R'al|Evon R'al]]'s user page<br>
-<code>A link to <nowiki>[[combat sites#Expeditions|Expeditions]]</nowiki></code> gives "A link to [[combat sites#Expeditions|Expeditions]]".
+<code>A link to <nowiki>[[combat site#Expeditions|Expeditions]]</nowiki></code> gives "A link to [[combat site#Expeditions|Expeditions]]".
 {{Note|While not particularly useful the link end trick will work.}}
@@ Line 123: / Line 198: @@
 * [https://wiki.eveuniversity.org/api.php?action=query&meta=siteinfo&siprop=namespaces&format=xml List of namespaces (In raw XML)]
-==== Interwiki link====
+==== Interwiki link ====
 Interwiki links are internal-style links to other websites using an "interwiki prefix". For a list of valid interwiki prefixes see [[Special:interwiki]].
 Interwiki links are made by using the interwiki prefix as the first parameter in an internal link.
-A intrawiki link to MediaWiki's help page about links looks like <code><nowiki>[[Mediawikiwiki:Help:Links]]</nowiki></code> which gives [[Mediawikiwiki:Help:Links]]
+A interwiki link to MediaWiki's help page about links looks like <code><nowiki>[[Mediawikiwiki:Help:Links]]</nowiki></code> which gives [[Mediawikiwiki:Help:Links]]
-The link end and pipe tricks described at internal links work for interwiki links just as-well. And use of a label to change the presentation of a link also works.
+The [[#link end trick|link end trick]] and the pipe trick, described at internal links, work for interwiki links just as-well. And use of a label to change the presentation of a link also works.
-==== External link====
+==== External link ====
 External links are rendered different from internal and interwiki links. On the UNI Wiki the links have a marker at the end. The exact marker depends on if the link is HTTP of HTTPS.
@@ Line 148: / Line 223: @@
 * Finally the external link rendering can be suppressed by using the CSS class {{Co|wheat|plainlinks}} making the link look like an internal one. <code><nowiki><span class="plainlinks">[https://wiki.eveuniversity.org/index.php?title=User:Evon_R%27al Evon R'al's user page]</span></nowiki></code> produces <span class="plainlinks">[https://wiki.eveuniversity.org/index.php?title=User:Evon_R%27al Evon R'al's user page]</span>
+=== Formula presentation ===
+UniWiki uses the extension <s>[[:Mediawikiwiki:Extension:SimpleMathJax|SimpleMathJax]]</s> [[:Mediawikiwiki:Extension:Math|Math]]  for the presentation of formulas. The formula to be presented needs to be encased with the tags <nowiki><math></nowiki> and <nowiki></math></nowiki>. <math>\tex</math> or <math>\LaTeX</math> markup can be used. Errors will be marked as&nbsp;<math>\sqrt</math>
+To display a formula the following markup can be used:
+{| class="wikitable" style="text-align: center;"
+|-
+! Source !! MathJax presentation || Notes
+|-
+| X^n || <math> X^n </math> || exponentiation ?<br> superscript
+|-
+| a \times b || <math> a \times b </math> || multiplication
+|-
+| a / b || <math>a / b</math> || division
+|-
+| \frac {a} {b} ||<math> \frac {a} {b} </math> || division/fraction
+|-
+| \displaystyle \frac{a}{b} || <math> \displaystyle \frac {a} {b} </math> || division/fraction
+|-
+| \sqrt {X} || <math>\displaystyle \sqrt {X} </math> || square root
+|-
+| \sqrt [n] {X} || <math> \sqrt [n] {X} </math> || root
+|-
+| a + b || <math> a + b </math> || addition
+|-
+| a - b || <math> a - b </math> || abstraction
+|-
+| V_{max} ||<math> V_{max} </math> || subscript
+|-
+| \text{text} ||<math> \text{text} </math> || roman text
+|-
+| text || <math> text </math> || italic text
+|-
+| \color{blue} b ||<math> \color{blue} b </math> || color
+|-
+| \color{blue} \text{Blue} || <math> \color{blue} \text{Blue} </math> ||
+|-
+| { \color{blue} b } X || <math> { \color{blue} b } X </math> || partial color
+|-
+| \sin || <math> \sin </math> ||
+|-
+| \cos || <math> \cos </math> ||
+|-
+| \tan || <math> \tan </math> ||
+|-
+| \ln || <math> \ln </math> || natural logarithm
+|-
+| \log || <math> \log </math> || logarithm
+|-
+| \infty || <math> \infty </math> || Infinity
+|-
+| \pi || <math> \pi </math> || pi
+|-
+| \displaystyle \left( \frac {a} {b} \right) || <math> \displaystyle \left( \frac {a} {b} \right) </math> ||
+|-
+| \left( \frac {a} {b} \right) || <math> \left( \frac {a} {b} \right) </math> || Works with (, [, < and { (needs to be escaped \{ )
+|-
+| ( \frac {a} {b} ) || <math> ( \frac {a} {b} ) </math> || See ( hight difference with previous
+|-
+|  a \n b \\ c  || <math> a \\ b \\ c </math> || newline within a <nowiki><math></nowiki> block
+|-
+| &#92; begin{align}<br>
+a & = b \times c \\<br>
+b \times c & = a<br>
+&#92;end{align}
+| <math> \begin{align}
+ a & = b \times c \\
+ b \times c & = a
+ \end{align} </math> || Align on &
+|}
+See also:
+* [[UniWiki:Manual of Style/Mathematics]]
+* [https://docs.mathjax.org/en/latest/index.html MathJax]
+* [https://docs.mathjax.org/en/latest/input/tex/index.html MathJax Tex and LaTeX support]
+* [[:Wikipedia:Help:Displaying a formula]]
+* [[:Wikipedia:Wikipedia:Manual of Style/Mathematics]]
+* [[:Wikipedia:MathML]]
+* [[UniWiki:Editing commands visual guide#Math]]
 == CSS ==
@@ Line 154: / Line 308: @@
 * [https://www.w3schools.com/cssref W3 schools reference]
 * [https://developer.mozilla.org/en-US/docs/Web/CSS mdn web docs reference]
+* [[:Wikipedia:Wikipedia:TemplateStyles|Wikipedia projects page TemplateStyles]]
 === CSS location ===
-; External style sheet :A separate file with CSS definitions. Loaded into the page with a HTML link in the head section of the page.
+; External style sheet : A separate file with CSS definitions. Loaded into the page with a HTML link in the head section of the page.
-; Internal style sheet :On the page in the style element of the head section
+; Internal style sheet : On the page in the style element of the head section
-; Inline CSS :By using the style attribute of an HTML element.
+; Inline CSS : By using the style attribute of an HTML element.
-For external and Internal style sheets the order in which they appear in a page is relevant, the last one "wins".
+For external and Internal style sheets the order in which they are called in a page is relevant, the last one "wins".
 === Cascading order ===
@@ Line 167: / Line 322: @@
 ** Internal and external style sheet. In the order they are entered on the page.
 *** Inline CSS
+When an individual CSS property is used more than once the last occurrence "wins".
 == HTML and CSS entities ==
@@ Line 188: / Line 345: @@
 == Code snippets ==
-=== Small stuf ===
+=== Small stuff ===
 No more mineable asteroids in missons:
 {{Code|<nowiki>Various mission site locations have had mineable asteroids replaced with cosmetic asteroids. (30/03/2020)
@@ Line 199: / Line 356: @@
 |<nowiki>{{hatnote|This article details the Level ?, <Faction> version of this mission. For other variants, see [[<Mission>|<Mission> (disambiguation)]].}}
 </nowiki>}}
+==== Text color in EVE chat ====
+Red {{Co|#ff0000|ff0000}}
+Green 1 {{Co|#a3fc80|a3fc80}}<br>
+Green 2 {{Co|#48ff00|48ff00}}
+Blue {{Co|#80d8fc|80d8fc}}
 === MessageBox with logo ===
@@ Line 268: / Line 433: @@
 |-
 |Minmatar||Hydrogen
+|}
+Wiki markup table with class="sortable" and special markings
+<nowiki>class= data-sort-type="number"?? | data-sort-value="24" | unsortable | sortbottom </nowiki>
+{| class="wikitable sortable"
+|-
+! Text !! Number 1 !! Number 2 !! Number 3 !! class="unsortable" | Number 4
+|-
+| Een || 1 || +1 || data-sort-value="3" | 1 || 1
+|-
+| Twee || 2 || +2 || data-sort-value="1" | 2 || 2
+|-
+| Tien || 10 || +10 || data-sort-value="2" | 10 || 10
+|-
+| Min tien || -10 ||-10 || data-sort-value="5" | -10 || -10
+|- class="sortbottom"
+| Vijf || 5 || 5 || 5 || 5
 |}