Help:Editing: Difference between revisions

From miki
Jump to navigation Jump to search
 
(15 intermediate revisions by 2 users not shown)
Line 34: Line 34:
<source lang="html4strict">
<source lang="html4strict">
* Some header
* Some header
{{pl2|<pre>A left padded block</pre>}}
{{pl2|1=<pre>A left padded block</pre>}}
</source>
</source>
|
|
* Some header
* Some header
{{pl2|<pre>A left padded block</pre>}}
{{pl2|1=<pre>A left padded block</pre>}}
|-
|-
|... but the template above '''can't''' be used for tables:
|... but the template above '''can't''' be used for tables:
Line 106: Line 106:


== Frequently Used ==
== Frequently Used ==

{| align="center" {{Prettytable}}
|-
|{{Hl2}} |'''Description'''
|{{Hl2}} |'''You type'''
|{{Hl2}} |'''You get'''
|-
| colspan="3" align="center" | ''only at the beginning of the line''
|-
|Definition list
|
<tt>&#59;Definition<br />
&#58;item 1<br />
&#58;item 2<br /></tt>
|
;Definition
:item 1
:item 2
|}

== HTML entities ==


{| align="center" {{Prettytable}}
{| align="center" {{Prettytable}}
Line 127: Line 148:
&nbsp;
&nbsp;
|-
|-
|Colon
| colspan="3" align="center" | ''only at the beginning of the line''
|
<tt>&amp;#58;</tt>
|
&#58;
|-
|-
|Equal sign
|Definition list
|
|
<tt>&#59;Definition<br />
<tt>&amp;#61;</tt>
&#58;item 1<br />
&#58;item 2<br /></tt>
|
|
&#61;
;Definition
|-
:item 1
|Vertical bar
:item 2
|
<tt>&amp;#124;</tt>
|
&#124;
|}
|}


== HTML Tags ==
== HTML Tags ==


{| align="center" {{Prettytable}}
{| align="center" class="wikitable"
|-
|-
|{{Hl2}} |'''Description'''
!width="10%"|Description
!Example
|{{Hl2}} |'''You type'''
!Result
|{{Hl2}} |'''You get'''
|-
|-
|[http://www.w3schools.com/tags/tag_FONT.asp <tt>font</tt>] tag
|[http://www.w3schools.com/tags/tag_FONT.asp <tt>font</tt>]
|<tt><nowiki>Change the <font color="red">font color</font></nowiki></tt><br/>
|<tt><nowiki>Change the <font color="red">font color</font></nowiki></tt><br/>
<tt><nowiki>Change the <font size="3">font size</font></nowiki></tt><br/>
<tt><nowiki>Change the <font size="3">font size</font></nowiki></tt><br/>
Line 155: Line 182:
Change the <font size="3">font size</font><br/>
Change the <font size="3">font size</font><br/>
Change the <font face="verdana">font face</font>
Change the <font face="verdana">font face</font>
|-
|[http://www.w3schools.com/tags/tag_strike.asp <tt>strike</tt>] / [http://www.w3schools.com/tags/tag_strike.asp <tt>s</tt>]<br/>
[http://www.w3schools.com/tags/tag_u.asp <tt>u</tt>]<br/>
[http://www.w3schools.com/tags/tag_span.asp <tt>span</tt>]
|<tt><nowiki><strike>Strike out</strike> or <u>underline</u> text, or write it
<span style="font-variant:small-caps">in small caps</span>.</nowiki></tt>
|<s>Strike out</s> or <u>underline</u> text, or write it <span style="font-variant:small-caps">in small caps</span>.
|}
|}


Line 171: Line 205:


== Tables ==
== Tables ==
Reference: https://meta.wikimedia.org/wiki/Help:Table


Basic syntax for table is
Basic syntax for table is
Line 177: Line 212:
<td valign="top">
<td valign="top">
<tt>{| <font color="green">''[opt-table-attr]''</font>
<tt>{| <font color="green">''[opt-table-attr]''</font>
|+ <font color="green">''[opt-caption-attr]<font color="red">|</font>''</font>Caption
|- <font color="green">''[opt-line-attr]''</font>
|- <font color="green">''[opt-line-attr]''</font>
|<font color="green">''[opt-cell-attr <font color="red">|</font>]''</font>Orange
|<font color="green">''[opt-cell-attr <font color="red">|</font>]''</font>Orange
|<font color="green">''[opt-cell-attr <font color="red">|</font>]''</font>Apple
|<font color="green">''[opt-cell-attr <font color="red">|</font>]''</font>Apple
|- <font color="green">''[opt-line-attr''</font>
|- <font color="green">''[opt-line-attr]''</font>
|<font color="green">''[opt-cell-attr <font color="red">|</font>]''</font>
|<font color="green">''[opt-cell-attr <font color="red">|</font>]''</font>
|<font color="green">''[opt-cell-attr <font color="red">|</font>]''</font>Pie
|<font color="green">''[opt-cell-attr <font color="red">|</font>]''</font>Pie
Line 193: Line 229:
<td valign="top">
<td valign="top">
<tt>&lt;table <font color="green">''[opt-table-attr]''</font>&gt;
<tt>&lt;table <font color="green">''[opt-table-attr]''</font>&gt;
&lt;caption <font color="green">''[opt-caption-attr]''</font>&gt;Caption&lt;/caption&gt;
&lt;tr <font color="green">''[opt-line-attr]''</font>&gt;
&lt;tr <font color="green">''[opt-line-attr]''</font>&gt;
&lt;td <font color="green">''[opt-cell-attr]''</font>&gt;Orange&lt;/td&gt;
&lt;td <font color="green">''[opt-cell-attr]''</font>&gt;Orange&lt;/td&gt;
Line 212: Line 249:
|-
|-
|Width="50%"|Table can be easily formatted using templates like:
|Width="50%"|Table can be easily formatted using templates like:
<source lang="c">
<pre>
{| {{Prettytable}}
{| {{Prettytable}}
|-
|-
Line 221: Line 258:
|{{Hl2}}|Fourth
|{{Hl2}}|Fourth
|}
|}
</pre>
</source>


|Width="50%"|
|Width="50%"|
Line 235: Line 272:
|-
|-
|Or better yet, using ''CSS'' (eg. see [[MediaWiki:Common.css]]) class '''wikitable''' (see [[metawikipedia:Help:Table|Table]]):
|Or better yet, using ''CSS'' (eg. see [[MediaWiki:Common.css]]) class '''wikitable''' (see [[metawikipedia:Help:Table|Table]]):
<source lang="c">
<pre>
{| class="wikitable"
{| class="wikitable"
|-
|-
Line 244: Line 281:
!Fourth
!Fourth
|}
|}
</pre>
</source>


|
|
Line 257: Line 294:
|-
|-
|Cell content can be formatted for each cell individually or for all cells on a same row
|Cell content can be formatted for each cell individually or for all cells on a same row
<source lang="c">
<pre>
{| class="wikitable"
{| class="wikitable"
|-
|-
Line 273: Line 310:
|}
|}
|}
|}
</pre>
</source>

|
|
{| class="wikitable"
{| class="wikitable"
Line 291: Line 327:
|}
|}
|-
|-
|To align vertically a cell, add tag <code>valign</code> to ''each row'':
|To center a table adds <tt>style="text-align:center; margin:auto"</tt>:
<source lang="c">
<pre>
{| class="wikitable" style="text-align:center; margin:auto"
{| class="wikitable"
|-
! h1 !! h2
|one<br/>two<br/>three
|default (center)
|- valign=top
|one<br/>two<br/>three
|top
|- valign=center
|one<br/>two<br/>three
|center
|- valign=bottom
|one<br/>two<br/>three
|bottom
|}
</source>
|
{| class="wikitable"
|-
|one<br/>two<br/>three
|default (center)
|- valign=top
|one<br/>two<br/>three
|top
|- valign=center
|one<br/>two<br/>three
|center
|- valign=bottom
|one<br/>two<br/>three
|bottom
|}
|-
|To center a table adds <tt>style="margin:auto"</tt>:
<source lang="c">
{| class="wikitable" style="margin:auto"
! header1 !! header2
|-
|-
| a || b
| a || b
|}
|}
</pre>
</source>
|
|
{| class="wikitable" style="text-align:center; margin:auto"
{| class="wikitable" style="margin:auto"
! h1 !! h2
! header1 !! header2
|-
|-
| a || b
| a || b
|}
|}
|-
|To center the content of all cells in a table adds <tt>style="text-align:center"</tt>:
<source lang="c">
{| class="wikitable" style="text-align:center"
! header1 !! header2
|-
| a || b
|}
|}
</source>
|
{| class="wikitable" style="text-align:center"
! header1 !! header2
|-
| a || b
|}
|-
|Use <code>style="table-layout:fixed"</code> to force uniform column width in a table. The table width must be also specified for this to work correctly.
<source lang="c">
{| class="wikitable" style="table-layout:fixed" width="200pt"
|-
! h1 !! h2 !! h3 !! h4
|-
|a|very|very very|long text string in a same cell
|}
</source>
|
{| class="wikitable" style="table-layout:fixed" width="300pt"
|-
! h1 !! h2 !! h3 !! h4
|-
|a||very||very very||long text string in a same cell
|}
|}

== Multi-Columns ==
Reference: [http://www.w3.org/TR/css3-multicol/ CSS Multi-column Layout Module]

<source lang="html4strict">
<div style="column-width:25em;-webkit-column-width:25em;-moz-column-width:25em;">
...
<p style="break-before:column;"/>
...
</div>
</source>


== Using Extensions ==
== Using Extensions ==

Latest revision as of 19:10, 22 September 2020

Styles in this Wiki

Hint Result
Hide long source file
The following scripts a well-known message
{{pl2|
{{hidden|<tt>/path/file.sh</tt>
([{{#filelink: file.sh}} download])|{{#fileanchor: file.sh}}
<source lang="bash">
#! /bin/bash
echo Hello, World
</source>|headerstyle=background:#ccccff;text-align:left;}} }}

The following scripts a well-known message

Hint and Tips

Hint Result
Use the template Template:pl2 to intend pre, source... block by 2em:
* Some header
{{pl2|1=<pre>A left padded block</pre>}}
  • Some header
A left padded block
... but the template above can't be used for tables:
* Some header
<div style="padding-left:2em;">
{|
|-
| hello || world
|}
</div>
  • Some header
hello world
Use template Template:Hidden to hide some section with toggle button (see [1]).
{{hidden|header|hidden message
|style=background:#ccccff
|headerstyle=text-align:left;
|contentstyle=text-align:right}}
Use template Template:Hide for a simpler version
Below you can find some hidden text {{hide|
'''This is the famous hidden text'''}}
Below you can find some hidden text
This is the famous hidden text
Use template Template:Toggle and _toggler class for more elaborate use. _toggler is used to create button to toggle visibility of tags of given class. Note that you can assign several classes to the same tag:
* {{toggle|item1|ITEM1|item1 item}}
* {{toggle|item2|ITEM2|item2 item}}
* <span class="_toggler-item1">toggle item1</span>
* <span class="_toggler-item2">toggle item2</span>
* <span class="_toggler-item">toggle both items</span>
  • item1
  • item2
  • toggle item1
  • toggle item2
  • toggle both items
Use __TOC__ to control the location of the Table Of Content. This is particularly handy when there are some texts before the first heading in a page, and you want the TOC to appear first.
Page REDIRECT - To automatically redirect one page to another:
#REDIRECT [[SomePage]]
  1. REDIRECT SomePage

Frequently Used

Description You type You get
only at the beginning of the line
Definition list

;Definition
:item 1
:item 2

Definition
item 1
item 2

HTML entities

Description You type You get
anywhere
Arrows entities

&rArr; &lArr; &dArr; &uArr; &hArr; &rarr; &darr; &uarr; &larr; &harr;

⇒ ⇐ ⇓ ⇑ ⇔ → ↓ ↑ ← ↔

Space

&nbsp;

 

Colon

&#58;

:

Equal sign

&#61;

=

Vertical bar

&#124;

|

HTML Tags

Description Example Result
font Change the <font color="red">font color</font>

Change the <font size="3">font size</font>
Change the <font face="verdana">font face</font>

Change the font color

Change the font size
Change the font face

strike / s

u
span

<strike>Strike out</strike> or <u>underline</u> text, or write it <span style="font-variant:small-caps">in small caps</span>. Strike out or underline text, or write it in small caps.

Linking to Uploaded Files

Description You type You get
Linking to file [[Media:Visio-Vim graphic cheatsheet-AZERTY-MIP.pdf|My file]] My file

Tables

Reference: https://meta.wikimedia.org/wiki/Help:Table

Basic syntax for table is

{| [opt-table-attr] 
|+ [opt-caption-attr]|Caption
|- [opt-line-attr]
|[opt-cell-attr |]Orange
|[opt-cell-attr |]Apple
|- [opt-line-attr]
|[opt-cell-attr |]
|[opt-cell-attr |]Pie
|- [opt-line-attr
|[opt-cell-attr |]Butter |[opt-cell-attr]| Ice cream 
|}



which gives...
<table [opt-table-attr]>
<caption [opt-caption-attr]>Caption</caption>
<tr [opt-line-attr]>
<td [opt-cell-attr]>Orange</td>
<td [opt-cell-attr]>Apple</td>
</tr>
<tr [opt-line-attr]>
<td [opt-cell-attr]></td>
<td [opt-cell-attr]>Pie</td>
</tr>
<tr [opt-line-attr]>
<td [opt-cell-attr]>Butter</td><td [opt-cell-attr]>Ice cream</td>
</tr>
</table>
Table can be easily formatted using templates like:
{| {{Prettytable}}
|-
|{{Hl2}}|First
|Second
|-
|Third
|{{Hl2}}|Fourth
|}
First Second
Third Fourth
Or better yet, using CSS (eg. see MediaWiki:Common.css) class wikitable (see Table):
{| class="wikitable"
|-
!First
|Second
|-
|Third
!Fourth
|}
First Second
Third Fourth
Cell content can be formatted for each cell individually or for all cells on a same row
{| class="wikitable"
|-
!Very long header
!Very long header
!Very long header
|-
|align="left"|left
|align="center"|center
|align="right"|right
|- align="center"
|center
|center
|center
|}
|}
Very long header Very long header Very long header
left center right
center center center
To align vertically a cell, add tag valign to each row:
{| class="wikitable"
|-
|one<br/>two<br/>three
|default (center)
|- valign=top
|one<br/>two<br/>three
|top
|- valign=center
|one<br/>two<br/>three
|center
|- valign=bottom
|one<br/>two<br/>three
|bottom
|}
one
two
three
default (center)
one
two
three
top
one
two
three
center
one
two
three
bottom
To center a table adds style="margin:auto":
{| class="wikitable" style="margin:auto"
! header1 !! header2
|-
| a || b
|}
header1 header2
a b
To center the content of all cells in a table adds style="text-align:center":
{| class="wikitable" style="text-align:center"
! header1 !! header2
|-
| a || b
|}
header1 header2
a b
Use style="table-layout:fixed" to force uniform column width in a table. The table width must be also specified for this to work correctly.
{| class="wikitable" style="table-layout:fixed" width="200pt"
|-
! h1 !! h2 !! h3 !! h4
|-
|a|very|very very|long text string in a same cell
|}
h1 h2 h3 h4
a very very very long text string in a same cell

Multi-Columns

Reference: CSS Multi-column Layout Module

<div style="column-width:25em;-webkit-column-width:25em;-moz-column-width:25em;">
...
<p style="break-before:column;"/>
...
</div>

Using Extensions

Raw File

See reference syntax here

Example without anchor (best choice when block immediately follows the link).
Download [{{#file: HelpRawScript.sh}} this file].
<source lang="bash">
#! /bin/bash

echo 'Hello, World!'
</source>

Download [{{#file: HelpRawScript.sh}} this file].

#! /bin/bash

echo 'Hello, World!'
Example with an anchor (necessary when there is intermediate block - but need keeping name in sync!).

When anchor is on another page, use notation {{#fileLink: myscript.sh|Another Page}}

Download [{{#filelink: HelpAnotherRawScript.sh}} this file].
<pre>
This block is just to confuse RawFile
</pre>
{{#fileanchor: HelpAnotherRawScript.sh}}
<source lang="bash">
#! /bin/bash

echo 'Hello, World!'
</source>
Download [{{#filelink: HelpAnotherRawScript.sh}} this file].
This block is just to confuse RawFile

{{#fileanchor: HelpAnotherRawScript.sh}}

#! /bin/bash

echo 'I said "Hello, World!"'
For very long text, it is possible to hide the file content using CSS style="display:none"
Download [{{#file: HiddenRawScript.sh}} this file].
<div style="display:none"><source lang="bash">
#! /bin/bash

echo 'Hello, Wonderland!'
</source></div>

Download [{{#file: HiddenRawScript.sh}} this file].

#! /bin/bash

echo 'Hello, Wonderland!'

External Links

MediaWiki

MediaWiki - Meta

Help Contents
Editing
Advanced editing | Editing FAQ | Edit toolbar | Export | Import | Shortcuts
Style & formatting
Wikitext examples | Reference card | HTML in wikitext | List | Table | Sorting | CSS
Images
Images and Uploaded files

From Wikipedia