Help:Editing

From Computer Science Wiki
Jump to navigation Jump to search

Before editing pages in this wiki you should become familiar not just with the mechanics of mediawiki markup but also with policies regarding posting and content.

Formatting

Wiki markup

If you have never used MediaWiki before, an overview of the facilities provided for formatting text using 'wiki markup' is available in the formatting section, along with instructions for inserting links, and images.

Html markup

MediaWiki permits a number of HTML elements to be used for page formatting. The following elements are currently permitted in pages on this wiki: <blockquote>, <code>, <tt>, <sup>, <sub>, <pre>, <div>, <span>, <table>, <tr>, <th>, <td>, <ul>, <ol>, <li>, <dl>, <dt>, <dd>

Edit page summary box

The Summary box is not enforced - if you want to follow Wikipedia's convention, feel free to do so, but any descriptive summary is allowed, as are empty summaries.

Testing out formatting

If you want to just play around with formatting to get a feel for it without having to edit an existing page, you can click on your name at the top of the page to go to your user page (User:Mbasscp2 for example), and you can put anything you want there including tests.

Extensions

This mediawiki installation has the following extensions installed and available to page editors:

Cite

Provided to allow citations in text easily. To use the extension, surround text that you wish to be placed in a reference with <cite>text here</cite>, and place a <references /> marker on the page to indicate the location at which references should be listed. Full documentation and examples can be found on the extension's page.

Maths

The Math extension is enabled in this wiki, allowing the inclusion of mathematical expressions in pages. When you need to include maths in a page, enter the LaTeX description of the expression between <math></math tags. Full documentation with LaTeX help can be found here

Example

<math>Y = x + 1</math>:

<math>L(x|p) = \binom{n}{x}p^x(1-p)^{n-x} \qquad x = 0,1,2,3,\cdots , n</math>:

Zebra tables

If you need to create tables with zebra rows (ie: rows coloured in alternating colours to aid with readability), then when creating a table give it the class 'zebra' and all colouration will be handled automatically for you. Table rows containing table data cells are coloured alternately and support mouse-over highlighting to provide additional row identification, while rows containing table header cells are coloured in a single colour distinct from the zebra rows and with no highlight effect.

Example

{| class="zebra"
! Testing !! Testing !! Testing
|-
! colspan="2" | Testing !! Testing
|-
| Testing || Testing || Testing
|-
| Testing || Testing || Testing
|-
| Testing || Testing || Testing
|}

Will generate a table that looks like:

Testing Testing Testing
Testing Testing
Testing Testing Testing
Testing Testing Testing
Testing Testing Testing


TWPopup

Allows arbitrary content to be 'hidden' in a popup that is shown (after a configurable delay) when the user hovers the mouse over a piece of text or other element on the page. To use the extension, surround text to be hidden in a popup in <popup>text here</popup>. While the mouse is held over the anchor text, or the popup itself, the popup will remain visible. Once the mouse leaves either, the popup will fade out after a configurable delay.

Base Syntax

<popup title="Text on page" xoff="0" yoff="0" show="0" hide="0">Contents of popup (any text, including markup, links, images, tables, templates, etc)</popup>

Attribute reference

All popup tag attributes are optional, and 'sane' defaults are provided if they are not specified.

  • title="Text on page" If specified, the specified text is placed inline on the page, and when the user moves the mouse over the text, the popup is shown. If this is not specified, the text 'popup' is shown. In theory, this can contain wiki markup, however this has not been thoroughly tested.
  • xoff="px" Specifies the horizontal offset, in pixels, from the left side of the popup marker text at which the popup will appear. If not specified, this defaults to 16. Note that this should contain only digits, and negatives are permitted.
  • yoff="px" Specifies the vertical offset, in pixels, from the bottom of the popup marker text at which the popup will appear. If not specified, this defaults to 0. Note that this should contain only digits and negatives are permitted.
  • show="delay" Specifies the delay, in milliseconds, between the mouse hovering over the anchor and the popup fade in beginning. If the mouse leaves the anchor before the popup delay is complete, the popup will not be shown. If this is not specified, the default delay is 500 milliseconds (0.5 seconds).
  • hide="delay" Specifies the delay, in milliseconds, between the mouse leaving the anchor text or popup, and the popup fade out beginning. If the mouse enters the anchor or popup again before the delay is complete, the popup will not be closed. If not specified, the default delay is 2000 milliseconds (2 seconds).

Examples

This popupCjwvcD4KPHRhYmxlIGNsYXNzPSJ6ZWJyYSI+Cjx0cj4KPHRoPlRlc3Rpbmc8L3RoPgo8dGg+VGVzdGluZzwvdGg+Cjx0aD5UZXN0aW5nCjwvdGg+PC90cj4KPHRyPgo8dGggY29sc3Bhbj0iMiI+VGVzdGluZzwvdGg+Cjx0aD5UZXN0aW5nCjwvdGg+PC90cj4KPHRyPgo8dGQ+VGVzdGluZzwvdGQ+Cjx0ZD5UZXN0aW5nPC90ZD4KPHRkPlRlc3RpbmcKPC90ZD48L3RyPgo8dHI+Cjx0ZD5UZXN0aW5nPC90ZD4KPHRkPlRlc3Rpbmc8L3RkPgo8dGQ+VGVzdGluZwo8L3RkPjwvdHI+Cjx0cj4KPHRkPlRlc3Rpbmc8L3RkPgo8dGQ+VGVzdGluZzwvdGQ+Cjx0ZD5UZXN0aW5nCjwvdGQ+PC90cj48L3RhYmxlPgo8cD4= can be generated using the following code:

<popup title="This popup">
{| class="zebra"
! Testing !! Testing !! Testing
|-
! colspan="2" | Testing !! Testing
|-
| Testing || Testing || Testing
|-
| Testing || Testing || Testing
|-
| Testing || Testing || Testing
|}
</popup>

While '''This ''Popup!'''''VGhpcyBwb3B1cCBoYXMgc29tZSB0ZXh0IGluIGl0LCByYXRoZXIgdGhhbiB0aGUgdGFibGUgc2hvd24gaW4gdGhlIG90aGVyLi4u is generated using the following code:

<popup title="'''This ''Popup!'''''">This popup has some text in it, rather than the table shown in the other...</popup>

asHighlight

Provides authors with the ability to include syntax-highlighted source code (in over 150 different programming or markup languages) in a variety of colour themes. Internally, this extension is a wrapper around André Simon's Highlight tool.

Base Syntax

<source lang="language name" style="theme name" line="0" start="1" tabwidth="4">Code to be highlighted</source>

Attribute Reference

  • lang="language name" (Required) Specify the language the source to be highlighted is written in. This should be a short language name as it appears in the right column of the supported languages list. For example 'lang="xml"' or 'lang="c"'.
  • style="theme name" (Required)The highlight colour scheme to use. Y. Currently supported values are: acid, aiseered, andes, anotherdark, autumn, baycomb, bclear, biogoo, bipolar, blacknblue, bluegreen, breeze, bright, camo, candy, clarity, dante, darkblue, darkbone, darkness, darkslategray, darkspectrum, denim, desertEx, dusk, earendel, easter, edit-anjuta, edit-eclipse, edit-emacs, edit-flashdevelop, edit-gedit, edit-jedit, edit-kwrite, edit-matlab, edit-msvs2008, edit-nedit, edit-vim-dark, edit-vim, edit-xcode, ekvoli, fine_blue, freya, fruit, golden, greenlcd, kellys, leo, lucretia, manxome, maroloccio, matrix, moe, molokai, moria, navajo-night, navy, neon, nightshimmer, night, nuvola, olive, orion, pablo, peaksea, print, rand01, rdark, relaxedgreen, rootwater, seashell, sienna, tabula, tcsoft, vampire, whitengrey, xoria256, zellner, zenburn, zmrok. I generally advise using style="edit-emacs" to obtain an easily readable style that fits the wiki and generated content well.
  • line="0|1" (Optional) If this is set to 1, line numbers will be inserted to the left of each line in the source.
  • start="number" (Optional) If line is specified, you may change the number that the line numbers start at with this option. Any positive integer is supported.
  • tabwidth="number" (Optional) If specified, any tabs that may appear in the source will be replaced by this number of spaces.

Examples

<source lang="perl" style="edit-emacs" line="1" start="10">
sub _update_repository {
    my $self = shift;
    my $user = $self -> {"session"} -> get_user_byid();

    $self -> log("repository", "Pulling repository for user ".$user -> {"username"});

    $self -> {"system"} -> {"git"} -> pull_repository($user -> {"username"})
        or return $self -> api_errorhash("internal_error", $self -> {"template"} -> replace_langvar("API_ERROR", {"***error***" => $self -> {"system"} -> {"git"} -> errstr()}));

    return $self -> {"template"} -> load_template("dashboard/info_box.tem", {"***message***" => "{L_WEBSITE_PULL_SUCCESS}"});
}
</course></source>

Will generate the following:

10 sub _update_repository {
11     my $self = shift;
12     my $user = $self -> {"session"} -> get_user_byid();
13 
14     $self -> log("repository", "Pulling repository for user ".$user -> {"username"});
15 
16     $self -> {"system"} -> {"git"} -> pull_repository($user -> {"username"})
17         or return $self -> api_errorhash("internal_error", $self -> {"template"} -> replace_langvar("API_ERROR", {"***error***" => $self -> {"system"} -> {"git"} -> errstr()}));
18 
19     return $self -> {"template"} -> load_template("dashboard/info_box.tem", {"***message***" => "{L_WEBSITE_PULL_SUCCESS}"});
20 }
21 </course>

Flash v1.2

This extension allows the display of flash movies (.swf) within a wiki.

Base Syntax

<flash width="width" height="height" ...other attributes...>filename.swf</flash>

Attribute Reference

The following attributes must be provided in the flash element, if they are not present your animation will not display correctly:

  • width="width" The width of the flash animation in pixels.
  • height="height" The height of the flash animation in pixels.

You may also optionally specify the following attributes in the flash element:

  • play="true|false" Start playing the file or wait at first frame, defaults to true.
  • loop="true|false" Loop the animation, defaults to true.
  • quality="low|autolow|medium|high|autohigh|best" Predefine the quality, defaults to high.
  • bgcolor="#rrggbb" Specify the background colour for the animation.
  • scale="default|noborder|exactfit|noscale" Automatically adjust content to width and height, defaults to default.
  • menu="true|false" Enables or disables the right-click menu, defaults to true.
  • wmode="window|direct|opaque|transparent|gpu" Control the flash display mode. Generally you do not want to touch this, as it can break CBT layout if set incorrectly.

Examples

<flash width="400" height="200">NS_SomeMovie.swf</flash>
Shows the movie with a width of 400 and a height of 200
<flash width="200" height="300" bgcolor="#FDE742" scale="exactfit">NS_SomeMovie.swf</flash>
Shows the movie with a width of 200 and a height of 300. The background color is light-yellow (#FDE742). The content of the movie is stretched to the size of 200x300.

Streaming FLV/F4V

This tag allows a streamed video to be embedded in a page.

Base Syntax

<streamflv splash="splash image name" width="width in pixels" height="height in pixels">flv file name</streamflv>

Attribute Reference

  • width="px" Specifies the horizontal size of the animation, in pixels. If omitted, this defaults to 320.
  • height="px" Specifies the vertical size of the animation, in pixels. If omitted, this defaults to 240.
  • splash="splash image name" The name of the image to show where the stream will be displayed. While optional, this is VERY HIGHLY

recommended. The image names should be the name of an image that has been uploaded to the wiki, and it must appear in the course media list.

The flv file name should be the name of a flash video file that has been uploaded to the wiki (flv files should not appear in media lists!)

Examples

<streamflv splash="Animusic_03_splash.png" width="320" height="240">Animusic2_03_ResonantChamber.flv</streamflv>
Shows a streaming player for the 'File:Animusic2_03_ResonantChamber.flv' animation, with its width set to 320 and height to 240, and with the 'File:Animusic_03_splash.png' image as a splash image: <streamflv splash="Animusic_03_splash.png" width="320" height="240">Animusic2_03_ResonantChamber.flv</streamflv>

YouTube Video Embedding

This tag allows you to embed a video from YouTube in your material. As with the streamflv tag, multiple youtube videos may be embedded per page.

Base Syntax

<youtube width="width in pixels" height="height in pixels">youtube url</youtube>

Attribute Reference

  • width="px" Specifies the horizontal size of the animation, in pixels. If omitted, this defaults to 640.
  • height="px" Specifies the vertical size of the animation, in pixels. If omitted, this defaults to 385.

The youtube url should be the full URL of the YouTube video you wish to embed. This should be of the form 'http://www.youtube.com/watch?v=' followed by a video ID. Any text in the URL after the video ID will be discarded. You may not use this tag to embed videos from other hosting providers (flikr, photobucket, etc) - this extension will only allow YouTube videos.

Examples

<youtube>http://www.youtube.com/watch?v=X1DRDcGlSsE</youtube>
will show the video at http://www.youtube.com/watch?v=X1DRDcGlSsE embedded in the page:

Authors

  • gravatar Mbasscp2 [userbureaucratcomp23420editorhandbook-editinterface-adminlabhelpstaff-editsysopPHRhYmxlIGNsYXNzPSJ0d3BvcHVwIj48dHI+PHRkIGNsYXNzPSJ0d3BvcHVwLWVudHJ5dGl0bGUiPkdyb3Vwczo8L3RkPjx0ZD51c2VyPGJyIC8+YnVyZWF1Y3JhdDxiciAvPmNvbXAyMzQyMDxiciAvPmVkaXRvcjxiciAvPmhhbmRib29rLWVkaXQ8YnIgLz5pbnRlcmZhY2UtYWRtaW48YnIgLz5sYWJoZWxwPGJyIC8+c3RhZmYtZWRpdDxiciAvPnN5c29wPGJyIC8+PC90ZD48L3RyPjwvdGFibGU+]