Style Guide

A style guide to reference and copy blocks from when writing an article for the TSG Forge Wiki.

Use this style guide to browse the most common "blocks" available in the GitBook documentation suite to get a good overview of what is possible to include in an article to convey information to the reader.

The raw markdown text formatting of this page can be found at https://raw.githubusercontent.com/The-Scripters-Guild/ForgeWiki/main/community/contributing-to-tsg-forge-wiki/style-guide.md

White paint brush over a grid

Formatting Text

There are different ways of formatting text that can be useful in wiki articles. The example below will show these along with how to make different lists.

  1. Bold

    1. Italic

    2. Code

  2. Strikethrough

Heading With a Custom Anchor Link ->

By clicking the # on the right of the heading above, the page URL will get the anchor ID of that heading attached to it. This can be used to link readers straight to a specific section of the article.

Usually these anchor ID names are auto-generated by GitBook as a heading is made, but this heading has a custom anchor ID named "cat".

Halo Infinite Keys and Buttons to Use in the Wiki

Keyboard:

  • Letters:

  • Numbers:

  • Modifier Keys:

  • Large Keys:

  • Signs:

  • Function Keys:

  • Numpad:

  • Mouse:

Controller:

  • Buttons:

  • Triggers and Bumpers:

  • Dpad:

  • Left Stick:

  • Right Stick:

  • Both Sticks:

  • Menu Buttons:

Images

It is encouraged to use images to help explain a topic in a wiki article. Please try to compress the image size before uploading it to make pages load up faster. A resolution of 1280x720 px or lower and the .jpg extension are recommended. Try to keep image file size under 300 KB per image.

Resize your webpage to see how the images below interact on different page widths.

Single Images

Here are some ways to format single images placed in an article:

Fit (Default)

Fit – Removes all size specifications and displays either at full size or capped at a maximum width of 735 pixels for larger images.

A cat that is fitted to the article width

Full-Width

Full-width – Spans the full width of the window. Not ideal in most cases as it breaks the shape continuity of the article.

A cat that spans the width of the entire page!

Large-Sized

Large – 75% of the image size

A large-sized cat

Medium-Sized

Medium – 50% of the image size

A medium-sized cat

Small-Sized

Small – 25% of the image size

A small-sized cat

Multiple Images

Two Images

A cat on the left
A cat on the right

Three Images

A cat on the left
A cat in the center
A cat on the right

Four Images

Just two two-image groups on top of each other.

A cat on the top left
A cat on the top right
A cat on the bottom left
A cat on the bottom right

Infoboxes

GitBook has four different visually appealing infobox designs that can be used to catch the reader's attention. Add these into the article when there is something important that the reader should pay attention to even if they are just skimming the article.

Info, great for showing general information, or providing tips and tricks.

Infobox With Images

Infoboxes can also contain images, if that is desired:

Here is an image of a cat that you should pay attention to.

Tables

Keep information organized and make documenting data easier by adding a table to your page.

Regular Table

Header left
Header center
Header right

Info left 1

Info center 1

Info right 1

Info left 2

Info center 2

Info right 2

Relevant Column Types

Column Alignment

Left aligned header
Center aligned header
Right aligned header

Info left 1

Info center 1

Info right 1

Info left 2

Info center 2

Info right 2

Cards

Cards can be used to display information in neat blocks. GitBook card groups are based on the <table> tag in HTML.

Card Group 1

Cover

A card with a cat image. Here you can write more info about this if needed.

Card Group 2

Cover

Here is a separate LARGE card group

that can have text

on multiple lines

Expandable Sections

Expandable sections can be used to keep pages shorter, hide longer content, or create FAQs

Open me

Hello!

Here you can type some information such as

  • A list

    • of things

    • and stuff

A cool image with text on the other side of the image continuing underneath the image if nothing is done to format it.

Small inline image of a cat.

An inline link to the page: Scripting Basics, or something

Tabs

Tabs can be used to display large blocks of related information without creating a long, hard-to-navigate page.

Here are some things only visible in the first tab.

Embeds

Embeds are a useful tool to show external content directly in the page.

Nav Mesh

Discord invite

YouTube Video

Wake up, it's 2007!

Google Drive Spreadsheet

A spreadsheet showing various Forge data collected by TSG members

In the case of embeds that don't link to the source page, be sure to include the link to them afterwards, if it's beneficial for the reader.


Contributors

Okom

Last updated