Help:Editing: Difference between revisions

From miki
Jump to navigation Jump to search
(→‎Frequently used: Definition List)
 
(45 intermediate revisions by 3 users not shown)
Line 1: Line 1:
== External Links ==
== Styles in this Wiki ==
{| class="wikitable" width="100%"
|-
!Width="50%"|Hint!!Width="50%"|Result
|-
|Width="50%"| Hide long source file
<pre>
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
&lt;/source>|headerstyle=background:#ccccff;text-align:left;}} }}
</pre>
|
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;}} }}
|}


=== MediaWiki ===
== Hint and Tips ==
{| class="wikitable"
|-
!Width="50%"|Hint!!Width="50%"|Result
|-
|Use the template '''[[Template:pl2]]''' to intend '''pre''', '''source'''... block by ''2em'':
<source lang="html4strict">
* Some header
{{pl2|1=<pre>A left padded block</pre>}}
</source>
|
* Some header
{{pl2|1=<pre>A left padded block</pre>}}
|-
|... but the template above '''can't''' be used for tables:
<source lang="html4strict">
* Some header
<div style="padding-left:2em;">
{|
|-
| hello || world
|}
</div>
</source>
|
* Some header
<div style="padding-left:2em;">
{|
|-
| hello || world
|}
</div>
|-
| Use template [[Template:Hidden]] to hide some section with toggle button (see [http://en.wikipedia.org/wiki/Template:Hidden]).
<source lang="html4strict">
{{hidden|header|hidden message
|style=background:#ccccff
|headerstyle=text-align:left;
|contentstyle=text-align:right}}
</source>
| {{hidden|header|hidden message
|style=background:#ccccff
|headerstyle=text-align:left;
|contentstyle=text-align:right}}
|-
| Use template [[Template:Hide]] for a simpler version
<source lang="html4strict">
Below you can find some hidden text {{hide|
'''This is the famous hidden text'''}}
</source>
|Below you can find some hidden text {{hide|
'''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:
<source lang="html4strict">
* {{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>
</source>
|
* {{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>
|-
| Use <tt><nowiki>__TOC__</nowiki></tt> 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:
:<source lang="html4strict" enclose="prevalid">
#REDIRECT [[SomePage]]
</source>
|
#REDIRECT [[SomePage]]
|}


== Frequently Used ==
* [http://www.mediawiki.org/wiki/Help:Formatting Official help on formatting]
* [http://www.mediawiki.org/wiki/Help:Tables Help:Tables]


{| align="center" {{Prettytable}}
=== From Wikipedia ===
|-
|{{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 ==
* [http://en.wikipedia.org/wiki/Wikipedia:How_to_edit_a_page How to edit a page on Wikipedia]
* [http://en.wikipedia.org/wiki/Help:Editing Help:Editing]
* [http://en.wikipedia.org/wiki/Help:Wikitext Help:WikiText]
* [http://en.wikipedia.org/wiki/Help:List Help:List]
* [http://en.wikipedia.org/wiki/Help:Table Help:Table]
* [http://en.wikipedia.org/wiki/Wikipedia:WikiProject_User_Page_Help/Do-It-Yourself/Formatting_Text More formatting help]

== Frequently Used ==


{| align="center" {{Prettytable}}
{| align="center" {{Prettytable}}
Line 31: Line 142:
&rArr; &lArr; &dArr; &uArr; &hArr; &rarr; &darr; &uarr; &larr; &harr;
&rArr; &lArr; &dArr; &uArr; &hArr; &rarr; &darr; &uarr; &larr; &harr;
|-
|-
|Space
| colspan="3" align="center" | ''only at the beginning of the line''
|
<tt>&amp;nbsp;</tt>
|
&nbsp;
|-
|-
|Colon
|Definition list
|
|
<tt>&#59;Definition<br />
<tt>&amp;#58;</tt>
&#58;item 1<br />
&#58;item 2<br /></tt>
|
|
&#58;
;Definition
|-
:item 1
|Equal sign
:item 2
|
<tt>&amp;#61;</tt>
|
&#61;
|-
|Vertical bar
|
<tt>&amp;#124;</tt>
|
&#124;
|}
|}

== HTML Tags ==

{| align="center" class="wikitable"
|-
!width="10%"|Description
!Example
!Result
|-
|[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 size="3">font size</font></nowiki></tt><br/>
<tt><nowiki>Change the <font face="verdana">font face</font></nowiki></tt>
|Change the <font color="red">font color</font><br/>
Change the <font size="3">font size</font><br/>
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>.
|}

== Linking to Uploaded Files ==

{| align="center" {{Prettytable}}
|-
|{{Hl2}} |'''Description'''
|{{Hl2}} |'''You type'''
|{{Hl2}} |'''You get'''
|-
|Linking to file
|<tt><nowiki>[[Media:Visio-Vim graphic cheatsheet-AZERTY-MIP.pdf|My file]]</nowiki></tt>
|[[Media:Visio-Vim graphic cheatsheet-AZERTY-MIP.pdf|My file]]
|}

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

Basic syntax for table is
<table>
<tr>
<td valign="top">
<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-cell-attr <font color="red">|</font>]''</font>Orange
|<font color="green">''[opt-cell-attr <font color="red">|</font>]''</font>Apple
|- <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>Pie
|- <font color="green">''[opt-line-attr''</font>
|<font color="green">''[opt-cell-attr <font color="red">|</font>]''</font>Butter |<font color="green">''[opt-cell-attr]</font>|'' Ice cream
|}
</tt>
</td>
<td>which gives...</td>
<td valign="top">
<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;td <font color="green">''[opt-cell-attr]''</font>&gt;Orange&lt;/td&gt;
&lt;td <font color="green">''[opt-cell-attr]''</font>&gt;Apple&lt;/td&gt;
&lt;/tr&gt;
&lt;tr <font color="green">''[opt-line-attr]''</font>&gt;
&lt;td <font color="green">''[opt-cell-attr]''</font>&gt;&lt;/td&gt;
&lt;td <font color="green">''[opt-cell-attr]''</font>&gt;Pie&lt;/td&gt;
&lt;/tr&gt;
&lt;tr <font color="green">''[opt-line-attr]''</font>&gt;
&lt;td <font color="green">''[opt-cell-attr]''</font>&gt;Butter&lt;/td&gt;&lt;td <font color="green">''[opt-cell-attr]''</font>&gt;Ice cream&lt;/td&gt;
&lt;/tr&gt;
&lt;/table&gt;</tt>
</td>
</tr>
</table>

{| {{Prettytable}}
|-
|Width="50%"|Table can be easily formatted using templates like:
<source lang="c">
{| {{Prettytable}}
|-
|{{Hl2}}|First
|Second
|-
|Third
|{{Hl2}}|Fourth
|}
</source>

|Width="50%"|
{| {{Prettytable}}
|-
|{{Hl2}}|First
|Second
|-
|Third
|{{Hl2}}|Fourth
|}

|-
|Or better yet, using ''CSS'' (eg. see [[MediaWiki:Common.css]]) class '''wikitable''' (see [[metawikipedia:Help:Table|Table]]):
<source lang="c">
{| class="wikitable"
|-
!First
|Second
|-
|Third
!Fourth
|}
</source>

|
{| class="wikitable"
|-
!First
|Second
|-
|Third
!Fourth
|}
|-
|Cell content can be formatted for each cell individually or for all cells on a same row
<source lang="c">
{| 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
|}
|}
</source>
|
{| 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
|}
|-
|To align vertically a cell, add tag <code>valign</code> to ''each row'':
<source lang="c">
{| 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
|}
</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
|}
</source>
|
{| class="wikitable" style="margin:auto"
! header1 !! header2
|-
| 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 ==
=== Raw File ===

See reference syntax [http://wiki.yobi.be/wiki/Mediawiki_RawFile#Syntax here]

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

echo 'Hello, World!'
</source>
</pre>
|
Download [{{#file: HelpRawScript.sh}} this file].
<source lang="bash">
#! /bin/bash

echo 'Hello, World!'
</source>
|-
|Example with an anchor (necessary when there is intermediate block - but need keeping name in sync!).<br>
When anchor is on another page, use notation '''<code><nowiki>{{#fileLink: myscript.sh|Another Page}}</nowiki></code>'''
<pre>
Download [{{#filelink: HelpAnotherRawScript.sh}} this file].
<pre>
This block is just to confuse RawFile
&lt;/pre>
{{#fileanchor: HelpAnotherRawScript.sh}}
<source lang="bash">
#! /bin/bash

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

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

echo 'Hello, Wonderland!'
</source></div>
</pre>
|
Download [{{#file: HiddenRawScript.sh}} this file].
<div style="display:none"><source lang="bash">
#! /bin/bash

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

== External Links ==

=== MediaWiki ===
* [http://www.mediawiki.org/wiki/Help:Editing Help:Editing]
* [http://www.mediawiki.org/wiki/Manual:Interface/Stylesheets Manual:Interface/Stylesheets]
* [http://www.mediawiki.org/wiki/Help:Images Help:Images]

=== MediaWiki - Meta ===

;[[metawikipedia:Help:Contents|Help Contents]]
;[[metawikipedia:Help:Editing|Editing]]
:[[metawikipedia:Help:Advanced editing|Advanced editing]] | [[metawikipedia:Help:Editing FAQ|Editing FAQ]] | [[metawikipedia:Help:Edit toolbar|Edit toolbar]] | [[metawikipedia:Help:Export|Export]] | [[metawikipedia:Help:Import|Import]] | [[metawikipedia:Help:Editing shortcuts|Shortcuts]]
;Style & formatting
:[[metawikipedia:Help:Wikitext examples|Wikitext examples]] | [[metawikipedia::Help:Reference card|Reference card]] | [[metawikipedia:Help:HTML in wikitext|HTML in wikitext]] | [[metawikipedia:Help:List|List]] | [[metawikipedia:Help:Table|Table]] | [[metawikipedia:Help:Sorting|Sorting]] | [[metawikipedia:Help:Cascading_style_sheets|CSS]]
;Images
:[[metawikipedia:Help:Images and other uploaded files|Images and Uploaded files]]

=== From Wikipedia ===

*[[wikipedia:Wikipedia:How_to_edit_a_page|How_to_edit_a_page]]
*[[wikipedia:Help:Editing|Editing]]
*[[wikipedia:Wikipedia:User_Page_Design_Center|Wikipedia:User_Page_Design_Center]]
**[[wikipedia:Wikipedia:User_Page_Design_Center/Style|Wikipedia:User_Page_Design_Center/Style]]
* [[wikipedia:Image_markup|Wikipedia:Extended image syntax]]

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