Help:Contents: Difference between revisions

From bradwiki
Jump to navigation Jump to search
 
(21 intermediate revisions by 2 users not shown)
Line 38: Line 38:




==Lua Scripting==
* [https://www.mediawiki.org/wiki/Extension:Scribunto Mediawiki Extension:Scribunto]
* Latest Update: [http://bradleymonk.com/Module:Yesno Modules still not working] < this is a medium-priority TBD when time permits


== Adding HTML5 Video to MediaWiki ==
== 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 <code><nowiki><mediaplayer></nowiki></code> 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.
<br>
----
To embed a youtube video, use the following code:


=== Option 1: PopFig ===
<pre><nowiki>
<br> {{PopFig|[[File:Dot.png]]|<html>
{{#ev:youtube|tDKUU0SqbSA}}
<video src="http://bradleymonk.com/media2/EXAMPLE.mov" controls></video> <br>
</nowiki></pre>
<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>}}
 
{{Style|class=div|size=90%|align=left|font=courier|background=#EBFAEB|color=black|pad=8px|margin=6px|
<nowiki>
{{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>}}
</nowiki>
}}
----
 
=== Option 2: mediaplayer ===
<br> <mediaplayer image='http://bradleymonk.com/media2/EXAMPLE.png' width='500' height='300'>http://bradleymonk.com/media2/EXAMPLE.mov</mediaplayer>
 
{{Style|class=div|size=90%|align=left|font=courier|background=#EBFAEB|color=black|pad=8px|margin=6px|
<nowiki>
<mediaplayer image='http://bradleymonk.com/media2/EXAMPLE.png' width='500' height='300'>http://bradleymonk.com/media2/EXAMPLE.mov</mediaplayer>
</nowiki>
}}
 
If the video is uploaded using the native wiki upload link in the sidebar, this option can be employed simply by pasting the [[Example uploaded video|uploaded video]] file name between the <code><nowiki><mediaplayer> </mediaplayer></nowiki></code> tags like so:
 
{{Style|class=div|size=90%|align=left|font=courier|background=#EBFAEB|color=black|pad=8px|margin=6px|
<nowiki>
<mediaplayer image='http://www.bradleymonk.com/w/images/8/82/RenderTorus.jpg' width='500' height='300'>File:RenderTorus.mp4</mediaplayer>
</nowiki>
}}
 
 
<mediaplayer image='http://www.bradleymonk.com/w/images/8/82/RenderTorus.jpg' width='500' height='300'>File:RenderTorus.mp4</mediaplayer>
----
 
=== Option 3: [[Widget:Html5media|Widget:Html5media]] ===
<br> {{Box|font=90%|width=45%|float=left|text=12px|boarder=solid #aaa 1px|Embeded Version|
 
{{#widget:Html5media
|url=http://bradleymonk.com/media2/DIFFUSE.mp4
|width=200
|height=200
}}


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


}}<!-- END BOX -->
{{#ev:youtube|tDKUU0SqbSA}}
 
{{Box|font=120%|width=45%|float=left|text=12px|boarder=solid #aaa 1px|Popup Version|
 
Hover mouse over icon to open: {{Popup|{{#widget:Html5media|url=http://bradleymonk.com/media2/DIFFUSE.mp4|width=200|height=200}}}}
 
 
<pre>
{{Popup|{{#widget:Html5media
|url=http://bradleymonk.com/media2/DIFFUSE.mp4
|width=200
|height=200
}}}}
</pre>


}}<!-- END BOX -->


{{Clear}}
{{Clear}}
<br><br><br>


==Semantic Mediawiki Popups==
<big>[http://semantic-mediawiki.org/wiki/Help:Adding_tooltips Semantic Mediawiki Tool Tips]</big>
The parser function '''#info''' allows to add tooltips containing additional information or warnings.
<big>Syntax</big><br>




* <code><nowiki>{{#info: <text> | <icon> }}</nowiki></code>


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




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


==Extension LinkTitles==
==Extension LinkTitles==
Line 174: Line 84:


__NOAUTOLINKS__
__NOAUTOLINKS__
{{Clear}}
<br><br><br>


==Template:SlideBox==
==Template:SlideBox==
<nowiki>
 
<pre><nowiki>
{{SlideBox|width=80%|float=left|
Header [[Content]] Is Shown
|
Body text is hidden
}}
</nowiki></pre>
 
 
{{SlideBox|width=80%|float=left|
{{SlideBox|width=80%|float=left|
Header [[Content]] Is Shown
Header [[Content]] Is Shown
Line 182: Line 107:
Body text is hidden
Body text is hidden
}}
}}
</nowiki>
 
 
 
{{Clear}}
<br><br><br>
 
 
 


==Customize Editing Toolbar==
==Customize Editing Toolbar==
Line 209: Line 141:
**position: {String} (optional) 'append', 'prepend' or 'replace'
**position: {String} (optional) 'append', 'prepend' or 'replace'
**delimiter: {String} (optional) delimiter between the (possibly) current summary and the to-be-inserted summary
**delimiter: {String} (optional) delimiter between the (possibly) current summary and the to-be-inserted summary
{{Clear}}
<br><br><br>


==Syntax Highlighting==
==Syntax Highlighting==
The '''Extension:SyntaxHighlight GeSHi''' tag displays formatted [[w:source code|source code]] with the  <code>&lt;syntaxhighlight&gt;</code> tag.
The '''SyntaxHighlight''' [https://www.mediawiki.org/wiki/Extension:SyntaxHighlight extension], formerly known as SyntaxHighlight_GeSHi, provides rich formatting of source code using the <code><nowiki><syntaxhighlight></nowiki></code> tag. It is powered by the [http://pygments.org Pygments] library and supports hundreds of different programming languages and file formats.
 
 
=== Usage & Parameters ===
 
 
<pre><nowiki>
<syntaxhighlight lang="python" line='line'>
def quick_sort(arr):
less = []
pivot_list = []
more = []
if len(arr) <= 1:
return arr
else:
pass
</syntaxhighlight>
</nowiki></pre>
 
<syntaxhighlight lang="python" line='line'>
def quick_sort(arr):
less = []
pivot_list = []
more = []
if len(arr) <= 1:
return arr
else:
pass
</syntaxhighlight>
 
 
 
==== lang ====
----
 
The <code>lang="<var>name</var>"</code> attribute defines what lexer should be used. The language affects how the extension highlights the source code.
 
<pre><nowiki>
<syntaxhighlight lang="python">
def quick_sort(arr):
    less = []
</syntaxhighlight>
</nowiki></pre>
 
 
<syntaxhighlight lang="python">
def quick_sort(arr):
    less = []
</syntaxhighlight>
 
 
 
 
 
==== line ====
----
 
 
The <code>line</code> attribute enables line numbers.
 
 
<pre><nowiki>
<syntaxhighlight lang="python" line="1">
def quick_sort(arr):
    less = []
</syntaxhighlight>
</nowiki></pre>
 


This extension also  adds coloring according to the code language settings. Like the <code>&lt;pre&gt;</code> tags and the <code>&lt;[[Extension:Poem|poem]]&gt;</code> tags, the tags shows the coding exactly as it was typed, preserving white space.
<syntaxhighlight lang="python" line="1">
def quick_sort(arr):
    less = []
</syntaxhighlight>


This extension also can create line numbers.


=== Usage ===
 
On the wiki page, you can now use "syntaxhighlight" elements:
==== start ====
----


<pre><nowiki>
<pre><nowiki>
<syntaxhighlight lang="php">
<syntaxhighlight lang="python" line start="55">
<?php
def quick_sort(arr):
    $v = "string";    // sample initialization
     less = []
?>
html text
<?
     echo $v;        // end of php code
?>
</syntaxhighlight>
</syntaxhighlight>
</nowiki></pre>
</nowiki></pre>


shows:
 
<syntaxhighlight lang="php">
<syntaxhighlight lang="python" line start="55">
<?php
def quick_sort(arr):
    $v = "string";    // sample initialization
     less = []
?>
html text
<?
     echo $v;        // end of php code
?>
</syntaxhighlight>
</syntaxhighlight>


=== Alternative &lt;source&gt; tag ===
Before [[rev:50696]], the extension used the tag <code>[[Extension:SyntaxHighlighter|&lt;source&gt;]]</code>.
This is still supported, but <code>&lt;syntaxhighlight&gt;</code> avoids conflicts if your source code itself contains <nowiki><source></nowiki> (for example XML).


=== Parameters ===
; <code>lang="??"</code>
: Defines what programming language the source code is using. This affects how the extension highlights the source code. See the section "[[#Supported_languages|Supported languages]]" in this page for details of supported languages.
; <code>line="GESHI_NORMAL_LINE_NUMBERS|GESHI_FANCY_LINE_NUMBERS"</code>
: Type of line numbering to use. If you do not provide this parameter, then lines will not be numbered. Corresponds to [http://qbnz.com/highlighter/geshi-doc.html#enabling-line-numbers enable_line_numbers] the flag in GeSHi.
; <code>line</code>
: Equivalent to <code>'''line="GESHI_FANCY_LINE_NUMBERS"</code>
; <code>line start="??"</code>
: 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 [http://qbnz.com/highlighter/geshi-doc.html#starting-line-numbers start_line_numbers_at] method on GeSHi
<!--
; <code>case</code>
: Corresponds to [http://qbnz.com/highlighter/geshi-doc.html#auto-caps-nocaps set_case_keywords] method on GeSHi
; <code>tab</code>
: Corresponds to [http://qbnz.com/highlighter/geshi-doc.html#setting-tab-width set_tab_width] method on GeSHi
-->
; <code>highlight="??"</code>
: Specifies which line is highlighted. Note that the parameter '''line start="??"''' doesn't affect how it counts the lines.
; <code>enclose="??"</code>
: Specifies what container is used to enclose the source code. Takes values "pre" (default value), "div", "none". Corresponds to [http://qbnz.com/highlighter/geshi-doc.html#the-code-container 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.
; <code>strict</code>
: Type the name of the parameter to enable the strict mode. Corresponds to [http://qbnz.com/highlighter/geshi-doc.html#using-strict-mode enable_strict_mode] method on GeSHi.


The effect and usage of these parameters can be consulted in [http://qbnz.com/highlighter/geshi-doc.html GeSHi's documentation].
==== highlight ====
----


Since r22246, you can override the colors using '''MediaWiki:Geshi.css'''.
The <code>highlight</code> attribute specifies one or more lines that should be marked (by highlighting those lines with a different background color). You can specify multiple line numbers separated by commas (for example, <code>highlight="1,4,8"</code>) or ranges using two line numbers and a hyphen (for example, <code>highlight="5-7"</code>). Note that the line number specification ignores any renumbering of the displayed line numbers with the <code>start</code> attribute.


=== 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:
<pre><nowiki>
<pre><syntaxhighlight lang="html4strict" line start="100" highlight="5" enclose="div">
<syntaxhighlight lang="python" highlight="1,5-7" start=3 line>
HTML module goes here...
def quick_sort(arr):
    less = []
    pivot_list = []
    more = []
    if len(arr) <= 1:
        return arr
</syntaxhighlight>
</syntaxhighlight>
</pre>
</nowiki></pre>
A typical result is just:
 
<syntaxhighlight lang="html4strict" line start="100" highlight="5" enclose="div">
 
<!--This is a comment. Comments are not displayed in the browser-->
<syntaxhighlight lang="python" highlight="1,5-7" start=3 line>
<table align=center style="background: ivory;color:maroon;font-style:italic;font-family:arial;font-weight:bold;font-size:10pt;">
def quick_sort(arr):
<tr><th> Heading 1 </th><th> Heading 2 </th></tr>
    less = []
<tr>
    pivot_list = []
<td style="padding:10px;"> This is cell 1 text </td>
    more = []
<td style="padding:10px;"> This is cell 2 text </td>
    if len(arr) <= 1:
</tr>
        return arr
</table>
</syntaxhighlight>
</syntaxhighlight>


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


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


<small>The GeSHi sources for each language can be found in [http://sourceforge.net/p/geshi/code/HEAD/tree/trunk/geshi-1.0.X/src/geshi/ VCS on SourceForge]. Remember to go and select the version that the MediaWiki installation uses.</small>


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


=== Extra features ===


; Default Source Language
==== inline ====
----
 
The attribute indicates that the source code should be inline as part of a paragraph (as opposed to being its own block).
 
 
Note that line breaks can occur at any space between the opening and closing tags unless the source code is marked non-breakable with <code>class="nowrap"</code> (on those wikis that support it; see below) or <code>style=white-space:nowrap</code>. For example:
 
<pre>
In python, <syntaxhighlight lang="python" inline>lambda x: x * 2</syntaxhighlight> is a lambda expression.
</pre>
 
results in:
 
In python <syntaxhighlight lang="python" inline>lambda x: x * 2</syntaxhighlight> is a lambda expression.
 
 
 
==== class ====
----
 
When <code>inline</code> is used, <code>class="nowrap"</code> specifies that line breaks should not occur at spaces within the code block.
 
 
Using <code>class="nowrap"</code>:
 
<pre><nowiki>
<div style="max-width:300px; border:1px solid #ccc "></div>
<nowiki></pre>
 
<div style="max-width:300px; border:1px solid #ccc ">
xxxxxxxxxxxxxxxxxxxxx<syntaxhighlight lang="python" inline>lambda x: x * 2</syntaxhighlight>xxxxxxxxxxxxxxx
</div>
 
 
 
Using <code>style="white-space:nowrap"</code>:
 
<pre><nowiki>
<div style="white-space:nowrap; max-width:300px; border:1px solid #ccc"></div>
</nowiki></pre>
 
<div style="white-space:nowrap; max-width:300px; border:1px solid #ccc">
xxxxxxxxxxxxxxxxxxxxx<syntaxhighlight lang="python" inline>lambda x: x * 2</syntaxhighlight>xxxxxxxxxxxxxxx
</div>
 
 
 
 
==== style ====
----
 
 
 
The <code>style</code> attribute allows CSS attributes to be included directly. This is equivalent to enclosing the block in a <code><nowiki><div></nowiki></code> (not <code><nowiki><span></nowiki></code>) tag. The <code>tab‑size</code> attribute cannot be specified this way; it requires an enclosing <code><nowiki><span></nowiki></code> tag. For example:


Added in [[rev:50693]].
<pre><nowiki>
<div style="max-width:600px; background:rgba(10,10,10,.30);">
PYTHON:
<syntaxhighlight lang="python" style="border:1px dashed gray; background:rgba(10,10,50,.10);">
def quick_sort(arr):
less = []
pivot_list = []
more = []
if len(arr) <= 1:
return arr
else:
pass
</syntaxhighlight>
</div>
</nowiki></pre>


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 [[:en:C (programming language)|C programming language]] as an example:
<div style="max-width:600px; background:rgba(10,10,10,.30);">
<syntaxhighlight lang="php">
PYTHON:
require_once("$IP/extensions/SyntaxHighlight_GeSHi/SyntaxHighlight_GeSHi.php");
<syntaxhighlight lang="python" style="border:1px dashed gray; background:rgba(10,10,50,.10);">
$wgSyntaxHighlightDefaultLang = "c";
def quick_sort(arr):
less = []
pivot_list = []
more = []
if len(arr) <= 1:
return arr
else:
pass
</syntaxhighlight>
</syntaxhighlight>
</div>


==LaTeX Math==


; NEW WAY


<pre><tex>f{(x)} = {\sum \lambda \cdot \bar{y} \over \sum \lambda^{ \over 2 n} }</tex></pre>


:: <tex>f{(x)} = {\sum \lambda \cdot \bar{y} \over \sum \lambda^{ \over 2 n} }</tex>
{{Clear}}
<br><br><br>


; OLD WAY
==LaTeX Math==


<pre>
<pre>
Line 656: Line 452:
/>ℵ - – —
/>ℵ - – —
|}
|}
{{Clear}}
<br><br><br>


==Image Annoation==
==Image Annoation==
Line 668: Line 473:
</nowiki>
</nowiki>


==Livelets==
*[http://www.mediawiki.org/wiki/Extension:Livelets 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:


<nowiki>
{{Clear}}
{{#live: {{MyVerySlowTable}} }}
<br><br><br>
</nowiki>
 
 




Line 702: Line 504:


----
----
===Using Custom Ref Template===
<pre>
{{r|Smith2015}}
{{rs|Smith2015|Smith, Kandel, et al. 2015 Title of the article}}
</pre>


In the inline text, the reference template (<code><nowiki>{{r|tag}}</nowiki></code>) can be used as so...


:: Lorem ipsum dolor sit amet, consectetur adipiscing elit <nowiki>{{r|Smith2015}}</nowiki>, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua <nowiki>{{r|Jones2012}}</nowiki>.


Then in the <nowiki><references></nowiki> section, the refs template (<code><nowiki>{{rs|tag|info}}</nowiki></code>) can be inserted as such...
{{Clear}}
<br><br><br>
 




: <nowiki><references></nowiki>
: <nowiki>{{rs|Smith2015|Smith, Kandel, et al. 2015 Title of the article}}</nowiki>
: <nowiki>{{rs|Jones2012|Jones, Einstein, et al. 2012 Title of the article}}</nowiki>
: <nowiki><references /></nowiki>


==HTML ==
==HTML ==
Line 774: Line 567:
| width || pixels || Specifies the width of an iframe
| width || pixels || Specifies the width of an iframe
|}
|}
{{Clear}}
<br><br><br>


==Tables==
==Tables==
Line 806: Line 610:
|[http://mnm.engr.uconn.edu/MNM/SMSSearchServlet Minimotif Miner] || Application to search for short sequence motifs in Proteins.                 
|[http://mnm.engr.uconn.edu/MNM/SMSSearchServlet Minimotif Miner] || Application to search for short sequence motifs in Proteins.                 
|}
|}
{{Clear}}
<br><br><br>




Line 878: Line 691:


;Check if the upgrade worked by going to the MediaWiki page "Special Version"
;Check if the upgrade worked by going to the MediaWiki page "Special Version"
{{Clear}}
<br><br><br>


== Quoting ==
== Quoting ==
Line 885: Line 708:
{{cquote|quote goes here}}
{{cquote|quote goes here}}
</pre>
</pre>
{{Clear}}
<br><br><br>




Line 893: Line 724:
#content a[href ^="http://"].external {background: center right no-repeat; padding-right: 1px;}
#content a[href ^="http://"].external {background: center right no-repeat; padding-right: 1px;}
</nowiki>
</nowiki>
{{Clear}}
<br><br><br>




Line 900: Line 740:


{{Button|TPB=.5em| Button Text }}
{{Button|TPB=.5em| Button Text }}
{{Clear}}
<br><br><br>




Line 906: Line 755:
See here: [[Table Map]]
See here: [[Table Map]]


{{Clear}}
<br><br><br>





Latest revision as of 00:34, 20 May 2020

MediaWiki Help Pages

Bradleymonk.com .JS

HTML & CSS



Adding HTML5 Video to MediaWiki


To embed a youtube video, use the following code:

{{#ev:youtube|tDKUU0SqbSA}}


{{#ev:youtube|tDKUU0SqbSA}}








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


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 SyntaxHighlight extension, formerly known as SyntaxHighlight_GeSHi, provides rich formatting of source code using the <syntaxhighlight> tag. It is powered by the Pygments library and supports hundreds of different programming languages and file formats.


Usage & Parameters

<syntaxhighlight lang="python" line='line'>
def quick_sort(arr):
	less = []
	pivot_list = []
	more = []
	if len(arr) <= 1:
		return arr
	else:
		pass
</syntaxhighlight>
def quick_sort(arr):
	less = []
	pivot_list = []
	more = []
	if len(arr) <= 1:
		return arr
	else:
		pass


lang


The lang="name" attribute defines what lexer should be used. The language affects how the extension highlights the source code.

<syntaxhighlight lang="python">
def quick_sort(arr):
    less = []
</syntaxhighlight>


def quick_sort(arr):
    less = []



line



The line attribute enables line numbers.


<syntaxhighlight lang="python" line="1">
def quick_sort(arr):
    less = []
</syntaxhighlight>


def quick_sort(arr):
    less = []


start


<syntaxhighlight lang="python" line start="55">
def quick_sort(arr):
    less = []
</syntaxhighlight>


def quick_sort(arr):
    less = []


highlight


The highlight attribute specifies one or more lines that should be marked (by highlighting those lines with a different background color). You can specify multiple line numbers separated by commas (for example, highlight="1,4,8") or ranges using two line numbers and a hyphen (for example, highlight="5-7"). Note that the line number specification ignores any renumbering of the displayed line numbers with the start attribute.


<syntaxhighlight lang="python" highlight="1,5-7" start=3 line>
def quick_sort(arr):
    less = []
    pivot_list = []
    more = []
    if len(arr) <= 1:
        return arr
</syntaxhighlight>


def quick_sort(arr):
    less = []
    pivot_list = []
    more = []
    if len(arr) <= 1:
        return arr




inline


The attribute indicates that the source code should be inline as part of a paragraph (as opposed to being its own block).


Note that line breaks can occur at any space between the opening and closing tags unless the source code is marked non-breakable with class="nowrap" (on those wikis that support it; see below) or style=white-space:nowrap. For example:

In python, <syntaxhighlight lang="python" inline>lambda x: x * 2</syntaxhighlight> is a lambda expression.

results in:

In python lambda x: x * 2 is a lambda expression.


class


When inline is used, class="nowrap" specifies that line breaks should not occur at spaces within the code block.


Using class="nowrap":

<nowiki>
<div style="max-width:300px; border:1px solid #ccc "></div>
<nowiki>

xxxxxxxxxxxxxxxxxxxxxlambda x: x * 2xxxxxxxxxxxxxxx


Using style="white-space:nowrap":

<div style="white-space:nowrap; max-width:300px; border:1px solid #ccc"></div>

xxxxxxxxxxxxxxxxxxxxxlambda x: x * 2xxxxxxxxxxxxxxx



style



The style attribute allows CSS attributes to be included directly. This is equivalent to enclosing the block in a <div> (not <span>) tag. The tab‑size attribute cannot be specified this way; it requires an enclosing <span> tag. For example:

<div style="max-width:600px; background:rgba(10,10,10,.30);">
PYTHON:
<syntaxhighlight lang="python" style="border:1px dashed gray; background:rgba(10,10,50,.10);">
def quick_sort(arr):
	less = []
	pivot_list = []
	more = []
	if len(arr) <= 1:
		return arr
	else:
		pass
</syntaxhighlight>
</div>


PYTHON:

def quick_sort(arr):
	less = []
	pivot_list = []
	more = []
	if len(arr) <= 1:
		return arr
	else:
		pass






LaTeX Math

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








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

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

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