Help:Editing Syntax

From Starbounder - Starbound Wiki
Jump to: navigation, search

This page describes the basics of the Wiki Syntax used within Starbounder.org.

Pages on wikis take two forms: What you see when you're reading an article, and a what you see when you're contributing to an article. This is similar to how forums work -- when you contribute a new post or comment, you frequently have the option to format your contribution in some way, like with BBCode. Wikis have their own language, simply called Wiki markup, that is extremely powerful and allows many HTML tags as well.

When you save an edit, the wiki looks through your contribution and interprets or parses any code you included, then posts it to the page. When editing a page, can see a temporary preview of your submission by using the Show preview button, next to the Save page button.

Sections and table of contents

It's important to give your articles a clear structure, so your reader can quickly navigate to the information they're looking for.

Sections

This is how you divide your pages into seperate parts.

what you type what you get
== Section == Section
=== Section === Section
==== Section ==== Section
===== Section ===== Section

If you are familiar with HTML, these are analogous with the header tags <h2> through <h5>. The use of single = sections, and the HTML tag <h1> is only used for the page title, and shouldn't be in the page body.

Each section automatically populates any table of contents, which is invoked with the __TOC__ call. Even if the table of contents isn't explicitly called, any page with four or more section spacers will automatically have one. When you have four or more sections, you can manually place your table of contents with a __TOC__ call before the first section, otherwise it'll be the first item on the page.

The last thing sections do is to act as an anchor for links. Anchors are places on the page that the browser can jump to directly, not just at the top of the page. This is how the links in the table of contents work. See the link section for more information.

Horizontal rules

Sometimes it's useful to divide sections into smaller sections, without wanting to actually start a new section. Using a horizontal rule is the way to do this.

what you type what you get
↓ what you get ↓----↑ what you get ↑ ↓ what you get ↓
</hr>
↑ what you get ↑

Links

Aside from content, links are the second most important part of an article. You could make the most researched, completely attributed, best formatted article to ever exist, but if there aren't any links to it, nobody will see it. Similarly, your perfect article would fall flat if you didn't take the opportunity to link to other pages.

Notice the way to make custom link text in the examples below. The | (bar) symbol (above Enter/Return key) is used to seperate the link location with the custom link text. Otherwise, the link text borrows the name of the link name.

Internal links

Internal links are what make wikis awsome. Use links on key words to enhanse the content of your article. Links to pages within Starbounder can be entered using [[ ]] (double square brackets).


what you type what you get notes
[[Version_history]] Version_history link uses page name
[[Version_history | releases]] releases link uses custom link text
[[Version_history#Angry_Koala]] Version_history#Angry_Koala link goes to anchor within page
[[Version_history#Angry_Koala | a previous update]] a previous update link goes to anchor with custom link text
[[:Category:Duplicate_Item_Name]] Category:Duplicate_Item_Name the 'category' namespace works this way
[[User_talk:Misdirected]] User_talk:Misdirected other namespaces work this way
[[#Images | go down]] go down Jump to an anchor on this page

Remember, if there's a link that would be useful for your article, add it!

External links

Ocasionally, it's useful to link directly to outside sources. The offical site and the sub-reddit are good examples. The syntax for this is a little different, the use of a bar is not necessary to change the link's text.

what you type what you get notes
[http://playstarbound.com/] [1] normal in-line link
[https://playstarbound.com/] [2] in-line link with a secure connection (https://)
[http://playstarbound.com/ offical site] offical site custom link text
http://playstarbound.com/ http://playstarbound.com/ raw link

Inline formatting

This wiki requires a combination of wiki markup and HTML tags to format text within a paragraph. All advanced in-line editing on this wiki requires use of the HTML <span> tag. Keep in mind that single-quotes are used below, not double.

what you type what you get
''italic text'' italic text
'''bold text''' bold text
'''''bold-italic text''''' bold-italic text
<s>strikethrough text</s> strikethrough text
<u>underlined text</u> underlined text
{{monospan|monospaced text}} monospaced text
normal <sup>superscript</sup> normal superscript
normal <sub>subscript</sub> normal subscript
<span style="color:red">custom ''span'' element</span> custom span element
<!-- invisible comment -->

Even though you cannot see the invisible tag in the last example, it is there. Using a comment and can be a good way to tell other editors that a consensus has been made on a point, and not to edit it.

Additionally, spans can be styled using css styling, which includes not only text color, but borders, spacing, and much more.

Text size

Text size is handled exclusively with HTML.

what you type what you get
<big>big text</big> big text
<small>small text</small> small text
<span text-height="font-size:1.3em;">span styled text</span> span styled text

Paragraphs and newlines

Paragraphs are separated by two new lines. One new line produces nothing. To make a deliberate new line without starting a new paragraph, use the <br /> tag.

what you type what you get

First paragraph. Mauris ut elementum odio, a posuere nisi. Nunc quam mauris, pretium vel faucibus sit amet, blandit in dui. Morbi mollis eleifend leo, vitae tempor tellus facilisis id. Mauris quis congue ante.

Second paragraph. Nullam lorem massa, egestas in ultrices eu, cursus vitae elit. Aliquam erat volutpat.
Wanting a new line.<br />
Getting a new line.

First paragraph. Mauris ut elementum odio, a posuere nisi. Nunc quam mauris, pretium vel faucibus sit amet, blandit in dui. Morbi mollis eleifend leo, vitae tempor tellus facilisis id. Mauris quis congue ante.

Second paragraph. Nullam lorem massa, egestas in ultrices eu, cursus vitae elit. Aliquam erat volutpat.Wanting a new line.
Getting a new line.


Literal text

If you want to escape parsing and produce raw text enclose it in <nowiki> characters.

what you type what you get
<nowiki>''this is'' <u>not</u> getting '''parced''' by the wiki</nowiki> ''this is'' <u>not</u> getting '''parced''' by the wiki

This sort of styling is also called pre-formatted text. Every key you enter is output to the screen. Meaning every character, space, tab, and newline will be output in the same way you type it. There are a few more options that are explained in more detail below.

Lists

Lists are useful when wanting to concisely communicate a hierarchy. There are several options to choose from, so be sure to choose the style that makes the most sense.

Note, these only work when placed at the beginning of lines.

Bulleted lists

Make a list element by starting a line with an asterisk. To increase indent put extra asterisks.

what you type what you get
* Bullet 1
* Bullet 2
** Bullet 2.1
  • Bullet 1
  • Bullet 2
    • Bullet 2.1

Numbered lists

Similarly, you can create numbered lists by starting a paragraph with one or more hashes.

what you type what you get
# Item 1
# Item 2
## Item 2.1
  1. Item 1
  2. Item 2
    1. Item 2.1

Description lists

This type of list is useful in defining terms as a direct subset of another. Like how sections have sub-sections for related topics, description lists can be used to explain directly related things in a single line.

what you type what you get
; Term : Definition1
Term 
Definition1
; Term
: Definition1
: Definition2
: Definition3
: Definition4
Term
Definition1
Definition2
Definition3
Definition4

Code

Sometimes text its rawest form, without formatting, is needed.

Pre-formatted text

This is most often done through the use of the <pre> tag.

what you type what you get

<pre>
{
  "title": "Awsome Box",
  "description": "If I were a box, this would be me.",
  "type": "object",
  "properties": {
    "objectName": {
      "description": "The most awsome box to ever exist.",
      "type": "string"
    }
  }
}
<pre>

{
  "title": "Awsome Box",
  "description": "If I were a box, this would be me.",
  "type": "object",
  "properties": {
    "objectName": {
      "description": "The most awsome box to ever exist.",
      "type": "string"
    }
  }
}

Pre-spaced text

Similarly, if you add two spaces at the beginning of a line, the wiki will automatically interpret it like <pre>. Those two spaces will still be there, though.

what you type what you get

  {
    "title": "Neat Box",
    "description": "Nifty box, I must say.",
    "type": "object",
    "properties": {
      "objectName": {
        "description": "Would you look at that box.",
        "type": "string"
      }
    }
  }

 {
   "title": "Neat Box",
   "description": "Nifty box, I must say.",
   "type": "object",
   "properties": {
     "objectName": {
       "description": "Would you look at that box.",
       "type": "string"
     }
   }
 }

Code tag

Similar to the <pre> tag is the <code> tag. The <pre> tag will take up the entire width of the page, while the <code> tag will remain a single line. This can be a little weird if the <code> wraps to a new line, but it still definitely its uses.

what you type what you get
Lorem ipsum dolor sit amet, consectetur adipiscing elit. <code>Look at me, I'm code!</code> Proin iaculis tempus metus, consectetur interdum urna tincidunt eu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Look at me, I'm code! Proin iaculis tempus metus, consectetur interdum urna tincidunt eu.

Images

Judicious insertion of images can give an instant visual boost to your article.

There are a lot of options when inserting an image into a page, and could be the topic of its own guide. Use Wikipedia's guide for a more comprehensive tutorial. Just know that not all the variations can be used on Starbounder.org, because Wikipedia uses thousands of customized settings.

"Chucklefish logo"
The basic syntax for adding an image (let's use ChucklefishLogo.png) is: [[File:ChucklefishLogo.png|left]]

You can choose to use either File: or Image: to insert an image. There is absolutely no difference between how either behaves, and is left entirely up to the editors' personal preference. By default, the image links directly to the page where the image is uploaded.

Stylistically, it's bad form to refer to "the image on the left/right", because the mobile version handles images differently. It may seem small detail, but referencing images by their content (not their location on the page) also help non-sighted readers.

One final note before we move on, when using templates that use images, just use Example.png, not File:Example.png, because this will likely break the template.

Modifiers

The previous example is pretty basic, because it only has a single modifer. If it didn't have the left after the image name, the wiki would put the image into the paragraph like it was another word in the sentence. Sure, it works as it is, but in order for this to work, you must specifically want your image to float to the left, be exactly the right size, and link directly to the image's file page. Nothing more, nothing less. It's not entirely unlikely that this is exactly what you want, but if that image changes size dramatically, you're page is going to get messed up.

The syntax for adding modifiers is: [[File:ChucklefishLogo.png|modifier1|modifier2|modifer3]] and so on.

Lets quickly go over some of these modifiers:

what you type what it does
left moves the image to the left
right moves the image to the right
center centers the image; prevents text from appearing on either side
none prevents the text from flowing around the image if it's left or right
"Chucklefish logo within a 'thumbnail' formatting box"
Chucklefish is the developer of Starbound.

Thumbnails

Thumbnails are a great way to enhance the use of an image, and to add a link or two to a relevant article. The text shown below the image is its own modifier, stylistically entered at the end. There isn't anything necessary to declare it as the caption, and it can even take formatting.
This second example uses this code:
[[File:ChucklefishLogo.png|
thumb|
right|
'''[[Chucklefish]]''' is the developer of '''[[Starbound]]'''.]]

You may notice that the code is broken up between multiple lines. This isn't necessary, but it does make it easier for an editor to make sense of it. The only requirement for multi-line calls is that the first | (pipe symbol) be on the first line, then all spaces and line breaks next to a pipe is ignored.

Inserting large images as thumbnails will resize them to a standardized width. If you want to use the thumbnail box, but want to use the default size, replace the use of thumb with frame.

Resizing

"Chucklefish logo resized to be really small"
It is possible to deliberately control the size of an image. Ideally, Starbound's pixel art should be resized externally, not with the browser, but is perfectly acceptable for things like screenshots. You can specify the dimensions of an image with the modifiers x123px for x, y123px for y, or 123x123px for both.

The tiny image shown in the previous paragraph has the modifier 175x25px, but the image is actually resized to 30x25px, so it's best to declare a single dimension so you know what you're getting. If the image is stretching oddly (it happens sometimes), that would be a good time to use the joint-declaration.

Linking images

It's pretty easy to turn pages into links with the link= modifier. Links written in this way still follow the same guidelines as normal links.
The code [[File:ChucklefishLogo.png | link=Chucklefish]] would link to the Chucklefish page.

While this is pretty cool, most of the time readers probably won't expect images to link to other articles. Where this is useful is in the development of templates, where images are frequently links to articles. If you find a case where a linked image makes sense, there's probably a template for that.

Tables

Tables are a very good way to communicate sets of data in many cases. Like images, the potential complexity of tables is tremendous. Visit Wikipedia's tutorial for a better understanding of how tables work. This section will only give the most basic information.

what you type what you get
{| class="wikitable"
|-
! Header 1
! Header 2
! Header 3
|-
| row 1, cell 1
| row 1, cell 2
| row 1, cell 3
|-
| row 2, cell 1
| row 2, cell 2
| row 2, cell 3
|}
Header 1 Header 2 Header 3
row 1, cell 1 row 1, cell 2 row 1, cell 3
row 2, cell 1 row 2, cell 2 row 2, cell 3

Here's a crash-course on tables:

  • Tables start with {| and end with |}.
  • Rows start with |-
  • Cells within rows are separated with |
    • If your table uses headers, put ! before the header's text

Styling a section must immediately follow the part declaration, separated by a |, which can be confusing and clutter up your table. It's highly recommended to keep in-table styling to a minimum, and to only use the styling from class="wikitable" after starting the table. It's ok if you don't understand why this works, just know it's a component of HTML administrators of the wiki have set up for you to use.

It isn't necessary to have every cell on their own line, but it's frequently easier to make sense of the formatting with every cell or row on its own line.

Hopefully, this is enough to get by in most cases. Again, if you need some more advanced table formatting, look over Wikipedia's tutorial for your answer.

References

It's always a good idea to back-up your information with outside sources. You may be tempted to use this to promote yourself, but this is against our policy. Valid references include the official website, developer tweets, reddit comments from the developers, and news sources. Basically, if the information came directly from a Chucklefish employee, or someone who talked to one and wrote it down, it's worth a reference.

Here's how they work:

what you type what you get
== Reference test ==
This is the text that you are going to verify with a reference.<ref>Reference details go here</ref>
== References ==
<references />
Reference testThis is the text that you are going to verify with a reference. [1]
References
  1. Reference details go here

Use external links in the <ref> tags, and customize the link text to explain what the link is. Don't just link the straight URL without any explanation of what it is going to.