Help:Editing

From miki
Revision as of 15:35, 19 July 2015 by Mip (talk | contribs) (→‎Tables: vertical alignment in tables)
Jump to navigation Jump to search

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|<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

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;">
...
<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

Retrieved from "https://miki.immie.org/mediawiki/index.php?title=Help:Editing&oldid=7584"