Wiki Code Cookbook
Basic Font Stuff
It's much easier to change a font's style, such as into bold or italic, using the WYSIWYG interface. But we do have a few NETwiki standards for these font styles to help keep our wiki readable.
Bold: Used to bring emphasis to text, but be careful not to abuse it. Most effective when used sparingly.
Italic: Not really used in the NETwiki at all, and should be avoided because it is difficult to read. An exception should be made for narrow uses like scientific names or in some source citations. Otherwise, its use will usually be rejected by editors.
Bold italic: Bold italic is an acceptable use of italic style in NETwiki for bringing emphasis.
Underline: Should never be used, as it makes text difficult for some people to read. Narrow and specialized uses, such as with a source citation, are allowed in NETwiki.
Strikethrough: Often has a very narrow use case. It's not banned from NETwiki, but an article needs to have a good reason to use it.
ALL CAPS: This is usually used for emphasis, but only used in NETwiki when bold or bold italic won't work for some reason. It's also very annoying to read, so the writer needs a good reason for using it.
Big and Small styles: No hard rules in NETwiki governing their use, but they shouldn't be used to emphasize text. These are more useful styles for design reasons (for example, using Big text at the top of a table column).
'''Bold:''' Used sparingly to bring emphasis to text. ''Italic:'' Not really used in the NETwiki at all, and should be avoided because it is difficult to read. An exception should be made for narrow uses like scientific names or in some source citations. Otherwise, its use will usually be rejected by editors. '''''Bold italic:''''' Bold italic is an acceptable use of italic style in NETwiki for bringing emphasis. <u>Underline</u>: Should never be used, as it makes text difficult for some people to read. Narrow and specialized uses, such as with a source citation, are allowed in NETwiki. <s>Strikethrough</s>: Often has a very narrow use case. It's not banned from NETwiki, but an article needs to have a good reason to use it. ALL CAPS: This is usually used for emphasis, but only used in NETwiki when bold or bold italic won't work for some reason. It's also very annoying to read, so the writer needs a good reason for using it. <big>Big</big> and <small>Small</small> styles: No hard rules in NETwiki governing their use, but they shouldn't be used to emphasize text. These are more useful styles for design reasons (for example, using Big text at the top of a table column).
Emphasis in Type
Sometimes you need your words to pop in order to place emphasis on them. For the most part, these tools should be used sparingly. For one thing, it might make a page more difficult to read for persons with sight impairments. And after all, if everything is emphasized, nothing is.
Essential/Non-essential headers
If you are writing a particularly long article and/or an article required for Basic NET training, you may want to indicate some sections as "essential" reading and other sections as "supplemental". This is not a trick with text so much as it's a very small table that sits at the top of a page section. For an example in context, see: Basic NET Class Goals.
NETwiki standard:
- "Essential" should be a single line table in "firebrick" red, spanning 25% of the page, white bold text.
- "Supplemental" should be a single line table in "gold", spanning 25% of the page, white bold text.
| Section Importance: Essential |
{|class="wikitable" style="width: 25%; "
|+
| style="background: firebrick; color: white" |'''Section Importance: Essential'''
|}
| Section Importance: Supplemental |
{| class="wikitable" style="width: 25%;
|+
|style="background: gold; color: black"|'''Section Importance: Supplemental'''
|}
Simple yellow highlight on text
Wiki syntax comes with a simple and easy way to place a yellow highlight on selected text. Simply brace it inside <mark> and </mark>. Example: The quick brown fox jumps over the lazy dog.
<mark>The quick brown fox</mark> jumps over the lazy dog.
Elaborate text highlights
Highlighting text in a color other than yellow can be done, but it's a pain in the ass. Still, if you gotta have that je ne sais quoi, there is a way to do it by marking it up with a <span>. For example:
All PBEM employees must stop crying before returning to work.
<span style="background:black; color:white">'''All PBEM employees must stop crying before returning to work.'''</span>
For design reasons, you may want a space before or after the sentence that is the same color as the highlight so it doesn't look quite so cut off. That's an extra layer of code. The syntax will just cut off a blank space even if you have it inside the brackets. So instead, you have to have a symbol, like an asterisk, bookending your sentence that is the color of the background.
*All PBEM employees must stop crying before returning to work.*
<span style="background:black; color:black">*</span><span style="background:black; color:white">'''All PBEM employees must stop crying before returning to work.'''</span><span style="background:black; color:black">*</span>
In that example, I also made the text white. But naturally, you can change the color of the text and background to create all manner of page design monstrosity.
Table Adjustments
Setting table width
If you use a table but do not set a width, it can take up all the horizontal space available to it. That's not bad exactly, but it might look bad and/or defeat the purpose of having a table in the first place. You can control a table's width by assigning it a percentage of the screen's horizontal space, or by pixels.
Setting table width by percentage
Let's say you do not want a table to extend beyond 25% of the screen's width. You would mark that up as:
{| class="wikitable" style="width: 25%;"
|+
!Column 1
!Column 2
!Column 3
!Column 4
|-
|Info 1
|Info 2
|Info 3
|Info 4 But the content here is longer.
|}
This gets you:
| Column 1 | Column 2 | Column 3 | Column 4 |
|---|---|---|---|
| Info 1 | Info 2 | Info 3 | Info 4 But the content here is longer. |
Note that the width of the individual columns will adjust spacing to fill 25% of the horizontal space. In this example, if all the content was the same size, all the columns would space evenly.
Setting table width by pixel
Same as the above, except you notate the percentage as the number of pixels instead. In this case, we'll set to 500 pixels.
{| class="wikitable" style="width: 500;"
|+
!Column 1
!Column 2
!Column 3
!Column 4
|-
|Info 1
|Info 2
|Info 3
|Info 4 But the content here is longer.
|}
This gets you:
| Column 1 | Column 2 | Column 3 | Column 4 |
|---|---|---|---|
| Info 1 | Info 2 | Info 3 | Info 4 But the content here is longer. |
Media Embeds
One of the things that makes this Wiki so effective for PBEM volunteers is that article writers can embed video, images, and file for downloads.
Embed a video
In NETwiki, you can embed a video only from YouTube or Vimeo. Vimeo is the preferred NETwiki video source, since Vimeo doesn't make viewers watch ads. As most videos are not available on Vimeo, YouTube will do. The embed code for a video looks like this:
Let's go over each part of this phrase in Wiki syntax; each part is required for the code to post successfully and each part must be segregated by the "|" symbol. The numbers in magenta correspond to the list below:
- {{ Opening braces, and these will be the same any time someone is embedding a video.
- #ev: these three characters set up the next part to name which video service will be used in the embed, either YouTube or Vimeo.
- youtube this part should be completed according to which video service is going into the embed. In this example, it is YouTube, but it could be Vimeo if the embed is coming from Vimeo.
- 1S2nuZsBz8g this is the most important part of the embed. It is the unique identifier for the video you plan to use.
- 430 this indicates the width of the video.
- Right this indicates where on the page the video will be aligned on the page. It can be right, left, or centered.
- This part of the phrase is the caption of the video that anyone viewing the page will see. It will not change a video's header title from Vimeo or YouTube.
- Frame I don't know what this actually means, just don't leave it out.
- }} closing braces.
In English, this phrase of code is saying (imagine in your best wiseguy voice): "Hey NETwiki. I got a video embed job for ya. I want you to go to YouTube, see? And look up a mook named 1S2nuZsBz8g. You bring him back here, tell him he gotta lay off the cannoli because he has to fit into a frame 430 pixels wide. Put him in a chair on the right side of the screen. And then we're gonna address him as 'Exegesis addressing Kierkegaard's views on the meaning of life', because that's his name now, see? Now get goin."
{{#ev:youtube|1S2nuZsBz8g|430|right|'''''Video: Exegesis addressing Kierkegaard's views on the meaning of life'''''|frame}}
You can see the resul to the right side of this page.
NETwiki standard: We recommend (but do not require) right-aligned videos. Left aligned videos interfere with wrapping text and often don't look good. A video caption should always appear in bold text and begin as "Video: (title)". Width should consistently appear as 430 pixels. Obviously, no video should be posted that includes adult content (e.g. nothing the video would be slapped with an "R" rating for).
Miscellaneous Tricks
Horizontal line
If you want to create a horizontal line to set off sections of text for any reason, the code is simple.
