User:Mgkrupa/Code and Symbols

Math LaTeX code edit


Common misc code

{{abbreviation|TVS|Topological Vector Space}} TVS

<ol type="a"> <ol style="list-style-type: lower-latin;">

WP:ACCESSIBILITY anTable of Binary Operatorsd MOS:MATH

Indentation:

Do NOT use a colon : to indent because it produces to broken HTML code and reduces accessibility.
  • Use {{Block indent}} for indentation of text; for indenting a single line, {{in5}} can also be used.
  • Use <math display=block>x = y</math> instead of :<math>x = y</math> to display math equations on their own line.
  • Do NOT use a colon : or <quoteblock></quoteblock> or {{blockquote}} for indentation − they are only for quotes.

Do NOT use ;Pseudoheading name for pseudoheadings (sections that don't appear in the table of contents).

  • Use '''Pseudoheading name''' instead.

"Do not use possibly unpronounceable symbols"



{{quote frame|align=|1=}}

{{quote box|width=|border=|bgcolor=|style=|qalign=|align=|1=}}


{{math theorem|name=Theorem|note=|style=|math_statement=
}}

{{math theorem|name=Lemma Proposition etc Default is "Theorem"
|note=Info In Parentheses|math_statement=
}}

Proofs: {{math proof}}

{{collapse top|title=Proof|expand=yes|left=true}}
{{collapse bottom}}

  • In non-article namespaces only: Can also use {{hidden begin}} and {{hidden end}} (does not hide anything from mobile users)

{{math proof|drop=hidden|proof=
}}

{{math proof|drop=hidden|title=Default is "Proof"|proof=
}}


Indentation

{{Block indent}}  {{in5}}

Table of contents

{{TOC limit|3}}

Common math code edit

Spaces and Sizes edit

Result LaTeX code Other info
Text text text text text

 
Text text text text text. Now without vertical spaces:
 
Text text text text text.
<math display=block>
h_\bull
\begin{aligned}&\\[1.0ex]\end{aligned}
</math>
Vertical space before and/or after a single line math statement. 2.0ex is 2.0 times the height of the 'x' character.
        <math>\displaystyle \sum_{i=1}^\infty</math>

<math>\textstyle \sum_{i=1}^\infty</math>
<math>\scriptstyle \sum_{i=1}^\infty</math>
<math>\scriptscriptstyle \sum_{i=1}^\infty</math>

    <math>\bigl( \bigr) ~ ()</math>

<math>\bigl[ \bigr] ~ []</math>

  <math>\dotsb</math> for binary operators/relations

<math>\dotsm</math> for multiplication
<math>\dotsi</math> for integrals
<math>\dotsc</math> for commas


Spacing
Result LaTeX code
 
<math>\begin{alignat}{8}
&M \!          M&&\quad&&\backslash!            &&\text{negative thin space (-3 mu)}\\
&MMM            &&     &&                       &&\text{no space}\\
&M \,          M&&     &&\backslash,            &&\text{thin (3 mu)}\\
&M \;          M&&     &&\backslash;            &&\text{thick (5 mu)}\\
&M \           M&&     &&\backslash\text{ }     &&\text{length of a text space character}\\
&M \text{ }    M&&     &&\backslash\text{text}\{\ \}&&\text{using } \backslash\text{text}\{\text{ }\}\\
&M \quad       M&&     &&\backslash\text{quad}  &&\text{width of } M \text{ (18 mu)}\\
&MMM            &&     &&                       &&\text{no space }\\
&M \qquad      M&&     &&\backslash\text{qquad} &&\text{double width of } M \text{ (36 mu)}\\
&M \mathbin{M} M&&     &&\backslash\text{mathbin}\{M\}\quad&&\text{spaces around binary relation } M\\
&M \mathrel{M} M&&     &&\backslash\text{mathrel}\{M\}\quad&&\text{spaces around binary operator } M\\
\end{alignat}</math>

Symbols (LaTeX) edit

Links to Math symbol articles
Unicode and LaTeX
LaTeX
Unicode
Conventions and guidelines
Other


From compart.com:



Symbols for Operations/Relations


Result LaTeX code Other info

                   

\wp \O \P \S \Complex \H \N \Q \Reals \Z

Weierstrass P

                           

\ker \Pr \hom \imath\arg \gcd \exp \sgn \dim \deg \det \imath \jmath \Bbbk \ (space)

   

\blacksquare \square

QED end of proof box.

       

\perp \bot \backslash \odot

               

\rightarrowtail \hookrightarrow \rightharpoonup \rightrightarrows \twoheadrightarrow \rightsquigarrow \mapsto \longmapsto

                     

\cong \equiv \sim \simeq \approx \widehat{=} \overset{?}{=} \triangleq \doteq \shortparallel \nshortparallel

               

\lor \land \vee \wedge \bigvee \bigwedge \curlywedge \curlyvee

                           

\prec \preccurlyeq \preceq \precsim \curlyeqprec \succ \succcurlyeq \succeq \succsim \curlyeqsucc \not\prec \not\preceq \not\succ \not\succeq

                       

\lesssim \gtrsim \lessdot \gtrdot \sqsubset \sqsubseteq \sqsupset \sqsupseteq \not\sqsubseteq \not\sqsupseteq \ll \gg

                   

\triangleleft \triangleright \vartriangleleft \ntriangleleft \vartriangleright \ntriangleright \trianglelefteq \ntrianglelefteq \trianglerighteq \ntrianglerighteq

     

\varnothing \empty \emptyset

   

\subsetneq \supsetneq \not\subseteq \not\supseteq

 
 
 
 

\mod m
\mod \,
\pmod m
\pmod \,

NOTE: <math>\mod</math> and <math>\pmod</math> without an argument are NOT allowed.

                           

\Re \Im \mho \P \S \ln \log \lg \sinh \cosh \tanh \coth \complement

         

\lim \liminf \limsup \inf \sup

Words/Terminology edit

Useful terminology or words with special symbols

Lists of words at wiktionary:
Main Category: Category:en:Mathematics and Glossary of areas of mathematics
See also: Thesaurus:Mathematics

Non-Latex Code edit

Superscripts and subscripts
overbase           {{overset|over|base}}
basebelow           {{underset|below|base}}
super
subsc
          {{sup sub|super|subsc}}
- Can also use {{su}} but you'll need to write "p=" and "b=" as in: {{su|p=super|b=subsc}} which gives: super
subsc
Xtop
bot
            X{{su|p=top|b=bot}}
Xb                X{{sub|b}}
Xb                X{{sup|b}}
Alignment: {{center}}
{{left}} {{center}} {{right}} - For aligning text that comes after it
{{Center|Text goes here}}
See Help:Table#HELP:TABLECENTER for info on centering tables.
Text goes here

Font size: {{larger}} < {{big}} < {{large}} < {{huge}}, {{resize}}, {{math|big=1|}}, {{math|size=200%|}}
  • {{math|big=1|}}     for big font size (165%) OR     {{math|size=200%|}}     for custom font size.
3                 {{larger|3}}
3                 {{big|3}}
3                 {{large|3}}
3                 {{huge|3}}
3                {{resize|260%|3}}

{{math|big=1|}}      {{math|size=200%|}}

Divide text into multiple columns: <div style="column-count: 3; column-rule-style: dotted; column-rule-color: lightblue; column-rule-style: outset; column-width: 80px;">The COVID‑19 pandemic, also known as the coronavirus pandemic, is an ongoing pandemic of coronavirus disease 2019 (COVID‑19) caused by severe acute respiratory syndrome coronavirus 2 (SARS‑CoV‑2). It was first identified in December 2019 in Wuhan, China. The World Health Organization declared the outbreak a Public Health Emergency of International Concern on 30 January 2020 and a pandemic on 11 March.</div>

Spacing

{{paragraph break}}


{{space|3}} adds 3 spaces.
{{quad}} adds 4 spaces.
{{sp}}     - Standard space character - HTML: &#32;    Unicode: U+202F

{{thinsp}}    &thinsp;    {{thin space}} - To place a single thin space (unicode: U+2009)
{{thinsp|symbol}}      OR      {{thin space|symbol}} - Wraps text on the left AND right with a thin space
Ex: ({{thinsp|''x''}})      (x)      rather than:    (x)

{{thinspace}} - Separates a list of arguments by &thinsp;
EX: ({{thinspace|sin|2''θ''}})      (sin 2θ)

{{hair space}}    {{hsp}}    {{hairsp}}    - Unicode: U+200A
{{hairsp|symbol}}      OR      {{hair space|symbol}} - Wraps text on the left AND right with a hair space
Ex: ({{hairsp|''x''}})      ( x )      rather than:    (x)

{{Narrow no-break space}}    {{hsp}}    {{nnbsp}}    - HTML: &#8239;    Unicode: U+202F
{{nnbsp|symbol}}      OR      {{Narrow no-break space|symbol}} - Wraps text on the left AND right with a hair space
Ex: ({{nnbsp|''x''}})      ( x )      rather than:    (x)

{{Zero width space}}
{{0}}     - Empty string i.e. 0-width space
Name
(alias)
Instance Example code and ... Using {{spaces}} Output Output {{spaces}}
none Text<ref>...</ref>
''Text''<ref>...</ref>
Text[1]
Text[2]
Hair
(Very thin)
Text{{hair space}}<ref>...</ref>
''Text''{{hair space}}<ref>...</ref>
Text{{spaces|hair}}<ref>...</ref> Text [1]
Text[2]
Text[1]
Text[2]
2-pixel Text{{px2}}<ref>...</ref>
''Text''{{px2}}<ref>...</ref>
Text[1]
Text[2]
Narrow no-break Text{{narrow no-break space}}<ref>...</ref>
''Text''{{narrow no-break space}}<ref>...</ref>
Text [1]
Text[2]
Thin Text{{thin space}}<ref>...</ref>
''Text''{{thin space}}<ref>...</ref>
Text{{spaces|thin}}<ref>...</ref> Text[1]
Text[2]
Text[1]
Text[2]
Standard[a]   Text&nbsp;<ref>...</ref>
''Text''&nbsp;<ref>...</ref>
Text{{spaces}}<ref>...</ref> Text [1] Text [1]
Text [2]
En 1&ensp;3 1{{spaces|en}}3 1 3 13
Figure 123<br/>1{{figure space}}3 123<br/>1{{spaces|fig}}3 123
13
123
13
Em 1&emsp;3 1{{spaces|em}}3 1 3 13
  1. ^ Provided here by a non-breaking space (&nbsp;).


Equations and boxes edit

Boxes

For Box shadows

- See also: CSS box-shadow

Box shadows:

Result LaTeX code Other info
My text in a box!
<div style="border: 2px solid; padding: 10px; box-shadow: 5px 10px;">My text in a box!</div>
My text in a box with multile colors!
<div style="border: 2px solid; padding: 10px; box-shadow: 5px 6px 7px green, 11px 12px 13px red, 21px 22x 23px blue;">My text in a box with multile colors!</div>
My text in a box with multile colors and blur effect!
<div style="border: 2px solid; padding: 10px; box-shadow: 5px 6px 7px green, 11px 12px 13px red, 21px 22x 23px blue;">My text in a box with multile colors and blur effect!</div>
My text in a box with multile colors and blur effect! The keyword "inset" places the shadow inside the box.
<div style="border: 2px solid; padding: 10px; box-shadow: 5px 6px 7px green, 11px 12px 13px red, 21px 22x 23px blue inset;">My text in a box with multile colors and blur effect! The keyword "inset" places the shadow inside the box.</div>
Referencing and Displaying equations
Option 1:

Step (1): Wrap the equation in <div id=EquationID></div> where id's value becomes an anchor name.

Step (2): Reference the equation by its id:

Example:

<div id=EquationID><math display=block>x \mapsto f x</math></div>
where [[#EquationID|the equation above]]

Output:

 

where the equation above


Option 2:

Use {{EquationRef}} to create an {{anchor}}

Result LaTeX code Other info
Eq. 1   {{EquationRef|Eq. 1}} <math>x^2+x+1=0</math>
Eq. 2:   {{EquationRef|2|Eq. 2:}} <math>x^2-2x+1=0</math>



Option 3:

{{NumBlk}} produces numbered blocks. The more colons : you put then the more the equation is indented.

{{NumBlk|:::|<math>y=ax+b</math>|{{EquationRef|Eq. 5}}|LnSty=1px dashed black}}

 

(Eq. 5)

{{NumBlk|:|<math>y=ax+b</math>|Eq. 6}}

 

(Eq. 6)

Option 4:

{{Equation box 1|indent= |title=|equation=|ref=|cellpadding=|border=|bordercolour=|background colour=}}

{{Equation box 1|title='''[[Complex number]]'''|indent=:|equation=<math>2=1+1</math>|cellpadding=6|border=1|border colour=black|background colour=white|ref=Eq. 90}}

Complex number

    (Eq. 90)

Use border colour=#50C878|background colour=#ECFCF4 for more colors.


Other options:

{{equation}} HTML LINK - ASSUMES THE EQUATION THAT IS IN LaTeX

{{equation|1=X(t) = 3.5|2=3.5}}

  (3.5)

  • HTML Link to equation 3.5 [[#equation-3.5|HTML Link to equation 3.5]]
    • Default anchor name is: equation-# where # is the equation number used in argument |2=

Step (2) Use {{EquationNote}} to create a link

Result LaTeX code Other info
1 {{EquationNote|1}}
Equation 1 {{EquationNote|1|Equation 1}}
Custom-Text-Eq-2 {{EquationNote|2|Custom-Text-Eq-2}}
Custom-Text-Eq. 5 {{EquationNote|Eq. 5|Custom-Text-Eq. 5}}


Aligning: \begin{alignat}{4} and \begin{array}{4} edit

  • For additional vertical space at the end of a line, use \\[0.7ex] instead of just \\ (2.0ex is twice the height of the x character).


LaTeX: Aligning equations \begin{alignat}{4} \stackrel{a}{b}
Note: \begin{alignat}{4} does not add space between columns while \begin{align} and \begin{align*} do.
Result LaTeX code Other info
 
<math>\begin{alignat}{4}
(1) \;\;\; &\{q_{i,K} &&: \;K \in \mathbb{K}, \;\;&&i \in \N,   \;&&0 \leq i \leq k \} \\
(4) \;\;\; &\{s_{p,K} &&: \;K \in \mathbb{K}, \;\;&&p \in \N^n, \;&&|p| \leq k \}.
\end{alignat}</math>

The Wikipedia equivalent of the LaTeX code \substack{a\\b} is \stackrel{a}{b} (displays as  ).

Result LaTeX code Other info
 
<math>\begin{array}{rcrcccl}
r(x,y,z) & = & x & + & y & + & z \\
g(x,y)   & = & x & + & y &   &   \\
h(y,z)   & = &   &   & y & + & z \\
\end{array}</math>
 
<math>\begin{array}{|l|c|r|}
\hline
00 & 00 & 00 \\
\hline
1 & 2 & 3 \\
1 & 2 & 3 \\
\hline
1 & 2 & 3 \\
\end{array}</math>
See also this chemistry table.
 
<math>\begin{array}{|l|c|r|}
001  & 000  & 100 \\
01   & 00   & 10  \\
1    & 1    & 1   \\
\hline
3    & 1    & 111 \\
\end{array}</math>

Result LaTeX code Other info
 
<math>f(x) =
\begin{cases}
x & \text{ if } x \leq 0 \\
0 & \text{ otherwise } \\
\end{cases}</math>
 
<math>\begin{alignat}{4}
f : \,& X && \to    \,&& Y \\
      & x && \mapsto\,&& y \\
\end{alignat}</math>
 
<math>\begin{array}{rccl}
f : &X& \to    \,&Y \\
    &x& \mapsto\,&y \\
\end{array}</math>

Definitions - {{dfn}} edit

Ex: Without alt text:

Say that {{em|{{dfn|1=new term|id=dfn-anchorname}}}} if ....<br/>this term ([[#dfn-anchorname|defined here]]), ...
Say that new term if ....
this term (defined here), ...

Ex: With alt text:

Say that {{em|{{dfn|1=new term 2|2=Alt text giving definition of term|id=dfn-anchorname2}}}} if ....<br/>this term ([[#dfn-anchorname2|defined here]]), ...
Say that new term if ....
this term (defined here), ...

Color edit

Result LaTeX code Other info
  {\color{Red}{\bigcup}} B
  A \color{Red}{\bigcup}\color{Black}{} B See below for why \color{Black}{} is needed
  \color{Red}{\bigcup} B Without the \color{Black}{} it renders as:  
<span style="color:red">red text</span>

<span style="color:#0000FF"">blue text</span>

For plain text.


Colors supported
       
       
       
       
       
       
       
       
       
       
       
       
       
       
       
       
       
Colors
CSS 1–2.0, HTML 3.2–4, and VGA color names
Name Hex
(RGB)
Red
(RGB)
Green
(RGB)
Blue
(RGB)
Hue
(HSL/HSV)
Satur.
(HSL)
Light
(HSL)
Satur.
(HSV)
Value
(HSV)
CGA number (name); alias
White #FFFFFF 100% 100% 100% 0° 0% 100% 0% 100% 15 (white)
Silver #C0C0C0 75% 75% 75% 0° 0% 75% 0% 75% 07 (light gray)
Gray #808080 50% 50% 50% 0° 0% 50% 0% 50% 08 (dark gray)
Black #000000 0% 0% 0% 0° 0% 0% 0% 0% 00 (black)
Red #FF0000 100% 0% 0% 0° 100% 50% 100% 100% 12 (high red)
Maroon #800000 50% 0% 0% 0° 100% 25% 100% 50% 04 (low red)
Yellow #FFFF00 100% 100% 0% 60° 100% 50% 100% 100% 14 (yellow)
Olive #808000 50% 50% 0% 60° 100% 25% 100% 50% 06 (brown)
Lime #00FF00 0% 100% 0% 120° 100% 50% 100% 100% 10 (high green); green
Green #008000 0% 50% 0% 120° 100% 25% 100% 50% 02 (low green)
Aqua #00FFFF 0% 100% 100% 180° 100% 50% 100% 100% 11 (high cyan); cyan
Teal #008080 0% 50% 50% 180° 100% 25% 100% 50% 03 (low cyan)
Blue #0000FF 0% 0% 100% 240° 100% 50% 100% 100% 09 (high blue)
Navy #000080 0% 0% 50% 240° 100% 25% 100% 50% 01 (low blue)
Fuchsia #FF00FF 100% 0% 100% 300° 100% 50% 100% 100% 13 (high magenta); magenta
Purple #800080 50% 0% 50% 300° 100% 25% 100% 50% 05 (low magenta)
HTML name R G B
Hex Decimal
Pink colors
MediumVioletRed C71585 199, 21, 133
DeepPink FF1493 255, 20, 147
PaleVioletRed DB7093 219, 112, 147
HotPink FF69B4 255, 105, 180
LightPink FFB6C1 255, 182, 193
Pink FFC0CB 255, 192, 203
Red colors
DarkRed 8B0000 139, 0, 0
Red FF0000 255, 0, 0
Firebrick B22222 178, 34, 34
Crimson DC143C 220, 20, 60
IndianRed CD5C5C 205, 92, 92
LightCoral F08080 240, 128, 128
Salmon FA8072 250, 128, 114
DarkSalmon E9967A 233, 150, 122
LightSalmon FFA07A 255, 160, 122
Orange colors
OrangeRed FF4500 255, 69, 0
Tomato FF6347 255, 99, 71
DarkOrange FF8C00 255, 140, 0
Coral FF7F50 255, 127, 80
Orange FFA500 255, 165, 0
Yellow colors
DarkKhaki BDB76B 189, 183, 107
Gold FFD700 255, 215, 0
Khaki F0E68C 240, 230, 140
PeachPuff FFDAB9 255, 218, 185
Yellow FFFF00 255, 255, 0
PaleGoldenrod EEE8AA 238, 232, 170
Moccasin FFE4B5 255, 228, 181
PapayaWhip FFEFD5 255, 239, 213
LightGoldenrodYellow FAFAD2 250, 250, 210
LemonChiffon FFFACD 255, 250, 205
LightYellow FFFFE0 255, 255, 224
Brown colors
Maroon 800000 128, 0, 0
Brown A52A2A 165, 42, 42
SaddleBrown 8B4513 139, 69, 19
Sienna A0522D 160, 82, 45
Chocolate D2691E 210, 105, 30
DarkGoldenrod B8860B 184, 134, 11
Peru CD853F 205, 133, 63
RosyBrown BC8F8F 188, 143, 143
Goldenrod DAA520 218, 165, 32
SandyBrown F4A460 244, 164, 96
Tan D2B48C 210, 180, 140
Burlywood DEB887 222, 184, 135
Wheat F5DEB3 245, 222, 179
NavajoWhite FFDEAD 255, 222, 173
Bisque FFE4C4 255, 228, 196
BlanchedAlmond FFEBCD 255, 235, 205
Cornsilk FFF8DC 255, 248, 220
HTML name R G B
Hex Decimal
Purple, violet, and magenta colors
Indigo 4B0082 75, 0, 130
Purple 800080 128, 0, 128
DarkMagenta 8B008B 139, 0, 139
DarkViolet 9400D3 148, 0, 211
DarkSlateBlue 483D8B 72, 61, 139
BlueViolet 8A2BE2 138, 43, 226
DarkOrchid 9932CC 153, 50, 204
Fuchsia FF00FF 255, 0, 255
Magenta FF00FF 255, 0, 255
SlateBlue 6A5ACD 106, 90, 205
MediumSlateBlue 7B68EE 123, 104, 238
MediumOrchid BA55D3 186, 85, 211
MediumPurple 9370DB 147, 112, 219
Orchid DA70D6 218, 112, 214
Violet EE82EE 238, 130, 238
Plum DDA0DD 221, 160, 221
Thistle D8BFD8 216, 191, 216
Lavender E6E6FA 230, 230, 250
Blue colors
MidnightBlue 191970 25, 25, 112
Navy 000080 0, 0, 128
DarkBlue 00008B 0, 0, 139
MediumBlue 0000CD 0, 0, 205
Blue 0000FF 0, 0, 255
RoyalBlue 4169E1 65, 105, 225
SteelBlue 4682B4 70, 130, 180
DodgerBlue 1E90FF 30, 144, 255
DeepSkyBlue 00BFFF 0, 191, 255
CornflowerBlue 6495ED 100, 149, 237
SkyBlue 87CEEB 135, 206, 235
LightSkyBlue 87CEFA 135, 206, 250
LightSteelBlue B0C4DE 176, 196, 222
LightBlue ADD8E6 173, 216, 230
PowderBlue B0E0E6 176, 224, 230
Cyan colors
Teal 008080 0, 128, 128
DarkCyan 008B8B 0, 139, 139
LightSeaGreen 20B2AA 32, 178, 170
CadetBlue 5F9EA0 95, 158, 160
DarkTurquoise 00CED1 0, 206, 209
MediumTurquoise 48D1CC 72, 209, 204
Turquoise 40E0D0 64, 224, 208
Aqua 00FFFF 0, 255, 255
Cyan 00FFFF 0, 255, 255
Aquamarine 7FFFD4 127, 255, 212
PaleTurquoise AFEEEE 175, 238, 238
LightCyan E0FFFF 224, 255, 255
HTML name R G B
Hex Decimal
Green colors
DarkGreen 006400 0, 100, 0
Green 008000 0, 128, 0
DarkOliveGreen 556B2F 85, 107, 47
ForestGreen 228B22 34, 139, 34
SeaGreen 2E8B57 46, 139, 87
Olive 808000 128, 128, 0
OliveDrab 6B8E23 107, 142, 35
MediumSeaGreen 3CB371 60, 179, 113
LimeGreen 32CD32 50, 205, 50
Lime 00FF00 0, 255, 0
SpringGreen 00FF7F 0, 255, 127
MediumSpringGreen 00FA9A 0, 250, 154
DarkSeaGreen 8FBC8F 143, 188, 143
MediumAquamarine 66CDAA 102, 205, 170
YellowGreen 9ACD32 154, 205, 50
LawnGreen 7CFC00 124, 252, 0
Chartreuse 7FFF00 127, 255, 0
LightGreen 90EE90 144, 238, 144
GreenYellow ADFF2F 173, 255, 47
PaleGreen 98FB98 152, 251, 152
White colors
MistyRose FFE4E1 255, 228, 225
AntiqueWhite FAEBD7 250, 235, 215
Linen FAF0E6 250, 240, 230
Beige F5F5DC 245, 245, 220
WhiteSmoke F5F5F5 245, 245, 245
LavenderBlush FFF0F5 255, 240, 245
OldLace FDF5E6 253, 245, 230
AliceBlue F0F8FF 240, 248, 255
Seashell FFF5EE 255, 245, 238
GhostWhite F8F8FF 248, 248, 255
Honeydew F0FFF0 240, 255, 240
FloralWhite FFFAF0 255, 250, 240
Azure F0FFFF 240, 255, 255
MintCream F5FFFA 245, 255, 250
Snow FFFAFA 255, 250, 250
Ivory FFFFF0 255, 255, 240
White FFFFFF 255, 255, 255
Gray and black colors
Black 000000 0, 0, 0
DarkSlateGray 2F4F4F 47, 79, 79
DimGray 696969 105, 105, 105
SlateGray 708090 112, 128, 144
Gray 808080 128, 128, 128
LightSlateGray 778899 119, 136, 153
DarkGray A9A9A9 169, 169, 169
Silver C0C0C0 192, 192, 192
LightGray D3D3D3 211, 211, 211
Gainsboro DCDCDC 220, 220, 220

General Wiki code edit

Lists edit

  • <li value="7">Item</li>
    • but      <li value="7a">Item</li> does not produce "7a".

<ol type="a">     or     <ol style="list-style-type:lower-latin;">     or     <ol style="list-style-type:square;">   or   circle;    {{Columns-list}}
<ol type="a">      or      <ol style="list-style-type:lower-latin;">
<ol type="A">      or      <ol style="list-style-type:upper-latin;">
<ol type="i">      or      <ol style="list-style-type:lower-roman;">
<ol type="I">      or      <ol style="list-style-type:upper-roman;">
<ol style="list-style-type:square;">
<ol style="list-style-type:circle;">      for a non-filled circle (not a closed disk, but just its boundary)
<ol style="list-style-type:disk;">      for a filled disk
<ol type="1">      or      <ol style="list-style-type:decimal;">
<ol style="list-style-type:none;">      Blank, no symbol shown.
Result LaTeX code Other info
  • Item 1
  • Item 2
{{Columns-list|colwidth=22em|
* Item 1
* Item 2
}}
{{Columns-list}} "turns a list into a list with columns. It is a wrapper for {{div col}}, except it wraps the template by allowing for the content to be in the template rather than above and below."


Blank lists (no symbol)    {{plainlist}}    {{unbulleted list}}
Result LaTeX code Other info
  1. Item 1
  2. Item 2
<ol style="list-style-type:none;">
<li>Item 1</li>
<li>Item 2</li>
</ol>
<ol style="list-style-type:none;">      Blank, no symbol shown.
  • Item 1
  • Item 2
{{plainlist|
* Item 1
* Item 2
}}
{{plainlist}}
  • Item 1
  • Item 2
{{unbulleted list
| Item 1
| Item 2
}}
{{unbulleted list}}


Horizontal/Flat lists      {{hlist|class=inline|Entry1|Entry2}}
{{hlist}}
  • {{hlist|Entry1|entry2|entry3}}      produces:
    • Entry1
    • entry2
    • entry3
  • {{hlist|class=inline|Entry1|entry2|entry3}}      produces:
    • Entry1
    • entry2
    • entry3

{{flatlist}}
{{flatlist|
* Entry 1
* Entry 2
* entry 3
}}
produces:
  • Entry 1
  • Entry 2
  • entry 3

Using {{flatlist}} improves WP:ACCESSIBILITY:

Source Rendered result
{{flatlist|
# item 1
# item 2
}}
  1. item 1
  2. item 2
{{flatlist|
* item 1
* item 2
}}
  • item 1
  • item 2


<ol style="list-style-position:inside;">

<ol style="list-style-position:inside;"> produces:

  1. An extremely long sentence with repeated words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words.
  2. Item 2.

where note that "words" appears directly underneath the "1."


The default is "outside"; that is: <ol style="list-style-position:outside;"> which produces:

  1. An extremely long sentence with repeated words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words.
  2. Item 2.

where note that there is empty space directly underneath the "1."


Spacing/Padding      <ol style="line-height:180%;">

<ol style="line-height:250%;">

Produces:

  1. Item 1.
  2. Item 2.

The default is:

  1. Item 1.
  2. Item 2.

Tables and columns edit


Wikipedia: Tables

For side by side info (e.g. code next to output): (The <div> is for border + background)

<div style="background: white; border: 2px solid rgb(0, 255, 0); padding: 2px;">
{| style="border-collapse: collapse; width: ; background: ; color: ; border: ; margin: ;"
<!--- Example: {| style="width: 100%; background: yellow; color: red; border: 2px solid green;"  --->
!style="text-align:center;"|Column 1 Title
!style="text-align:center;"|Column 2 Title
|-style="vertical-align:top;"
|style="border-right:2px solid rgb(0, 255, 0); padding-top: ; padding-right:1em; padding-left:1em;"|

Left side info - e.g. Code goes here

|style="padding-top: ; padding-right:1em; padding-left:1em;"|

Right side info here
|}
</div>
Wiki source Rendered result
{| style="width: ; background: ; color: ; border: ;"
! {{diagonal split header|Bottom-Left|Top-Right}}
! Solid !! Liquid !! Gas
|-
! Solid
| Solid-solid transformation || Melting || Sublimation
|}
Top-Right
Bottom-Left
Solid Liquid Gas
Solid Solid-solid transformation Melting Sublimation

You can also use other languages for lang=""(WikiMedia partial list here).

<syntaxhighlight lang="html+handlebars"> - for WikiCode
<syntaxhighlight lang="tid">
<syntaxhighlight lang="css">
<syntaxhighlight lang="html">
(ending tag is </syntaxhighlight>) in place of the <pre><nowiki> tags.



EXAMPLES of Tables


Columns
Result LaTeX code Other info
  • 1
  • 2
  • 3
  • 4
{{div col|colwidth=8em|gap=1em|rules=yes|small=yes}}
* 1
* 2
* 3
* 4
{{div col end}}
{{div col|colwidth|rules|gap|small}} {{div col end}}
{{col-begin}}
{{col-break}}
* 1
* 2
{{col-break}}
* 3
* 4
{{col-break}}
* 5
{{col-end}}
{{col-begin}}{{col-break}} Content {{col-break}} Content2 {{col-end}}

Column 1 start:

  • 1
  • 2

Column 2 start: If there is not enough space to display 2 columns then the second column will be displayed underneth the first column. Otherwise they will be side by side.

  • 3
  • 4
  • 5
{{col-float}}
Column 1 start: 
* 1
* 2
{{col-float-break}}
Column 2 start: If there is not enough space to display 2 columns then the second column will be displayed underneth the first column. Otherwise they will be side by side.
* 3
* 4
* 5
{{col-float-end}}
{{col-float}}{{col-float-break}} Content {{col-float-break}} Content2 {{col-float-end}}

This template has between cross platform behavior.

Column 1 start:

  • 1
  • 2

Column 2 start: If there is not enough space to display 2 columns then the second column will be displayed underneth the first column. Otherwise they will be side by side.

  • 3
  • 4
  • 5

See also, Main, and other Hatnotes edit

Images edit

Wikipedia:Images
[[File:Wading through water.jpg|thumb|left|Text under the image goes here. E.g. These tails are due to [[ram-pressure]] stripping.]]
[[File:Name|Type|Border|Location|Alignment|Size|link=Link|alt=Alt|page=Page|lang=Langtag|Caption]]

  • {{Overlay}} – "Allows image numbered, textual number, or colour tag overlays to be positioned over an image"
- "allows the addition of explanatory notes to images in the form of actual text (which can also contain links)"
- "Other uses include cropping an image"


Result LaTeX code Other info
EXAMPLE NOT DISPLAYED TO REDUCE LOADING TIME.
{{Multiple image|width=60
|image1=Yellow card.svg
|alt1=Yellow cartouche
|image2=Red card.svg
|alt2=Red cartouche
|footer=Footer text
}}
{{multiple image|width|image1|alt1|image2|alt2}}
EXAMPLE NOT DISPLAYED TO REDUCE LOADING TIME.
{{Multiple image|perrow=2|total_width=300
|image1=Kern_Theodolit_DKM2-A.jpg
|image2=Total-Robotic-Station.jpg
|image3=DumpyLevel.jpg
|image4=GPS_Survey_Equipment_at_Weir_Dyke_Bridge_-_geograph.org.uk_-_336908.jpg
|footer=Footer text
}}
{{multiple image|width|image1|alt1|image2|alt2}}
automatic resizing of all images to the same height
Insert total_width=600 to automatically resize of all images to the SAME HEIGHT and to a given total width"
Remove total_width=600 to prevent automatic resizing of all images to the same height
{{Multiple image
|total_width       =600 <!-- REMOVE total_width= TO PREVENT AUTOMATIC RESIZING. total width of all the displayed images in pixels -->
|perrow=1
<!-- Layout parameters -->
| align             =<!-- right (default), left, center, none --> 
| direction         =<!-- horizontal (default), vertical -->
| background color  =<!-- #33CC00 - 'hex triplet' web color -->
| width             =<!-- displayed width of each image in pixels (an integer, omit "px" suffix); overrides "width[n]"s below -->
| caption_align     =<!-- left (default), center, right --> 
| image_style       =<!-- border:1; (default) -->
| image_gap         =<!-- 5 (default)-->

<!-- Header -->
| header_background =<!-- #33CC00 -->
| header_align      =<!-- center (default), left, right -->
| header            =<!-- header text -->

| image1 =<!-- NO "File:" or "Image:" prefix. Filename ONLY -->
| width1 =<!-- displayed width of image; overridden by "width" above -->
| height1=
| alt1   =
| link1  =

| image2 =
| width2 =
| height2=
| alt2   =
| link2  =
<!-- Max 10 images (image10) -->

<!-- Footer -->
| footer_background=<!-- #33CC00 -->
| footer_align     =<!-- left (default), center, right -->
| footer           =<!-- footer text -->
}}


{{Panorama}} {{Wide image}} Panorama images
  • "The main function of {{Panorama}}, as opposed to {{Wide image}}, is that the template allows you to specify a desired height of the panorama."
  • Use {{clear}} to prevent the panorama image from (possibly) being squeezed to a reduced width.
{{Panorama}} − Use this if you want to specify the image's HEIGHT
{{Panorama
|image=File: <!-- Must start with "File:Example.jpg" -->
|height=300 <!-- Height of image. In pixels, no units. Use Template:Wide_image to set the width instead -->
|width=<!-- Limit the width of Frame enclosing the image. Include units e.g. 9px or 9%. Default is based on width of web browser -->
|alt=<!-- Alternate text for visually impaired readers. -->
|caption=<!-- Caption/text to render below the image -->
|dir=<!-- Can be: ltr (default) or rtl. Should scroll bar start at the very left (ltr = left-to-right) or very right (rtl)?  -->
|align=<!-- Frame alignment. Can be: left (default), right, center, or none. -->
}}
{{clear}}
{{Panorama|image=File:Panoramique mont Everest.jpg|height=300|width=|alt=|caption=This is an example of an example.|align=center}}

EXAMPLE NOT DISPLAYED TO REDUCE LOADING TIME.



{{Wide image}} − Use this if you want to specify the image's WIDTH
{{clear}}
{{Wide image|Panoramique mont Everest.jpg|1280px|3=This is an example of an example.|4=100%|align=center|alt=}}

EXAMPLE NOT DISPLAYED TO REDUCE LOADING TIME.

Code (Displaying) edit

{{tl}}=Template Link, {{tlx}} and {{para}}
{{tl}} and {{tlx}} - Displaying templates

The {{tlx}} template is just like {{tl}} except {{tlx}} allows for arguments.

{{para}} - Displaying template parameters
Wiki source Rendered result
{{tlx|Location map|arg1|arg2}} {{Location map|arg1|arg2}}
{{tlx|Location map|param1{{=}}arg1|arg2}} {{Location map|param1=arg1|arg2}}
{{tl|Location map}} {{Location map}}
{{para|height}} |height=
{{para|height|80}} |height=80
{{tlx|Location map|arg1{{para|param2|arg2}}}} {{Location map|arg1|param2=arg2}}
{{tlx|Location map|arg1{{para|param2|arg2}}}} {{Location map|arg1|param2=arg2}}


A single space in front of a line displays the line as code.

Example: Line displayed as code because of a single space

Example:

_<------ _ indicates where the single space is. This line has no space so is displayed as normal. -->
 code_here
 <nowiki />{|class="wikitable sortable"
 !Name and surname!!Height

displays

_<------ _ indicates where the single space is. This line has no space so is displayed as normal. -->

code_here
{|class="wikitable sortable"
Name and surname Height
{{code}} and {{nowiki}}
  • <code><nowiki>CODE</nowiki></code>
    • <code>CODE</code>
    • <nowiki>CODE</nowiki>
  • <pre>CODE</pre>

Source code and result side by side
Wiki source Rendered result
<code><nowiki>CODE</nowiki></code> CODE
<code>CODE</code> CODE
<nowiki>CODE</nowiki> CODE
<pre>CODE</pre>
CODE

syntaxhighlight edit


Main: MediaWiki:Extension:SyntaxHighlight
For examples, see Wiki source code of: Help:Table


<syntaxhighlight lang="html" style="overflow:auto;" highlight="1,3-4">

Can also use: <syntaxhighlight lang="bash/C/C++/css/html/java/javascript/matlab/moin/python/R/text/tid/xml" highlight="1,3-4">

<syntaxhighlight lang="css" highlight="1,1-2" style="overflow:auto;">
{{Panorama|image=File:Example.jpg|height=300}}
</syntaxhighlight>
{{Panorama|image=File:Example.jpg|height=300}}
  • Option: lang="assembly/awk/bash/C/C++/css/cython/html/java/javascript/mathematica/matlab/moin/php/python/perl 5/ruby/R/text/tid/xml"      Example: <syntaxhighlight lang="css">
  • Option: inline      Example: <syntaxhighlight lang="css" inline>
  • Option: highlight="1,3-4,other-line-#s"      Example: <syntaxhighlight lang="css" highlight="1,3-4">
  • Option: style="white-space: pre-wrap;"      Example: <syntaxhighlight lang="css" style="white-space: pre-wrap;">
  • Option: style="display: inline-block;"      Example: <syntaxhighlight lang="css" style="display: inline-block;">


Wiki source Rendered result
<syntaxhighlight lang="html" highlight="1" style="overflow:auto;">
{{Panorama
|image=File:Example.jpg <!-- Must start with "File:" -->
|height=300 <!-- In pixels, no units e.g. 300px is wrong. -->
}}
</syntaxhighlight>
{{Panorama
|image=File:Example.jpg <!-- Must start with "File:" -->
|height=300 <!-- In pixels, no units e.g. 300px is wrong. -->
}}
<syntaxhighlight lang="text" style="overflow:auto;" highlight="1,4-5,7">
{| class="wikitable sortable mw-collapsible"
|+ Table_Title
|-
! scope="col" | Alphabetic
! scope="col" | Numeric
! scope="col" | Date
! scope="col" class="unsortable" | Unsortable
|-
| d || 20 || 2008-11-24 || This column
|-
| a || 6 || 1979-07-23 || cannot be sorted.
|}
</syntaxhighlight>
{| class="wikitable sortable mw-collapsible"
|+ Table_Title
|-
! scope="col" | Alphabetic
! scope="col" | Numeric
! scope="col" | Date
! scope="col" class="unsortable" | Unsortable
|-
| d || 20 || 2008-11-24 || This column
|-
| a || 6 || 1979-07-23 || cannot be sorted.
|}
With     inline:     <syntaxhighlight lang="text" inline>CODE</syntaxhighlight> CODE
Without inline:    <syntaxhighlight lang="text">CODE</syntaxhighlight>
CODE


Line numbers

Show line numbers with line e.g.: <syntaxhighlight lang=tid line highlight="14">

From: Help:Sorting#Specifying a sort key for a cell

Wiki source Rendered result

WITH line

{|class="wikitable sortable"
!Name and surname!!Rank
|-
|data-sort-value="Smith, John"|John Smith||data-sort-value="16"|[[Corporal]]
|-
|data-sort-value="Ray, Ian"|Ian Ray||data-sort-value="8"|[[Captain (OF-2)]]
|}

WITH line i.e. <syntaxhighlight lang=tid highlight="0"> is used

<syntaxhighlight lang=tid line highlight="0">
{|class="wikitable sortable"
!Name and surname!!Rank
|-
|data-sort-value="Smith, John"|John Smith||data-sort-value="16"|[[Corporal]]
|-
|data-sort-value="Ray, Ian"|Ian Ray||data-sort-value="8"|[[Captain (OF-2)]]
|}
</syntaxhighlight>

WithOUT line

{|class="wikitable sortable"
!Name and surname!!Rank
|-
|data-sort-value="Smith, John"|John Smith||data-sort-value="16"|[[Corporal]]
|-
|data-sort-value="Ray, Ian"|Ian Ray||data-sort-value="8"|[[Captain (OF-2)]]
|}

WithOUT line i.e. <syntaxhighlight lang=tid highlight="0"> is used

  • Misc: Over the edit box, there is a "Syntax highlighting" button (its icon is a marker angled at 45 degrees and it is to the left of "> Advanced > Special characters > Help > Cite"). It is a very helpful feature that is not on by default.

Maps edit

  • Examples: User:Rr016 has many examples of high quality maps.
  • {{legend}} - {{legend|OliveDrab|[[Lists of colors]]}} {{legend|#f1f580|[[Template:Color chart X11]]}} produces
pushpin maps

Using {{Location map}}

 
Suwałki
The Suwałki Gap is named after the city of Suwałki
 
Suwałki
Suwałki (Podlaskie Voivodeship)
 
Suwałki
Suwałki (Baltic Sea)
 
Suwałki
Suwałki (Europe)
 
Suwałki
Suwałki (European Russia)
 
Suwałki
Suwałki (NATO)
 
Suwałki
Suwałki (European Union)
{{stack begin}}
<div style="background:white; border:1px solid rgb(0, 0, 0); padding:2px; align:center; text-align:left; width:260; position:relative;">
{{Location map|Poland#Podlaskie Voivodeship#Baltic Sea#Europe#European Russia#NATO#European Union
|relief        = Yes
|width         = 260
|default_width = 
|float         = 
|caption       = The [[Suwałki Gap]] is named after the city of [[Suwałki]]
|alt           = The city of Suwałki
|label         = Suwałki
|link          = Suwałki
|position      = 
|mark          = Blue_pog.svg
|marksize      = 6
|coordinates   = {{coord|54|05|56|N|22|55|43|E|region:PL_type:city|display=inline,title}}
|border        = infobox
|background    = 
}}
</div>
{{stack end}}




For {{Infobox settlement}}

| coordinates                = {{coord|54|20|51|N|18|38|43|E|region:PL|display=inline,title}}
| pushpin_relief             = Yes
| pushpin_label              = 
| pushpin_label_position     = 
| pushpin_map                = Poland#Pomeranian Voivodeship#Europe#Baltic Sea
| pushpin_map_alt            = 
| pushpin_map_caption        = 
| pushpin_mapsize            = <!-- In pixels without px (Ex: write 300, not 300px) -->
| pushpin_mark               = 
| pushpin_mark_width         = 
| pushpin_overlay            = 
| coor_pinpoint              = 
| coordinates_footnotes      = <!-- References -->
  • coordinates = {{coord|1|2|N|4|5|E|region:CountryCode|display=inline,title}} − Necessary for the pushpin map to display.
  • pushpin_relief Template:Location map#Relief parameter − "Any non-blank value (1, yes, etc.) will cause the template to display the map specified in the map definition template as image1, which is usually a relief map; see the example at Template:Location map+/relief."
  • pushpin_label − "The text of the label to display next to the identifying mark; a wikilink can be used. You can enclose the label inside of {{nowrap}} if you want to make sure that it stays on a single line. The default (if not specified) is no label, just the marker."
  • pushpin_label_position − "The position of the label relative to the identifying mark; valid values are left, right, top, bottom and none. This defaults to either left or right, depending on the coordinates of the marker and its position relative to the right border of the map image. When |position=none, any defined label will not be displayed with the mark, but it will be used to create the default caption."
  • pushpin_overlay − "Can be used to specify an image to be superimposed on the regular pushpin map. Equivalent to overlay_image parameter in Template:Location map."
  • coor_pinpoint − "If needed, to specify more exactly where (or what) coordinates are given (e.g. Town Hall) or a specific place in a larger area (e.g. a city in a county). Example: In the article Masovian Voivodeship, coor_pinpoint=Warsaw specifies Warsaw."
  • coordinates_footnotes − "Reference(s) for coordinates, placed within <ref> </ref> tags, possibly using the citing format at {{Cite web}}"

Links and anchors edit

Wiktionary & Linking between Wikis
wiktionary:page or wikt:page
  • [[wiktionary:page|page]] and [[wikt:page|page]] both display: page and page with out the prefix.
Links to Wikimedia Commons
{{Commons category inline}} generates a link to the corresponding Commons category.

Ex: * {{Commons category inline}} in the article "ArticleName" produces:

  • Media related to ArticleName at Wikimedia Commons
Links to category pages; renaming links
[[:Category:Sodium|Sodium]]   produces:  Sodium
{{See also|:Category:Sodium compounds|l1=Sodium compounds}}
Adding categories
Annotated links

Ex: {{annotated link|Article-Name|Text to display instead of Article-Name}} the second parameter is useful e.g. so "Braarudosphaera bigelowii" is display instead of ""Braarudosphaera bigelowii"

{{annotated link|

{{annotated link|Topological vector space}}

EX: Topological vector space – Vector space with a notion of nearness

{{visible anchor|Displayed Anchor Name|name2}}

{{visible anchor|name1|name2|text=Displayed Text}}

  • DISADVANTAGE: Using |text= prevents "Displayed Text" from being highlighted by a back.
{{anchor}} and {{visible anchor|text}}

{{anchor|name1|name2}}

  • Add the {{anchor}} to line ABOVE section title: == Section title ==

Misc edit

CSS Text shadows


Page titles/Page names {{tl|short description}}

{{short description}}

Taken from: WP:SDNOTDEF:

  • be shortno more than about 40 characters (but this can be slightly exceeded if necessary)
  • be written in plain text – without HTML tags or Wiki markup
  • Start with a capital letter
  • avoid initial articles (A, An, The) unless essential to the meaning
  • no period.


Page titles/Page names {{DISPLAYTITLE:''example'' title}} and {{lowercase title}} and {{italic title}}

Place BELOW {{Short description}} at the top of the page's source.

  • {{DISPLAYTITLE:''examPle'' Ti''t''le}} - Custom title.
  • {{lowercase title}} - Lowercase first letter of the page's title.
  • {{lowercase title|italic=yes}} Lowercase first letter of the page's title and make page's title italics except for anything in brackets. Use force to force entire title to be italics.
  • {{italic title}} - Content in brackets are NOT italicized. Use |all=yes to make the entire title italics.


Horizontal lines {{hr}} and {{dividing line}}
{{dividing line}} - For rendering lines where the code ---- doesn't work.
  • {{dividing line}}

{{hr}} - Horizontal line/rule



  • {{anchor|Anchor name goes here}}