Differences

This shows you the differences between two versions of the page.

--- wiki_markup_examples [2015/09/18 07:58]
admin [Wiki_Markup_Examples]
+++ — (current)
@@ Line 1: / Line 1: @@
-====== Wiki Markup Examples ======
-This page demonstrates some of the common wiki markup functions, including headlines, text formatting, lists, links, images and source code blocks.
-===== Headlines =====
-<itemTags>text,styling</itemTags>
-Create headlines by surrounding a line of text with a number of "equals" signs.  The more signs you use, the smaller the headlines.  Six levels are available, but you should never use Level 1 because this should be reserved for the title of the page.  Level 1 and Level 2 headlines have an underline beneath them; levels 3-6 do not.
-Example code:<br>
-<pre style="width:300px;"><nowiki>
-===== Level 2 Headline =====
-==== Level 3 Headline ====
-=== Level 4 Headline ===
-== Level 5 Headline ==
-== Level 6 Headline ==
-</nowiki></pre>
-Once you add a certain number of headlines to a page, a Table of Contents box will automatically be generated and displayed by the wiki.  If you don't want the TOC box to appear on a particular page, add the following markup anywhere in the page source code: <tt><nowiki>__NOTOC__</nowiki></tt>
-===== Text Emphasis =====
-<itemTags>text,styling</itemTags>
-You can create bold and/or italic text by surrounding the text with apostrophes.
-Example code:
-<pre style="width:350px;">
-<nowiki>//Italic text.//</nowiki>
-<nowiki>**Bold text.**</nowiki>
-<nowiki>//**Bold and italic text.//**</nowiki>
-</pre>
-Demo:
-//Italic text.//
-**Bold text.**
-//**Bold AND italic text.//**
-===== Indenting Paragraphs =====
-<itemTags>text,styling</itemTags>
-Indent paragraphs by adding a colon <tt><nowiki>></nowiki></tt> character to the beginning of the first line. An example:
-<pre style="width:200px;">
-:Level 1 indent
-::Level 2 indent
-:::Level 3 indent
-::::And so on...
-</pre>
-That example creates this output:
-:Level 1 indent
-::Level 2 indent
-:::Level 3 indent
-::::And so on...
-===== Links =====
-<itemTags>text</itemTags>
-==== To External Websites ====
-To create a link to an [[http://gis.thinkgeo.com|external website]], put its URL inside single square brackets.  You can also optionally specify the text to be linked by adding it after the URL (separate the URL and the text with a space).  Here's an example:
-<pre style="width:450px;"><nowiki>[[http://thinkgeo.com|ThinkGeo Homepage]]</nowiki></pre>
-==== To Other Wiki Pages ====
-To create a link to another page of this wiki, put the name of the page inside double square brackets.  You can also optionally specify the text to be linked by adding it after the page name (separate the name and the link text with a pipe).  Here's an example:
-<pre style="width:450px;"><nowiki>[[Main Page|Visit the wiki homepage]]</nowiki></pre>
-Any spaces in the page name will be automatically converted to underscores when the wiki translates it into a URL.
-**When linking to wiki pages, please note that page names are case sentitive!**  i.e., <tt>Main Page</tt> is different than <tt>Main page</tt>!
-==== To Anchors on Other Wiki Pages ====
-When linking to another wiki page, you can link directly to a headline on that page (so that the browser will scroll down automatically).  For example, here is a link to the "API Guide" heading on the Main Page of this wiki:
-<pre style="width:450px;"><nowiki>[[Main Page#API Guide|API Guide Table of Contents]]</nowiki></pre>
-And here is that link in action: [[Main Page#API Guide|API Guide Table of Contents]]
-Please note that if the page does not yet exist, you will not see the anchor in the URL of the red link.
-===== Lists =====
-<itemTags>text</itemTags>
-To create a bulleted list, simply begin each line with an asterisk.  To add a nested list, simply add more asterisks.  Example:
-<pre style="width:300px;">
-  * List item 1
-  * List item 2
-  * List item 3
-    * Nested item 1
-    * Nested item 2
-      * Doubled nested item
-    * Nested item 3
-  * List item 4
-  * List item 5
-</pre>
-The above example creates this output:
-  * List item 1
-  * List item 2
-  * List item 3
-    * Nested item 1
-    * Nested item 2
-      * Doubled nested item
-    * Nested item 3
-  * List item 4
-  * List item 5
-To create a numbered list, the steps are the same as for a bulleted list -- except you'll substitute the pound sign <tt>#</tt> instead of an asterisk. Example:
-<pre style="width:300px;">
-  - List item 1
-  - List item 2
-  - List item 3
-    - Nested item 3.1
-    - Nested item 3.2
-      - Doubled nested item 3.2.1
-    - Nested item 3.3
-  - List item 4
-  - List item 5
-</pre>
-The above example creates this output:
-  - List item 1
-  - List item 2
-  - List item 3
-    - Nested item 3.1
-    - Nested item 3.2
-      - Doubled nested item 3.2.1
-    - Nested item 3.3
-  - List item 4
-  - List item 5
-===== Images =====
-<itemTags>images</itemTags>
-{{wiki:GreatCircle.png ?200|Screenshot}}
-To upload an image to the wiki, click "[[Special:Upload|Upload file]]" on the toolbox.  (You can find the toolbox at the bottom of the left sidebar.) If you want to see a gallery of the images (or other files) that have already been uploaded, visit the [[Special:NewFiles]] page.
-Adding an image in a wiki article is quite easy.  There are a vast number of parameters and visual customizations available, but the important ones will allow you to shrink an image down to any size, align it to the left or right (so the text flows around it), and set a caption.  There are some very useful instructions for doing this right on the [[Special:Upload|Upload file]] page.
-The example screenshot to the right was generated with this code:
-<pre style="width:500px;"><nowiki>{{wiki:GreatCircle.png ?200|Screenshot}}</nowiki></pre>
-The options explained:
-^  Markup ^  Explanation ^
-| <tt>**File:GreatCircle.png**</tt>   | The name of the file you uploaded.   |
-| <tt>**thumb**</tt>   | Tells the image to display as a thumbnail (smaller size), which links to the full-size version, floated to the right side of the page.   |
-| <tt>**200px**</tt>   | The size of thumbnail you want to display. (Uses high-quality resampling, so feel free to choose any value.)   |
-| <tt>**right**</tt>   | Floats the image to the right side of the page.  Use <tt>//left//</tt> to float to the left.   |
-| <tt>**Screenshot**</tt>   | The caption to display beneath the image.   |
-The full complement of image options (with demonstrations) can be seen [[http://www.mediawiki.org/wiki/Help:Images|here]].
-===== Tables =====
-<itemTags>text,tables</itemTags>
-You can make an HTML table with wiki markup, using only braces, pipes and dashes.  Here is an example:
-<pre style="width:400px;">
-^  Header 1 ^  Header 2 ^  Header 3 ^
-| style="background:#ffd;" | Row 1 Col 1   | Row 1 Col 2   | Row 1 Col 3   |
-| style="background:#ffd;" | Row 2 Col 1   | Row 2 Col 2   | Row 2 Col 3   |
-</pre>
-Which generates the following result:
-^  Header 1 ^  Header 2 ^  Header 3 ^
-| style="background:#ffd;" | Row 1 Col 1   | Row 1 Col 2   | Row 1 Col 3   |
-| style="background:#ffd;" | Row 2 Col 1   | Row 2 Col 2   | Row 2 Col 3   |
-Specifying the "wikitable" class adds the faint gray background color, thin gray borders and blue headers (the headers will only show up if you create header cells by using the <tt>!</tt> symbol, as demonstrated in the example above).  Additional HTML attributes (including inline CSS style tags) can be specified on each table cell.  Table markup is very flexible but also somewhat complex; see [[http://www.mediawiki.org/wiki/Help:Tables|this page]] for some good tutorials.
-===== Source Code =====
-<itemTags>text,styling</itemTags>
-==== Syntax Highlighted Code Blocks ====
-To post syntax highlighted (colorized) source code, wrap your code in <tt><nowiki><source></source></nowiki></tt> tags.  This tag activates the [[http://www.mediawiki.org/wiki/Extension:SyntaxHighlight_GeSHi|SyntaxHighlight_GeSHi]] extension, which handles syntax highlighting.  Additionally, on the <tt><nowiki><source></nowiki></tt> tag, add the <tt>lang</tt> parameter to specify the code language.
-://Note: You can also use the <tt><nowiki><syntaxhighlight></nowiki></tt> tag instead of <tt><nowiki><source></nowiki></tt>. This can be useful if the code you are posting actually contains the tag "<tt><nowiki><source></nowiki></tt>", for example, in XML.
-For example, here is the wiki markup you'd use to highlight a block of C#:
-<pre style="width:350px;">
-<source lang="csharp">
-using ThinkGeo.MapSuite.Core;
-</source>
-</pre>
-The above markup results in:
-<source lang="csharp">
-using ThinkGeo.MapSuite.Core;
-</source>
-Here are some commonly-used values for the <tt>lang</tt> attribute:
-^  Value ^  Language ^
-| <tt>csharp</tt>   | C#   |
-| <tt>vb</tt>   | Visual Basic   |
-| <tt>vbnet</tt>   | Visual Basic .NET   |
-| <tt>html4strict</tt>   | HTML   |
-| <tt>asp</tt>   | Active Server Pages (ASP)   |
-| <tt>sql</tt>   | SQL   |
-| <tt>tsql</tt>   | Transact-SQL   |
-| <tt>xml</tt>   | XML   |
-For a complete list of languages supported by the syntax highlighter, [[http://www.mediawiki.org/wiki/Extension:SyntaxHighlight_GeSHi#Supported_languages|see here]].
-==== Line Numbers and Highlights ====
-The <tt><nowiki><source></nowiki></tt> tag also supports additional parameters that can control the display of line numbers and also "highlight" a given number of lines with a yellow background.  Those parameters are as follows:
-^  Parameter ^  Purpose ^  Example ^
-| <tt>highlight</tt>   | Highlight the specified line(s) with a yellow background.   | <tt><nowiki><source lang="csharp" highlight="21-25"></nowiki></tt>\\ Highlights lines 21 through 25.   |
-| <tt>line</tt>   | Enables the display of line numbers.   | <tt><nowiki><source lang="csharp" line></nowiki></tt>\\ Enables the display of line numbers. Starts numbering from 1.   |
-| <tt>start</tt>   | When line numbers are enabled, specifies the starting number.   | <tt><nowiki><source lang="csharp" line start="55"></nowiki></tt>\\ Makes the first line number 55 and counts upward from there.   |
-Following is a demo of a large block of C# code, with line numbers enabled, numbering starting at 40, and lines 21-25 highlighted.  Please note that the <tt>highlight</tt> parameter does not take the <tt>start</tt> value into account, so when you are counting which lines to highlight, always start counting from 1. Also bear in mind that line numbering does //not// need to be enabled for highlighting to work.
-<source lang="csharp" line start="40" highlight="21-25">
-private MapEngine mMapEngine = new MapEngine();
-private void Form1_Load(object sender, EventArgs e)
-     {
-          <nowiki>//</nowiki> We create a new Layer and pass the path to a Shapefile into its constructor.
-          ShapeFileFeatureLayer worldLayer = new ShapeFileFeatureLayer(@"C:\Program Files\ThinkGeo\Map Suite Services Full Edition 3.0 (BETA)\Samples\HowDoISamples\SampleData\Data\Countries02.shp");
-          <nowiki>//</nowiki> Set the worldLayer with a preset Style, as AreaStyles.Country1 has YellowGreen background and black border, our worldLayer will have the same render style.
-          worldLayer.ZoomLevelSet.ZoomLevel01.DefaultAreaStyle = AreaStyles.Country1;
-          <nowiki>//</nowiki> This settings will apply from ZoonLevel01 to ZoomLevel20, that means we can see the world all the time no matter how far we zoom out/in.
-          worldLayer.ZoomLevelSet.ZoomLevel01.ApplyUntilZoomLevel = ApplyUntilZoomLevel.Level20;
-          <nowiki>//</nowiki> We need to add the world layer to the mapEngine's Static Layer collection.
-          mMapEngine.StaticLayers.Add(worldLayer);
-          <nowiki>//</nowiki> Set a proper extent for the Map. ExtentHelper.GetDrawingExtent will modify the extent based on the width/height of the canvas.
-          mMapEngine.CurrentExtent = ExtentHelper.GetDrawingExtent(new RectangleShape(0, 78, 30, 26), pictureBox1.Width, pictureBox1.Height);
-          <nowiki>//</nowiki> Create a bitmap to prepare for drawing on.
-          Bitmap bitmap = new Bitmap(pictureBox1.Width, pictureBox1.Height);
-          <nowiki>//</nowiki> Open the layer and draw it on the bitmap.
-          mMapEngine.OpenAllLayers();
-          <nowiki>//</nowiki> We set the unit of measurement to DecimalDegree because this is the inherent unit in the "countries02.shp" file.
-          mMapEngine.DrawStaticLayers(bitmap, GeographyUnit.DecimalDegree);
-          mMapEngine.CloseAllLayers();
-          <nowiki>//</nowiki> Set the bitmap to pictureBox1.
-          pictureBox1.Image = bitmap;
-     }
-</source>
-===== Citations, References and Footnotes =====
-<itemTags>text,styling</itemTags>
-==== Adding a Simple Footnote ====
-You can use some very simple tags to add hyperlinked footnotes to your text, which can be used in any way you see fit: For notes, references, source citations, etc.  The numbering of the footnotes will be taken care of automatically by the wiki.
-Here's how to add a simple footnote to a bit of text:
-:<tt>This is a sentence of text that I want to attach a footnote to.<nowiki><ref>This is the definition for the sample footnote.</ref></nowiki></tt>
-Which results in:
-:This is a sentence of text that I want to attach a footnote to.<ref>This is the definition for the sample footnote.</ref>
-If this is the first footnote you've added to your page, you **must also add** the footnote list.  This is typically found at the bottom of the page, after all the other content.  To add the footnote list, put this simple wiki markup at the bottom of your page:
-<pre style="width:200px;">
-<nowiki>{{reflist}}</nowiki>
-</pre>
-If you have many footnotes on your page, you might want to display the list of footnotes across two columns for greater readability.  To do this, add a <tt>|2</tt> to the <tt><nowiki>{{reflist}}</nowiki></tt> tag.  Like so:
-<pre style="width:200px;">
-<nowiki>{{reflist|2}}</nowiki>
-</pre>
-Scroll down to the bottom of this page to see what the references list looks like.
-==== Named Footnote Groups ====
-You can assign a footnote to a named group.  This is useful if you want to have three logical types of footnotes; for instance: "References," "Notes," and "External Links".  To assign a footnote to a named group, simply add the <tt>group</tt> parameter to your <tt><nowiki><ref></nowiki></tt> tag, as in the following example:
-<tt>Here's a sentence with a footnote attached.  The footnote belongs to a group called "Notes."<nowiki><ref group="Note">Here is the definition for the sample note which belongs to the named group "Notes."</ref></nowiki></tt>
-Which results in:
-:Here's a sentence with a footnote attached.  The footnote belongs to a group called "Note."<ref group="Note">Here is the definition for the sample note which belongs to the named group "Note."</ref>
-Whatever name you give to your group will be displayed in the footnote link before the reference number, so it's best to keep it short, abbreviating where necessary.
-For each named group you create, you must include a separate <tt><nowiki>{{reflist}}</nowiki></tt> on your page.  To add the footnote list for a named group, use this markup:
-<pre style="width:200px;">
-<nowiki>{{reflist|group=Note}}</nowiki>
-</pre>
-Scroll down to the bottom of this page to see the separate footnote list for the "Note" group.
-===== Message Boxes =====
-<itemTags>text,styling</itemTags>
-There is a special template available that will automate the process of displaying an important message in an indented box with a blue "Information" icon inside it.  You can see examples of these boxes at the top of each QuickStart Guide, such as [[Map Suite Desktop Edition Quick Start Guide|this one]].
-To create a message box, simply use the template markup below and replace the "Your message here" text with whatever text you want to appear in the box.  **Please note** that automatic paragraphs do not work in templates, so if you want to add a line break, you will have to do so manually with <nowiki><br/></nowiki> tags.
-<pre style="width:350px;">
-<nowiki>{{MsgBox|Your message here}}</nowiki>
-</pre>
-Using the above markup would result in a message box that looks like this:
-{{MsgBox|Your message here}}
-===== Figures with Captions =====
-<itemTags>images,styling</itemTags>
-Some instructional articles may require the use of screenshots or other visual figures with a small caption beneath each.  A template is available to help automate this process.  Simply copy and paste the markup below:
-<pre style="width:350px;">
-<nowiki>{{Figure|YourImage.png|This is my caption}}</nowiki>
-</pre>
-Naturally, you should replace "YourImage.png" with the actual name of the image you want to display, and the text "This is my caption" with the actual caption text you want to use.
-Here is an example of how this template renders on a page:
-{{Figure|GreatCircle.png|This is my caption}}
-===== Download Links =====
-<itemTags>text,styling</itemTags>
-A template is available to help "pretty up" the appearance of off-site file download links.  The template automatically displays a small "Download" icon to the left of the link, and can optionally display the size of the downloadable file in small type to the right of the link.  **Please note** that this //only// works for //off-site// downloads; that is, files that you have not uploaded into the wiki itself.
-Some example markup:
-<pre style="width:500px;">
-<nowiki>{{Filelink|[[http://www.url.com/file.zip|Download]]|100 KB}}</nowiki>
-</pre>
-Here is an example of how this template renders on a page:
-{{Filelink|[[http://download.thinkgeo.com/HelloWorld_Desktop(WinForms).zip|Download Sample Code From This Exercise]]|10 KB}}
-==== Omitting the File Size ====
-You can omit the file size by simply leaving off the last pipe character and everything following it, like this:
-<pre style="width:500px;">
-<nowiki>{{Filelink|[[http://www.url.com/file.zip|Download]]}}</nowiki>
-</pre>
-===== Video Links =====
-<itemTags>video</itemTags>
-A template is available to make it easy to link directly to videos that you've uploaded to the wiki.  In addition to adding a video icon to make the link stand out, this template will also link directly to the video file itself so that the user skips the interstitial MediaWiki file page common to most media types.
-Some example markup:
-<pre style="width:500px;">
-<nowiki>{{Videolink|[[Media:Video.mp4|Download the example video]]|2 MB}}</nowiki>
-</pre>
-Here is an example of how this template renders on a page:
-{{Videolink|[[Media:Video.mp4|Download the example video]]|2 MB}}
-==== Omitting the File Size ====
-You can omit the file size by simply leaving off the last pipe character and everything following it, like this:
-<pre style="width:500px;">
-<nowiki>{{Videolink|[[Media:Video.mp4|Download the example video]]}}</nowiki>
-</pre>
-===== Embedding YouTube Video =====
-<itemTags>video</itemTags>
-{{#ev:youtubehd|v_Z0Jb-eaoY|720||Setting up an Area Style in the Map Suite GIS Editor.}}
-===== Wiki Article Feeds =====
-<itemTags>text, feeds, RSS</itemTags>
-You can turn any page (or any portion of a page) into an RSS feed by adding some special tags.  This is powered by the [[http://www.mediawiki.org/wiki/Extension:WikiArticleFeeds|Wiki Article Feeds]] extension -- see that page for documentation and usage. We can use this to deliver up-to-date feeds of temporal content such as code samples, videos and the like.  As a test of this extension, I have turned this entire article into a sample feed.
-<endFeed />
-===== References =====
-{{reflist|2}}
-===== Notes =====
-{{reflist|2|group=Note}}

User Tools

Site Tools

Differences

Page Tools