--- description: >- A style guide to reference and copy blocks from when writing an article for the TSG Forge Wiki. --- # Style Guide 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](https://raw.githubusercontent.com/The-Scripters-Guild/ForgeWiki/main/community/contributing-to-tsg-forge-wiki/style-guide.md)

## 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~~ * External link: [This is a link](https://example.org/) * Internal link: [This is another link](../../forge/lighting/) * [x] Colored text * [ ] Background colored text * [x] Both colored ### 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: Key icon

* Numbers: Key icon

* Modifier Keys: Key icon

* Large Keys: Key icon

* Signs:

* Function Keys: Key icon

* Numpad:

* Mouse:

Controller: * Buttons: Key icon

* Triggers and Bumpers: Key icon

* Dpad:

* Left Stick: Key icon

* Right Stick: Key icon

* Both Sticks: Key icon

* 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

#### Medium-Sized Medium – 50% of the image size

#### Small-Sized Small – 25% of the image size

### Multiple Images #### Two Images

#### Three Images

#### Four Images Just two two-image groups on top of each other.

## 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. {% hint style="info" %} **Info**, great for showing general information, or providing tips and tricks. {% endhint %} {% hint style="warning" %} **Warning**, good for showing important information or non-critical warnings. {% endhint %} {% hint style="danger" %} **Danger**, good for highlighting destructive actions or raising attention to critical information. {% endhint %} {% hint style="success" %} **Success**, good for showing positive actions or achievements. {% endhint %} ### Infobox With Images Infoboxes can also contain images, if that is desired: {% hint style="info" %} Here is an image of a cat that you should pay attention to. A cat on its own

{% endhint %} {% hint style="danger" %} Here are two dangerous cats side by side! A cat on the left

{% endhint %} {% hint style="success" %} And here we have three small cats who are the same size as the text: Small cat on the left

{% endhint %} ## 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

Text	Number	Checkbox	Rating	Link
Text 1	123	true	1	Broken link
Text 2	1234	false	2	http://example.org/
Text 3	123456789	true	5	on-gameplay-start.md

### 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 `` tag in HTML. ### Card Group 1


A card with a cat image. Here you can write more info about this if needed.	placeholderCat.jpg
This card will link you to the "Welcome" page on click		..
This card has a cat image and will take you to the "File Screenshots" page on click!	placeholderCat.jpg	file-screenshots.md

### Card Group 2


Here is a separate LARGE card group	that can have text	on multiple lines	placeholderCat.jpg
Click this card	to find out the basics	about Halo Infinite's Forge!		forge-basics-and-ui

## 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](../../scripting/scripting-basics-and-ui/)

## Tabs Tabs can be used to display large blocks of related information without creating a long, hard-to-navigate page. {% tabs %} {% tab title="First Tab" %} Here are some things only visible in the first tab. {% endtab %} {% tab title="Second Tab" %} And here is what's in the second tab... like this cat! ![A cat hidden in the second tab](../../.gitbook/assets/placeholderCat.jpg) {% endtab %} {% tab title="Third Tab" %} Nothing to see here, except this small cat A small cat in the third tab

{% endtab %} {% endtabs %} ## Embeds Embeds are a useful tool to show external content directly in the page. ### External link {% embed url="https://docs.gitbook.com/" %} ### Internal Link {% content-ref url="../../forge/nav-mesh/" %} [nav-mesh](../../forge/nav-mesh/) {% endcontent-ref %} ### Discord invite {% embed url="https://discord.gg/halofuntime" %} ### YouTube Video {% embed url="https://www.youtube.com/watch?v=bSBcYiZJMRE" %} Wake up, it's 2007! {% endembed %} ### Google Drive Spreadsheet {% embed url="https://docs.google.com/spreadsheets/d/1nWTARlv1CZKfNVOramvxRC6u56VvK4GrqpLJZP4IPbQ/" %} A spreadsheet showing various Forge data collected by TSG members {% endembed %} In the case of embeds that don't link to the source page, be sure to [include the link to them](https://docs.google.com/spreadsheets/d/1nWTARlv1CZKfNVOramvxRC6u56VvK4GrqpLJZP4IPbQ/) afterwards, if it's beneficial for the reader. *** #### Contributors Okom