wiki:plugin_help - Molecular Biology 4XX3-Wiki

Trace: » lecture_note_pages » previous_years » protocols » class_photos » navigation » start » plugin_help
This page is read only. You can view the source, but not change it. Ask your administrator if you think this is wrong.
====== Plugins ======

This page serves as a demonstration of the various plugins added to the wiki to extend its functionality. The examples shown below include the required syntax.
\\ \\ \\ \\ \\ \\ \\ 

===== Box =====

More flexible than the %%<code> </code> and <file> </file>%% markup, the %%<box> </box>%% tags can let you create plain square boxes, boxes with rounded corners, in different colours, with floating positions, titles, and captions. The best part: some DokuWiki markup is permitted inside the box.

<box round orange 80%|The full syntax:>

''**%%<box%%** //width// //classes// **|** title text**>** contents text **%%</box|%%** caption text**%%>%%**''

  ; //classes// : any number of classes which use the styles in your template or the plugin's own stylesheet to determine the look of the box. The box plugins comes with the following classes already defined:
    * //round// --- box will have rounded corners
    * //blue// --- blue colour scheme
    * //red// --- red colour scheme
    * //green// --- green colour scheme
    * //orange// --- orange colour scheme
    * //left// --- box is floated left on the page
    * //right// --- box is floated right on the page

  ; //width// : any legal CSS length value.
  ; //title text// : text (including dokuwiki markup) displayed as a title above box contents.
  ; //caption text// : text (without dokuwiki markup) displayed as a caption below box contents.


\\ 
//width// & //classes// can be specified in any order.
</box|caption>

Further [[box plugin examples]] can be found in the preceding link.

===== Code =====
The code plugin is an updated handler for the %%<code> </code> and <file> </file>%% markup. It adds the ability to recognize and render a title above the code box. You **cannot** nest the %%<code> </code> and <file> </file>%% tags themselves but you **can** nest the %%<code> </code> tags inside the <file> </file>%% tags and vice-versa. "File" boxes are used below to show the syntax.

Here is a regular code box:
<code>
Blah blah blah
</code>

<file|Syntax>
<code>
Blah blah blah
</code>
</file>

Here is the new code box:
<code|Title goes here>
Blah blah blah
</code>

<file|Syntax>
<code|Title goes here>
Blah blah blah
</code>
</file>

===== Comment =====

You can create comments that are hidden from normal view. This means you can add comments or notes in the wiki source that won't show up in the page itself. The syntax follows C language-style comments.

<code|Syntax>
/* This is a sample hidden comment */
</code>

/* This is a sample hidden comment */

===== Definition Lists =====

You can create definition lists like the one below, following the code example below.

  ; DL_DT
  : default value ";"
  : the character used to indicate a definition list term.
  ; DL_DD
  : default value ":"
  : the character used to indicate a definition list definition.
  ; DL_FANCY
  : default value "true"
  : if set to false the plugin will generate pure definition list mark up only.
  : if set to true the plugin will generate extra html to enable improved styling of the list. If used with the styles provided this will result in a two column list, with terms on the left, definitions on the right and each definition lining up with its corresponding term.

<code|Syntax>
  ; DL_DT
  : default value ";"
  : the character used to indicate a definition list term.
  ; DL_DD
  : default value ":"
  : the character used to indicate a definition list definition.
  ; DL_FANCY
  : default value "true"
  : if set to false the plugin will generate pure definition list mark up only.
  : if set to true the plugin will generate extra html to enable improved styling of the list. If used with the styles provided this will result in a two column list, with terms on the left, definitions on the right and each definition lining up with its corresponding term.
</code>




===== Explain =====

The explain plugin is used to define/explain a term in the wiki. Essentially, a "tooltip" (pop-up text appearing when hovering) can appear with a definition, and the term can also be hyperlinked to a page/section within the wiki, or to an external URL.

To create a new explanation, edit the [[:explain|explanations]] page. There should be one explanation per line, and each field is comma-delimited (therefore, spaces are permitted). Follow the syntax below:
<code|Syntax>term to be defined,short explanation (up to 80 characters),URL</code>
Formatting for the URL should be as follows:
<code|Internal Link>namespace:pagename#sectionname</code>
<code|External URL>http://www.example.com/example.html</code>

Example: I advise you to carpe diem, as it is wise to take advantage of any opportunity that presents itself.



===== Flash Media Player =====

This plugin is a Flash-based media player that can not only play Flash files (SWF, FLV), but can also play MP3s, H.264-encoded video, display picture slideshows, and more. It is fairly customizable through Flash variables that you can control.

Here is an example with a Flash animation:\\ 
<flashplayer width=296 height=234>file=http://www.ltrc.mcmaster.ca/mainnew.swf&showdigits=false</flashplayer>
<code|Syntax><flashplayer width=296 height=234>file=http://www.ltrc.mcmaster.ca/mainnew.swf&showdigits=false</flashplayer></code>
Another example, with an MP3:\\ 
<flashplayer width=128 height=128>file=http://wiki.mcmaster.ca/media/sound1.mp3&image=http://wiki.mcmaster.ca/media/logo.png&showicons=false</flashplayer>
<code|Syntax><flashplayer width=128 height=128>file=http://wiki.mcmaster.ca/media/sound1.mp3&image=http://wiki.mcmaster.ca/media/logo.png&showicons=false</flashplayer></code>

It seems that only absolute URLs are supported at this time. For information on the supported Flash variables, please see the [[http://wiki.mcmaster.ca/media/flashreadme.html|Flash Player README]].


===== Folded Text =====
If you want to make additional information availaible that is hidden by default, you have two options with this plugin.

**Inline:**\\ 
This is example ++text| with some of it only shown when you unfold it++. After that, the text continues to flow in the same paragraph.

<code|Syntax>
This is example ++text| with some of it only shown when you unfold it++.
After that, the text continues to flow in the same paragraph.
</code>

**Block:**

This is example text.

++++ Click to reveal table |
| This table | is only shown | when you unfold the block. |
| This table | is only shown | when you unfold the block. |
| This table | is only shown | when you unfold the block. |
++++

<code|Syntax>
This is example text.
++++ Click to reveal table |
| This table | is only shown | when you unfold the block. |
| This table | is only shown | when you unfold the block. |
| This table | is only shown | when you unfold the block. |
++++
</code>


===== Google Calendar =====

It is possible to embed a Google Calendar into the wiki. This can be a personal calendar or a group calendar. The syntax is as follows:
<code>{{cal>bob@gmail.com[614,640]|Bob's Calendar}}</code>
You will need to supply:
  * An e-mail address with a shared or group calendar.
  * Optionally, supply the width and height for the embedded calendar. [614,640] are width and height; these are both optional, but must be enclosed in [ , ] if present. If only one value is supplied, it is assumed to be the height.
  * The pipe character ''|'' allows you to change the display name (otherwise, the default configured in Google will be used).

If you have several Google Calendars and need to specify a particular one, you need the calendar ID. While logged into Google Calendar, click on "Manage calendars" at the left. Then, click on the calendar you want to share. In the "Calendar Address" box you should see the calendar ID. This is what you should use instead of a "real" e-mail address.

{{cal>whfbc.monitor@gmail.com[614,640]|Sample Embedded Google Calendar}}

===== Headers (numbered) =====

This plugin adds numbered headings without changing the behaviour of standard headings. To use the plugin, add a hyphen between the last "=" and the actual heading. Headings will then be numbered (e.g. 1, 1.1, 1.1.1, 1.1.2, 1.2, 1.2.1) and will show up in the Table of Contents, appropriately indented.

<code|Syntax>
====== - Level 1 Headline ======
===== - Level 2 Headline =====
==== - Level 3 Headline ====
==== - Level 3 Headline ====
===== - Level 2 Headline =====
==== - Level 3 Headline ====
</code>

===== Highlight =====

You can highlight text using this plugin. Colours can be specified using the HTML colour name, as a hex number, as a decimal number (such as 'rgb(255,0,0)'), or as a percentage RGB number (such as 'rgb(100%,0%,0%)'). The default colour is bright yellow. Depending on your web browser/platform, you may also see a highlight button in the wiki editor that when clicked, displays a colour palette. Selecting a colour from the palette will insert the appropriate markup for you.
\\ 
\\ 
This is an <hi #00ff00>example</hi> of some <hi orange>highlighted</hi> <hi>text</hi>.

<code|Syntax>
<hi #00ff00>example</hi> of some <hi orange>highlighted</hi> <hi>text</hi>.
</code>

===== IFrame =====

The IFrame plugin allows you to load an external URL into an iframe in a wiki page.

Example:\\ 
{{url>http://www.ltrc.mcmaster.ca/ [ 100% , 400px ] | Google Canada Homepage }}

Syntax:
<code>{{url>http://www.example.com/example.html [ width% , heightpx ] | alternate-text }}</code>
The width should be specified as a percentage of the wiki page's width (e.g. 98%, the default), and the height should be specified in pixels (e.g. 400px, the default). Note that the width and height specifiers are optional.

===== Include =====

This plugin allows you to include one wiki page inside another.

<code|Syntax>
 * {{page>page}} for "page" in same namespace
 * {{page>:page}} for "page" in top namespace
 * {{page>namespace:page}} for "page" in namespace "namespace"
 * {{page>.namespace:page}} for "page" in subnamespace "namespace"
 * {{page>page#section}} for a section of "page"
</code>

Examples:\\ 
**start include**
{{page>wiki:navigation}}
**end include**

<box |Inside a box>
{{page>wiki:navigation}}
</box>

===== Math =====

This plugin allows you to enter mathematical formulae in TeX format so that they are rendered properly. An image is generated by a script to display a formula.\\ \\ 

TeX can be intimidating at first, but once you learn the syntax, it is a very powerful way to express formulae using proper notation. You can visit the [[http://www.forkosh.com/mimetex.html|mimeTeX]] web site to see some examples of TeX syntax for formulae, and there is also a link to a [[http://www.forkosh.com/mimetextutorial.html|LaTeX tutorial]] showing you the basics of TeX markup (and many examples).

<code|Example 1 Syntax>
<math>x=\frac{-b\pm\sqrt{b^2-4ac}}{2a}</math>
</code>
Will yield:
<math>x=\frac{-b\pm\sqrt{b^2-4ac}}{2a}</math>

<code|Example 2 Syntax>
<math>\color{blue}\Large e^x=\sum_{n=0}^\infty\frac{x^n}{n!}</math>
</code>
Will yield:
<math>\color{blue}\Large e^x=\sum_{n=0}^\infty\frac{x^n}{n!}</math>

<code|Example 3 Syntax>
<math>y=\left\{x/2\text{ if x even}\\(x+1)/2\text{ if odd}\right.</math>
</code>
Will yield:
<math>y=\left\{x/2\text{ if x even}\\(x+1)/2\text{ if odd}\right.</math>
\\ \\ 
Essentially, you place the TeX markup in between opening ''<math>'' and closing ''</math>'' tags and it will be rendered properly. Note that you do **not** need to specify the ''<img src="/cgi-bin/mimetex.cgi?[TeX goes here]">'' tag and parameters for the math plugin to work.


===== Note =====

This plugin allows you to create nice-looking notes in the wiki.

Examples:
<note>This is a regular note.</note>
<note warning>This is a warning!</note>
<note important>This is important to know.</note>
<note tip>This is a tip to remember.</note>

<code|Syntax>
<note [warning|important|tip]>
Your note goes here.
</note>
</code>

In your %%<note>%% tag, you can **optionally** include one of warning, important, or tip.


===== Poll =====
<userpoll FavouriteColour>
  What is your favourite colour from the additive colour system?
  * Red
  * Green
  * Blue
</userpoll>

<code|Syntax>
<userpoll [UniqueName]>
  Question?
  * Option 1
  * Option 2
  * Option 3
</userpoll>
</code>




===== Styler =====

This plugin offers several tags to provide additional formatting for text.

  * %%<quote>%% - the expanded quotations
  * %%<epigraph>%% - an epigraph or quotation
  * %%<verse>%% - formatting of verses
  * %%<style>%% - generic style text blocks

You can also specify attributes for each formatted block:

  * left - align text to left
  * right - align text to right
  * center - align text to center
  * justify - justify text
  * float-left - create the floating block to the left of the text
  * float-right - create the floating block to the right of the text
  * box - draw a framework around of the block
  * background - fill in a background with a solid colour

**Examples**

<epigraph>
"Anything that can go wrong, will." -- [[http://www.google.ca/search?hl=en&q=murphy%27s+law|Murphy's Law]]
</epigraph>

<code|Syntax>
<epigraph>
"Anything that can go wrong, will." -- [[http://www.google.ca/search?hl=en&q=murphy%27s+law|Murphy's Law]]
</epigraph>
</code>

<style center>**To center text in the wiki page.**</style>

<code|Syntax>
<style center>**To center text in the wiki page.**</style>
</code>

<style float-right box background>
To place text on the right in a floating block with a background and border.
</style>

<code|Syntax>
<style float-right box background>
To place text on the right in a floating block with a background and border.
</style>
</code>

<quote>
With the quote tag, you can:
  * Use lists
  * Use **formatting**
  * Use pictures {{http://wiki.mcmaster.ca/media/button-rss.png}}
  * And more
</quote>

<code|Syntax>
<quote>
With the quote tag, you can:
  * Use lists
  * Use **formatting**
  * Use pictures {{http://wiki.mcmaster.ca/media/button-rss.png}}
  * And more
</quote>
</code>

===== Tabs =====

Allows you to indent text by 5 spaces at a time with the %%<tab>%% tag. It does this by replacing the markup with 5 non-breaking spaces.

<tab>This text is indented with one tab.\\ 
<tab><tab>This text is indented with two tabs.

===== Tags =====

Specify the name of the tag. The default namespace for tag pages is "tags:" (this is implicit and assumed when creating tag pages). The intention is that these pages will be organized under the "tags:" namespace and will not clutter up the "wiki:" or root namespaces that contain actual content.

<code|Example syntax used at the very bottom of this page>
{{tag>folded tag plugin}}
</code>

Clicking on a new tag name at the bottom will bring you to a new, uncreated topic page. Create the page and then add the list of all pages containing that tag. To do this, include the following.

<code|Syntax>
====== Pages using the tag "[tagname]" ======
{{topic>[tagname]}}
</code>

where [tagname] is to be replaced by the name of the actual tag. This automatically creates a table with the list of pages containing that tag.

===== YouTube =====

You can embed a YouTube video into a wiki page with this plugin.\\ 
{{youtube>small:mRGQcYFZea8:1}}
This is a small video.
<code>{{youtube>small:mRGQcYFZea8:1}}</code>
<code|Syntax>{{youtube>[link|small|large]:[video ID]:[number of thumbnails (0-2)]}}</code>
Code examples:
<code|Example 1>{{youtube>large:mRGQcYFZea8:2}}</code>
<code|Example 2>{{youtube>link:mRGQcYFZea8:1}}</code>

{{tag>folded tag plugin}}


===== Google Maps =====

**Google Maps Syntax**

  <googlemap parameter="value" parameter="value">
  lat,lon,text
  lat,lon,text
  </googlemap>

The lines of "lat,lon,text" represent the individual overlay markers.  Each marker must have its own line and be the only information on that line.  "lat" and "lon" are the latitude and longtitude of the marker. "text" is the text to be displayed in the popup when the marker is clicked.  The text can include wiki markup.


**Google Maps Parameters**

  * width --- //999px// (e.g. 500px) width of the google map, default is 400px.
  * height --- //999px// (e.g. 500px) height of the google map, default is 300px.
  * type --- values: map | satellite | hybrid. default map.
  * lat --- values: -90.0 - 90.0; latitude of map centre, negative values are south.
  * lon --- values: -180.0 - 180.0; longtitude of map centre, negative values are west.
  * zoom --- integer, zoom level, default value 8.  Valid values depend on the map and location.
  * controls --- values on | off. default on.  Whether or not to show controls for zooming and panning on the map.

The parameters can be in any order. 


**Google Maps Example**
<code>
<googlemap width="400px" height="400px" zoom="15" controls="on" lat="43.261956181120176" lon="-79.91974353790283">
43.261956181120176,-79.91974353790283,McMaster University
</googlemap>
</code>
<googlemap width="400px" height="400px" zoom="15" controls="on" lat="43.261956181120176" lon="-79.91974353790283">
43.261956181120176,-79.91974353790283,McMaster University
</googlemap>
You are here: start » wiki » plugin_help
Views

Navigation

Personal Tools

Search

Toolbox
