Help:Contents

From Bradwiki
Revision as of 20:54, 28 November 2015 by Bradley Monk (talk | contribs) (Using Custom Ref Template)
(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)
Jump to: navigation, search

MediaWiki Help Pages

Bradleymonk.com .JS

HTML & CSS



Lua Scripting

Adding HTML5 Video to MediaWiki

I've enabled three options for embedding animated video in this wiki. Option 1: PopFig video will embed the video a popup box. The video is hidden in a semantic mediawiki icon; mouseover of this icon will pop-open the video. This option makes use of a semantic mediawiki parser tag, secure html extension, and several layers of transclusion. Option 2: mediaplayer video will embed an inline video using the <mediaplayer> tag. The option doesn't require anything but a stand-alone extension. Option 3: Widget:Html5media makes use of of an Html5 widget. This option is good for very small animations, but does has a fixed size so the portion of a larger videos that extends beyond ~200 pixels will be hidden.


Option 1: PopFig


SI video1
Dot.png
This is an example of a movie caption. The text will automatically wrap

{{PopFig|[[File:Dot.png]]|<html> <video src="http://bradleymonk.com/media2/EXAMPLE.mov" controls></video> <br> <div style='color:white; width:400px'>This is an example of a movie caption. The text will automatically wrap</div> </html>||<big>SI video1 </big>}}


Option 2: mediaplayer


The media player is loading...

<mediaplayer image='http://bradleymonk.com/media2/EXAMPLE.png' width='500' height='300'>http://bradleymonk.com/media2/EXAMPLE.mov</mediaplayer>

If the video is uploaded using the native wiki upload link in the sidebar, this option can be employed simply by pasting the uploaded video file name between the <mediaplayer> </mediaplayer> tags like so:

<mediaplayer image='http://www.bradleymonk.com/w/images/8/82/RenderTorus.jpg' width='500' height='300'>File:RenderTorus.mp4</mediaplayer>


The media player is loading...


Option 3: Widget:Html5media


Embeded Version


{{#widget:Html5media
|url=http://bradleymonk.com/media2/DIFFUSE.mp4
|width=200
|height=200
}}


Popup Version


Hover mouse over icon to open:


{{Popup|{{#widget:Html5media
|url=http://bradleymonk.com/media2/DIFFUSE.mp4
|width=200
|height=200
}}}}


Semantic Mediawiki Popups

Semantic Mediawiki Tool Tips

The parser function #info allows to add tooltips containing additional information or warnings.

Syntax


  • {{#info: <text> | <icon> }}
  • you must include the "nowiki" tag around any equal signs if you want to use styles inside the into popup
    • example: <span style<nowiki>=</nowiki>"color:red">
    • result
      text this is red text
  • {{#info:text <span style<nowiki>="color:red">this is red</span> text}}</nowiki>


  • If you want to have a large image popup, the best way to do this is using these inline styles with the span tag
    • position:fixed; left:10px; top:10px; overflow:visible;
    • inline text
      text THIS WILL PUT THE IMAGE UP HERE text
      inline text
    • Use the Popupimg template inside the Popup template to do exactly this
    • example: {{#info: {{Popupimg|[[File:Nicoll2011 Fig1.png]]}} }}
    • result:
      Nicoll2011 Fig1.png
    • example: {{Popup| {{Popupimg|[[File:Nicoll2011 Fig1.png]] }} }}
    • result:
      Nicoll2011 Fig1.png

Extension LinkTitles

AUTO GENERATED SITE LINKS
require_once( "$IP/extensions/LinkTitles/LinkTitles.php" );
$wgLinkTitlesSmartMode = false;         // false = case sensitive
$wgLinkTitlesMinimumTitleLength = 7;    // default is 3
$wgLinkTitlesSkipTemplates = true;      // skip any text in a {{template|text}}
$wgLinkTitlesFirstOnly = true;          // only link the first occurrence
$wgLinkTitlesBlackList = array();
$wgLinkTitlesBlackList[] = 'MediaWiki';
$wgLinkTitlesBlackList[] = 'mediaplayer';
USE THE __NOAUTOLINKS__ TAG ON A WIKI PAGE TO PREVENT LINKING ON THAT PAGE
__NOAUTOLINKS__ 

__NOAUTOLINKS__

Template:SlideBox

{{SlideBox|width=80%|float=left|
Header [[Content]] Is Shown
|
Body text is hidden
}}

Customize Editing Toolbar

http://bradleymonk.com/User:Bradley_Monk/common.js http://www.mediawiki.org/wiki/Extension:WikiEditor/Toolbar_customization

section
  • {String} (optional) The name of the section in the WikiEditor. Defaults to 'main'
id
  • {String} (required) Unique id (ie. 'my-button')
icon
  • {String} (recommended) URL to the icon, should be square about 21 to 22px
label
  • {String} (required) Tooltip displayed when hovering button
insertBefore
  • {String} (optional) Wikitext to be inserted before the cursor on-click
sampleText
  • {String} (optional) Text inserted in place of the cursor if no text was selected
insertAfter
  • {String} (optional) Wikitext to be inserted after the cursor on-click
callback
  • {Function} (optional) Called when the button is clicked
autoSummary
  • {mixed} (optional) Null or an Object with the following properties:
    • summary: {String} (required) Edit summary that should be used
    • position: {String} (optional) 'append', 'prepend' or 'replace'
    • delimiter: {String} (optional) delimiter between the (possibly) current summary and the to-be-inserted summary

Syntax Highlighting

The Extension:SyntaxHighlight GeSHi tag displays formatted source code with the <syntaxhighlight> tag.

This extension also adds coloring according to the code language settings. Like the <pre> tags and the <poem> tags, the tags shows the coding exactly as it was typed, preserving white space.

This extension also can create line numbers.

Usage

On the wiki page, you can now use "syntaxhighlight" elements:

<syntaxhighlight lang="php">
<?php
    $v = "string";    // sample initialization
?>
html text
<?
    echo $v;         // end of php code
?>
</syntaxhighlight>

shows: <syntaxhighlight lang="php"> <?php

   $v = "string";    // sample initialization

?> html text <?

   echo $v;         // end of php code

?> </syntaxhighlight>

Alternative <source> tag

Before rev:50696, the extension used the tag <source>. This is still supported, but <syntaxhighlight> avoids conflicts if your source code itself contains <source> (for example XML).

Parameters

lang="??"
Defines what programming language the source code is using. This affects how the extension highlights the source code. See the section "Supported languages" in this page for details of supported languages.
line="GESHI_NORMAL_LINE_NUMBERS|GESHI_FANCY_LINE_NUMBERS"
Type of line numbering to use. If you do not provide this parameter, then lines will not be numbered. Corresponds to enable_line_numbers the flag in GeSHi.
line
Equivalent to line="GESHI_FANCY_LINE_NUMBERS"
line start="??"
Use together with the parameter "line". Define the start number of the line. If you type line start="55", it will start counting at 55, then 56,57,58... and so on. Corresponds to start_line_numbers_at method on GeSHi
highlight="??"
Specifies which line is highlighted. Note that the parameter line start="??" doesn't affect how it counts the lines.
enclose="??"
Specifies what container is used to enclose the source code. Takes values "pre" (default value), "div", "none". Corresponds to set_header_type method on GeSHi. Choosing "div" will cause text to wrap, which is helpful if text is extending off the edge of the screen, causing horizontal scrolling.
strict
Type the name of the parameter to enable the strict mode. Corresponds to enable_strict_mode method on GeSHi.

The effect and usage of these parameters can be consulted in GeSHi's documentation.

Since r22246, you can override the colors using MediaWiki:Geshi.css.

More Usage

When line numbering is added with line, long code lines will be wrapped. See the example below. When text is the selected language, and numbering is used, the behaviour resembles the use of pre tags with numbering and long-line wrapping.

The following example shows how to color an HTML code listing:

<syntaxhighlight lang="html4strict" line start="100" highlight="5" enclose="div">
HTML module goes here...
</syntaxhighlight>

A typical result is just: <syntaxhighlight lang="html4strict" line start="100" highlight="5" enclose="div">

Heading 1 Heading 2
This is cell 1 text This is cell 2 text

</syntaxhighlight>

Supported languages

These are the languages known by GeSHi that can be used in the lang parameter.

Note that installed GeSHi version (can be revealed by previewing e.g. <syntaxhighlight lang="-"></syntaxhighlight>) might not be the most recent version; see bugzilla:10967 for Wikimedia sites.

The GeSHi sources for each language can be found in VCS on SourceForge. Remember to go and select the version that the MediaWiki installation uses.

Code Language
abap ABAP
actionscript ActionScript
ada Ada
apache Apache Configuration
applescript AppleScript
asm Assembly
asp Active Server Pages (ASP)
autoit AutoIt
bash Bash
basic4gl Basic4GL
bf Brainfuck
blitzbasic Blitz BASIC
bnf Backus-Naur Form
c C
c_mac C (Mac)
caddcl AutoCAD DCL
cadlisp AutoLISP
cfdg CFDG
cfm ColdFusion Markup Language
cil Common Intermediate Language (CIL)
cobol COBOL
cpp-qt C++ (Qt toolkit)
cpp C++
csharp C#
css Cascading Style Sheets (CSS)
d D
delphi Delphi
diff Diff
div DIV
dos DOS batch file
dot DOT
eiffel Eiffel
fortran Fortran
freebasic FreeBASIC
gambas Gambas
genero Genero
gettext GNU internationalization (i18n) library
glsl OpenGL Shading Language (GLSL)
gml Game Maker Language (GML)
gnuplot gnuplot
groovy Groovy
haskell Haskell
hq9plus HQ9+
html4strict HTML
html5 HTML5
idl Uno IDL
ini INI
inno Inno
intercal INTERCAL
io Io
java Java
java5 Java(TM) 2 Platform Standard Edition 5.0
javascript JavaScript
kixtart KiXtart
klonec Klone C
klonecpp Klone C++
latex LaTeX
lisp Lisp
lolcode LOLCODE
lotusscript LotusScript
lua Lua
Code Language
m68k Motorola 68000 Assembler
make make
matlab MATLAB M
mirc mIRC scripting language
mxml MXML
mpasm Microchip Assembler
mysql MySQL
nsis Nullsoft Scriptable Install System (NSIS)
objc Objective-C
ocaml-brief OCaml
ocaml OCaml
oobas OpenOffice.org Basic
oracle8 Oracle 8 SQL
oracle11 Oracle 11 SQL
pascal Pascal
per per
perl Perl
php-brief PHP
php PHP
pixelbender Pixel Bender
plsql PL/SQL
povray Persistence of Vision Raytracer
powershell Windows PowerShell
progress OpenEdge Advanced Business Language
prolog Prolog
providex ProvideX
python Python
qbasic QBasic/QuickBASIC
rails Rails
reg Windows Registry
robots robots.txt
rsplus R
ruby Ruby
sas SAS
scala Scala
scheme Scheme
scilab Scilab
sdlbasic SdlBasic
smalltalk Smalltalk
smarty Smarty
sql SQL
tcl Tcl
teraterm Tera Term
text Plain text
thinbasic thinBasic
tsql Transact-SQL
typoscript TypoScript
vala Vala
vb Visual Basic
vbnet Visual Basic .NET
verilog Verilog
vhdl VHDL
vim Vimscript
visualfoxpro Visual FoxPro
visualprolog Visual Prolog
whitespace Whitespace
winbatch Winbatch
xml XML
xorg_conf Xorg.conf
xpp X++
z80 ZiLOG Z80 Assembler

Extra features

Default Source Language

Added in rev:50693.

If the site mainly quotes the source code of a specific programming language, it would be helpful to set a default language.

To do so, add a new variable to LocalSettings.php, just after the require_once line. We set C programming language as an example: <syntaxhighlight lang="php"> require_once("$IP/extensions/SyntaxHighlight_GeSHi/SyntaxHighlight_GeSHi.php"); $wgSyntaxHighlightDefaultLang = "c"; </syntaxhighlight>

LaTeX Math

NEW WAY
<tex>f{(x)} = {\sum \lambda \cdot \bar{y} \over \sum \lambda^{ \over 2 n} }</tex>
LaTeX: f{(x)} = {\sum \lambda \cdot \bar{y} \over \sum \lambda^{ \over 2 n} }
OLD WAY
<math> f(x, \mu, \sigma) = \frac{1}{\sigma \sqrt{2\pi} } e^{ -\frac{(x-\mu)^2}{2\sigma^2} } </math>
TeX and HTML

LIST OF MATH SYMBOLS IN HTML MARKUP

TeX Syntax (forcing PNG) TeX Rendering HTML Syntax HTML Rendering
<math>\alpha</math> {{math|<VAR>&alpha;</VAR>}} α
<math> f(x) = x^2\,</math> {{math|''f''(<var>x</var>) {{=}} <var>x</var><sup>2</sup>}} f(x) = x2
<math>\sqrt{2}</math> {{math|{{radical|2}}}} 2
<math>\sqrt{1-e^2}</math> {{math|{{radical|1 &minus; ''e''&sup2;}}}} 1 − e²

The codes on the left produce the symbols on the right, but the latter can also be put directly in the wikitext, except for ‘=’.

Syntax Rendering
&alpha; &beta; &gamma; &delta; &epsilon; &zeta;
&eta; &theta; &iota; &kappa; &lambda; &mu; &nu;
&xi; &omicron; &pi; &rho; &sigma; &sigmaf;
&tau; &upsilon; &phi; &chi; &psi; &omega;
&Gamma; &Delta; &Theta; &Lambda; &Xi; &Pi;
&Sigma; &Phi; &Psi; &Omega;
α β γ δ ε ζ
η θ ι κ λ μ ν
ξ ο π ρ σ ς
τ υ φ χ ψ ω
Γ Δ Θ Λ Ξ Π
Σ Φ Ψ Ω
&int; &sum; &prod; &radic; &minus; &plusmn; &infty;
&asymp; &prop; {{=}} &equiv; &ne; &le; &ge; 
&times; &middot; &divide; &part; &prime; &Prime;
&nabla; &permil; &deg; &there4; &Oslash; &oslash;
&isin; &notin; 
&cap; &cup; &sub; &sup; &sube; &supe;
&not; &and; &or; &exist; &forall; 
&rArr; &hArr; &rarr; &harr; &uarr; 
&alefsym; - &ndash; &mdash; 
∫ ∑ ∏ √ − ± ∞
≈ ∝ = ≡ ≠ ≤ ≥
× · ÷ ∂ ′ ″
∇ ‰ ° ∴ Ø ø
∈ ∉ ∩ ∪ ⊂ ⊃ ⊆ ⊇
¬ ∧ ∨ ∃ ∀
⇒ ⇔ → ↔ ↑
ℵ - – —

Image Annoation

<div class="wpImageAnnotatorEnable">
<span class="wpImageAnnotatorPageName" style="display:none;">[[Sandbox]]</span>
<span class="wpImageAnnotatorFullName" style="display:none;">[[Sandbox]]</span>
<div class="wpImageAnnotatorFile">[[File:Foo.png]]</div>
<div style="display:none;"><div><div><!--IMAGE NOTES BELOW -->{{ImageNoteEnd|id=-1}}
</div>

Livelets

To create livelets, wrap any areas of the page in the #live parser-function.

In the following example, a transclusion of the page called Template:MyVerySlowTable has been turned into a livelet:

{{#live: {{MyVerySlowTable}} }}


References and Citations

Using Native Ref Tags

In-text references make it easy to copy the text to another page; on the other hand, they make it hard to read. References containing a lot of data, quotes or elaborate citation templates can make up a significantly larger fraction of the source than the text that will actually be visible. To avoid this, recent versions of the extension allow moving some or all of the references into the <references /> section, to the place where they will actually appear to the reader. Thus,

According to scientists, the Sun is pretty big.<ref name="miller" />
The Moon, however, is not so big.<ref name="smith" />

==Notes==
<references>
<ref name="miller">E. Miller, The Sun, (New York: Academic Press, 2005), 23-5.</ref></br> <ref name="smith">R. Smith, "Size of the Moon", Scientific American, 46 (April 1978): 44-6.</ref>
</references>

will have the same output as the first example above, although the numbering and order of the references will not in general be the same.


HTML

Example

iFrame Code

<html>
<iframe src="http://www.w3schools.com/tags/tag_iframe.asp" 
height="300" width="350" frameborder="1" seamless="seamless" style="float:left">
</iframe>
</html>

iFrame Attributes

Attribute Value Description
align left, right, top, middle, bottom Specifies the alignment of an iframe according to surrounding elements
frameborder 1, 0 Specifies whether or not to display a border around an iframe
height pixels Specifies the height of an iframe
longdesc URL Specifies a page that contains a long description of the content of an iframe
marginheight pixels Specifies the top and bottom margins of the content of an iframe
marginwidth pixels Specifies the left and right margins of the content of an iframe
name name Specifies the name of an iframe
sandbox "", allow-forms, allow-same-origin, allow-scripts, allow-top-navigation Enables a set of extra restrictions for the content in the iframe
scrolling yes, no, auto Specifies whether or not to display scrollbars in an iframe
seamless seamless Specifies that the iframe should look like it is a part of the containing document
src URL Specifies the address of the document to embed in the iframe
srcdoc HTML_code Specifies the HTML content of the page to show in the iframe
width pixels Specifies the width of an iframe

Tables

wikitable

Link Description
BioNetGen A web-based tool for automatically generating a biochemical reaction networks from user-specified rules for biomolecular interactions.
B10NUMB3R5 (BIONUMBERS) A database of useful biological numbers.
BioInformatics Services BioInformatics Services is a biotechnology consulting firm specializing in using computational biology to solve complex biological and data analysis problems.
cellmigrationgateway modeling software
CellML The CellML language is an open standard based on the XML markup language at the University of Auckland and affiliated research groups.
CompCell Bio Web Development site for teaching modules on quantitative cell biology.
DOQCS Quantitative Cellular Signaling (DOQCS) is a repository of models of signaling pathways.
E-Cell A Multi-Algorithm, Multi-Timescale Simulation Software Environment.
Gfit A program for global regression analysis of experimental data.
Kitware Professional Visualization Solutions, Tools and Support.
MCell General Monte Carlo Simulator of Cellular Microphysiology.
Minimotif Miner Application to search for short sequence motifs in Proteins.


Upgrading MediaWiki

Step 1 - download latest stable version of MediaWiki


Step 2 - determine database credentials from dreamhost

Get Hostname (e.g.)
  • mysql.bradleymonk.com
Get Database name (e.g.)
  • bradleymonk_com
Get Database User name (e.g.)
  • username
Get Database User pass (e.g.)
  • password


Step 3 - back-up existing files and the database

  • Go to: mysql.example.com
  • Enter db user and password when prompted
  • click on db in left panel
  • click on the "Export" tab
  • check "Save as file"
  • click "Go"


Step 4 - FTP the mediawiki.tar.gz file to the /w directory


Step 5 - Unpack the tarball

Use the console to SSH into the /w directory and unpack tarball
  • $ssh bradleymonk.com -l username
  • Change to the /w directory
  • $tar xvzf mediawiki.tar.gz
  • this unpacks into a new folder: /w/mediawiki


Step 6 - Move files and rename directory

Copy files from old to new directory
  • LocalSettings.php
  • logofile.png
  • images (or upload) directory
  • extension directory
  • custom skins
  • .htaccess file
Swap-rename directories
  • rename old directory /w_old
  • move new directory out of /w_old to top level domain
  • rename new directory to /w


Step 7 - Run MediaWiki update script

  • login with SSH again:
  • $ssh bradleymonk.com -l username
  • change to the /w/maintenance directory
  • enter: $php update.php


  • If the prompt gives an error like: "you're using php version 2.x mediawiki requires version 3.x"
  • try entering these:
  • $/usr/local/php53/bin/php update.php
  • $/usr/local/php54/bin/php update.php


Check if the upgrade worked by going to the MediaWiki page "Special Version"

Quoting

SAN DIEGO -- Money -- does it draw students to their future careers? The answer is no, according to statistics and students at San Diego State University.
{{cquote|quote goes here}}


MediaWiki Tips

  • To remove the arrow icon from external links, navigate to MediaWiki:Common.css and add this line of code
#content a[href ^="http://"].external {background: center right no-repeat; padding-right: 1px;}


Button Template

{{Button|TPB=.5em| Button Text }}

Button Text


Table Map

See here: Table Map


Labeled Section Transclusion

See: Extension:Labeled_Section_Transclusion

Step 1: Mark off sections

Mark off sections in the text using <section></> tags like this:

   
    <section begin=Hayashi_Malinow_2000_Science />

    {{Article|Hayashi Malinow|2000|Science • PDF|10731148|Driving AMPA receptors into synapses}}

    <section end=Hayashi_Malinow_2000_Science />
    

Note that this uses two individual markers, rather than normal XML open/close tags, which simplifies nested or overlapping sections. This allows you to insert section tags without worrying about interfering with other sections.

Step 2: Transclude the section

Call the parser function to transclude it, i.e. to transclude a section called chapter1 from a page called Articles:

   
    {{#section:Articles|Hayashi_Malinow_2000_Science}}