Article Formatting
The following article will give you guidance on writing articles in the Grooper Wiki.
Creating a new article
- Using the search bar, type the name of the article you wish to create.
- If the article does not exist, you will see a message reading "Create the page "Article Name" on this wiki!" above the search results.
- "Article Name" (whatever you originally searched for) will be a red link. Click the link.
- This will take you to the page editor. Use the "Create source" or "Create" links to create your article.
- To use the markup editor, use the "Create source" link.
- The "Preview" button in the top right corner will give you a split-screen preview of the rendered markup. This preview will update as you edit the page's markup.
- The "Show Preview" button at the bottom of the editor will display a full-page preview at the top of the editor. This is not a live preview. You will need to press the button every time you want to preview changes.
- For more information on Mediawiki's markup formatting refer to the #Text Formatting - Markup Syntax section of this article, or refer to Mediawiki's Help Documentation.
- To use the visual editor, use the "Create" link. This is a WYSIWYG style page editor.
- To use the markup editor, use the "Create source" link.
- Press the "Save Page" button at the bottom of the editor to save the page.
- If you need to edit your page further, use one of the two edit buttons at the top of the article.
- "Edit source" will take you to the markup editor.
- "Edit" will take you to the visual editor.
Text formatting - Markup syntax
Your article's text can be formatting using MediaWiki's markup. This is a syntax consisting of special characters, like asterisks, apostrophes and equals signs to do special things. For example, you can place a word in italics by placing a pair of apostrophies on both sides of the word, like ''this''.
Character formatting
This is also referred to as "inline" formatting.
| Format | You Type | You Get |
| Italics | ''This is italic text'' |
This is italic text |
| Bold Text | '''This is bold text''' |
This is bold text |
| Bold and Italics | '''''This is bold and italic text''''' |
This is bold and italic text |
| Escape wiki markup | <nowiki>Don't use '''markup''' syntax</nowiki> |
Don't use '''markup''' syntax |
Sections
Section headers are useful to break up sections of information in your article. Sections and subsections are called out by pairs of equals signs on both sides of the sections name.
| You Type | You Get |
== Section Level 2 == === Section Level 3 === ==== Section Level 4 ==== ===== Section Level 5 ===== ====== Section Level 6 ====== |
Section Level 2 Section Level 3 Section Level 4 Section Level 5 Section Level 6 |
Further guidance
DO NOT use the "Level 1" section by typing a single equals sign on either side of the section name.
- For example:
= Level 1 =- Don't do this! This is bad.
Level 1 is reserved for the page level for the article you are editing. Begin all subsections at Level 2
- For example:
== Level 2 ==- Do this. This is good.
Do not type text on the same line of the section name. It will break the section.
| You Type | You Get |
== Section Name == Section info |
== Section Name == Section info |
== Section Name == Section info |
Section Level 2 Section info |
Bullets and indents
Bulleted lists can be created using the asterisk *.
| You Type | You Get |
Normal line of text. * First bullet * Second bullet * Third bullet ** First sub-bullet ** Second sub-bullet * Fourth bullet ** First sub-bullet *** First sub-sub bullet |
Normal line of text.
|
Numbered bulleted lists can be created using the pound sign #.
| You Type | You Get |
Normal line of text. # First bullet # Second bullet # Third bullet ## First sub-bullet ## Second sub-bullet # Fourth bullet ## First sub-bullet ### First sub-sub bullet |
Normal line of text.
|
Lines can be indented using the colon character :
| You Type | You Get |
Normal line of text. : First indented line : Second indented line : Third indented line :: First twice indented line :: Second twice indented line : Fourth indented line :: First twice indented line ::: First thrice indented line |
Normal line of text.
|
Bullets and indents can be mixed as well.
| You Type | You Get |
Normal line of text. # First numbered line # Second numbered line # Third numbered line #* Bullet under third numbered line #: Indent under third numbered line # Fourth numbered line ## Numbered bullet under fourth numbered line ##* First bullet under numbered bullet under the fourth numbered line |
Normal line of text.
|
Notice the leftmost character of each line is always a pound sign #. If you break this pattern, you will start a new sequence of numbers.
| You Type | You Get |
Normal line of text. # First numbered line # Second numbered line # Third numbered line #* Bullet under third numbered line * NEW SINGLE BULLET # New numbered sequence line. ## Numbered bullet under new numbered line ##* First bullet under numbered bullet under the new numbered line |
Normal line of text.
|
HTML tags
Some HTML tags are allowed in MediaWiki.
| Format | You Type | You Get |
| Fixed Width Text |
Fixed width text is useful for calling out regular expressions, such as <code>[^\r\n\t\f]+</code>. |
Fixed width text is useful for calling out regular expressions, such as [^\r\n\t\f]+.
|
| Underlines | <u>This text is underlined.</u> |
This text is underlined. |
| Strike-through | I want to <s>strike-through</s> a word. |
I want to |
| Blockquotes | Text before <blockquote>Blockquote</blockquote> Text after |
Text before
Text after |
Adding images
There are three parts to inserting images into an article.
- Naming the image file using our naming convention.
- Uploading the image.
- Using markup syntax to insert the image into an article.
Image naming convention
As we make more and more articles, we need a consistent way to name images that makes them easy to track down.
This naming convention must meet the following criteria:
- The Grooper version must be in the filename.
- The name of the article must be in the file name.
- The name needs to be short enough that the length of the path and filename do not exceed 256 characters.
- This is an issue for BOTH where these images are stored in the Project Apollo SharePoint/OneDrive AND where these images are stored on the wiki server.
- The name needs to include some mechanism to navigate the section hierarchy of the article.
With these criteria in mind, our current naming convention is as follows:
Ver# ArticleName Heading# Subheading# Subsubheading# ShortName ##.png
Imagine the following article with the following sections:
- 2023:Labeling Behavior
- About
- How To
- Use Label Sets for Table Extraction
- Label Sets and Tabular Layout
- Label Sets and Row Match
- Use Label Sets for Table Extraction
The best file name for the fourth screenshot in the "Label Sets and Tabular Layout" section would be:
2023 LabelingBehavior 02 01 01 TabularLayout 04.png
Uploading images
- In the upper right of any page's title, click the "Tools" dropdown.
- Click the "Upload" link.
- On the following page, press the "Choose File" button and choose the image you wish to upload from the file browser.
- Press the "Upload File" button at the bottom of the page to upload the image.
Adding the image to an article
The basic syntax for adding an image once it is uploaded is [[file:filename.extension]]
| You Type | You Get |
[[file:doge.jpg]] |
|
Options
There are several options you can add to further format the image. Options are called out within the square brackets after the filename and extension, separated by a vertical bar character |. A single image can be modified using multiple options, each separated by a vertical bar. The syntax is as follows:
[[file:filename.extension|Option1|Option2|Option3]]
Format options
| Format | You Type | You Get |
| The Border option adds a thin grey border to the image. |
text text text [[file:Goodboy.jpg|border]] text text text |
text text text
|
| The Frameless option creates a frameless thumbnail of the image. |
text text text [[file:Goodboy.jpg|frameless]] text text text |
text text text
|
| Here, two format options are used Frameless and Border. Note the Frameless and Border options are rendered inline with the text. Adding a blank line before and after the image will put it on a new line. |
text text text [[file:Goodboy.jpg|frameless|border]] text text text |
text text text
text text text |
| The Frame option adds a frame around the image. A caption can be added to the bottom of the frame as well. Frames are rendered as a right justified floating (rather than inline) block. |
text text text [[file:Goodboy.jpg|frame|Insert caption here]] text text text |
text text text  text text text |
| The Thumb option creates a framed thumbnail of the image. Captions can also be added to thumbed images, which are also rendered as a right floating block. |
text text text [[file:Goodboy.jpg|thumb|Who's a good boy?]] text text text |
text text text text text text |
Size options
Images can be reduced in size or enlarged, with some caveats.
- The Frame option may not be reduced or enlarged. It will ignore all size specifications
- The Thumb and Frameless options can be reduced, but not enlarged more than the original size.
Images can be resized using the following options (Original file size is 800 x 400 pixels).
| Format | You Type | You Get |
| Width adjustment in pixels. | [[file:Goodboy.jpg|border|250px]] |
|
| Height adjustment in pixels | [[file:Goodboy.jpg|border|x250px]] |
|
| Width and height adjustment in pixels. Note, this fits the image into box of the specified dimensions, but does not stretch or skew the image. | [[file:Goodboy.jpg|border|250x250px|]] |
|
Links
Internal Links
Links to articles within the wiki are called out with a double set of square brackets.
| Links | You Type | You Get |
| Link to the Example Article page. | [[Example Article]] |
Example Article |
| Link to an article, but display different text. | [[Example Article|This is an example]] |
This is an example |
| Characters after the brackets will be added to the hyperlink. | [[Example Article]]s |
Example Articles |
Avoid characters after brackets being added using the <nowiki /> tag |
[[Example Article]]<nowiki />s |
Example Articles |
| Link to a section in this article. | [[#Links]] |
#Links |
| Link to a section in another article. | [[Example Article#About]] |
Example Article#About |
| Using the pipe to change the links name is especially helpful for section linking. | [[Example Article#About|About]] |
About |
External Links
Links outside of this wiki can be "bare", or linked with no formatting. Or, they can be called out with a set of single square brackets to change the displayed text or show as a numbered annotation.
| Links | You Type | You Get |
| Bare link | https://www.grooper.com |
https://www.grooper.com |
Nickname link
|
[https://www.grooper.com Grooper] |
Grooper |
| Annotation link | [https://www.grooper.com] |
[1] |
PLEASE NOTE: We do not use annotation links on the Grooper Wiki. Use bare links or nickname links only.
Tables - Basic formatting
Table formatting can be confusing. But, tables can be powerful additions to your articles. This is a very quick introduction.
| Markup Character | Use |
{| |
Table start - Always required at the begining of the table |
|- |
Row start - Required to start a new row except for the first row. Wiki syntax always assumes the first row. |
| |
New cell - Use a single "|" for the first cell. Use a double "||" for each new cell or another single "|" if starting the cell on a new line (more on this later). |
|} |
Table end - Always required at the end of the table. |
If you want to create a table with three columns and three rows, the table would look as follows
{|
|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
|-
|Row 3 - Cell 1||Row 3 - Cell 2||Row 3 - Cell 3
|}
This would render the following table
| 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 |
| Row 3 - Cell 1 | Row 3 - Cell 2 | Row 3 - Cell 3 |
You can also render the same table placing each cell on its own line in the editor. This is often necessary for tables with longer or more complicated text in a single cell. Note, only a single pipe is used to call out a new cell in this case.
{|
|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
|-
|Row 3 - Cell 1
|Row 3 - Cell 2
|Row 3 - Cell 3
|}
And the same exact table is created, seen below.
| 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 |
| Row 3 - Cell 1 | Row 3 - Cell 2 | Row 3 - Cell 3 |
A great deal of styling and formatting can be done to tables. Refer to the MediaWiki's help page on tables here for more information.
Table example: "How to" with images
|
⚠ |
Best Practice Announcement 2024-01-04 This style of "how to" layout is not used in current articles.
|
Use the "how-to-table" CSS class to style the two column tables we use in the "How To" sections of our articles. Declare the table class after the {| at the beginning of the table.
{|class="how-to-table"
|
row 1 column 1
|
row 1 column 2
|-
|
row 2 column 1
|
row 2 column 2
|}
This is a sample from the setup instructions taken from the Tabular Layout article.
|
|
|
The List Match extractor is well suited for our purposes here. Ultimately, we will enter a list of various ways a "Quantity" column can be labeled.
You would then continue adding variations to the list until all variations of the "Quantity" column's header labels are extracted for every variation of the table.
|
|
Table example: Property details
This is generally unused on more current wiki articles, but gives you a decent example of table styling.
{|cellpadding=10 cellspacing=5 style="margin:auto"
|-style="background-color:#36B0A7; color:white !important;"
|style="width:17%"|'''Property'''
|style="width:17%"|'''Default Value'''
|'''Information'''
|-style="background-color:#36B0A7; color:white !important;"
|colspan=3|General Properties
|-style="background-color:#ddf5f5
|Property Name||Default Val||Info
|}
| Property | Default Value | Information |
| General Properties | ||
| Property Name | Default Val | Info |
Tabbed containers
|
⚠ |
Best Practice Announcement 2024-01-04 Tabbed containers are no longer used in our "How To" sections.
|
Tabbed containers can be very helpful for step by step "how to" instructions. Below is the markup for a simple tabbed container.
<tabs> <tab name="Step 1"> Text for the first tab. </tab> <tab name="Step 2"> Text for the second tab. </tab> </tabs>
It produces the following result.
Text for the first tab.
Text for the second tab.
Each container must start with the <tabs> tag and end with the </tabs>
Each tab must start with the <tab> tag and end with the </tab> tag.
Text inside each tab is formatted just as you would a full page.
Tabs may be named using the name modifier, using the following syntax <tab name="Tab Name">
Single tab containers
You may also find single tab containers useful. Instead of multiple clickable tabs, you will render a single container, which you can collapse by clicking the tab heading. The heading will read "Hide contents" unless otherwise styled.
<tab> Tab text goes here </tab>
Tab text goes here
You can also render the container collapsed, enabling the user to expand the text by clicking on the container. This is done with the "collapsed" tag.
<tab collapsed name="Click Me"> You clicked me! </tab>
You clicked me!
Information boxes
Previous/Other versions
|
Use the Place |
|
FYI boxes
{|class="fyi-box"
|-
|
'''FYI'''
|
Did you know something? I'm explaining that to you here.
|}
|
|
Caution/Attention boxes
{|class="attn-box"
|
⚠
|
Be aware! This is something you should watch out for.
|}
|
|
Download box
{|class="download-box"
|
[[File:Asset 22@4x.png]]
|
You may download the ZIP(s) below and upload it into your own Grooper environment (version 2023). The first contains one or more '''Batches''' of sample documents. The second contains one or more '''Projects''' with resources used in examples throughout this article.
* [[Media:2023_Wiki_Article-Name_Batches.zip]]
* [[Media:2023_Wiki_Article-Name_Projects.zip]]
|}
|
|
Work-In-Progress box
{|class="wip-box"
|
'''WIP'''
|
This article is a work-in-progress or created as a placeholder for testing purposes. This article is subject to change and/or expansion. It may be incomplete, inaccurate, or stop abruptly.
This tag will be removed upon draft completion.
|}
|
|
Ultra Important box
{|class="important-box"
|
'''!!'''
|
It's purple and there's two exclamation marks. Must be important.
|}
|
|
Bullet styles
These are custom CSS classes that style bullets.
|
Bullet type |
Markup |
Example |
|
FYI bullet |
*<li class="fyi-bullet"> Here's something else you might want to know. |
|
|
Attention bullet |
*<li class="attn-bullet"> '''''BE AWARE:''''' Here's something important you need to know. |
|
Setting up Visual Studio Code
Download and install Visual Studio Code.
Download and Configure the Wikitext Extension
- In the "Extensions" menu install the "Wikitext" extension by Rowe Wilson Frederisk Holme.
- This can also be located at the following link.
- Click the gear icon for the installed extension and select "Extension Settings" from the menu.
- Configure the extension settings to match the highlighted properties from the image below.
- API Path: /api.php
- Article Path: /index.php?title=
- Enable JavaScript: enabled
- Get CSS: enabled
- Host: wiki.grooper.com
- Password: unser defined
- User Name: user defined
Leveraging the Wikitext Extension
- Use the hotkey "Ctrl+Shift+p" and type "wikitext" in the menu.
- Start by using the "Loging with your account" command". This will use the username and password you configured in the Wikitext extension settings. When complete, a prompt will appear in the bottom right of the screen notifying you of the token created. Keep in mind this token is temporary and will eventually expire.
- You can click the gear icon in the menu to set custom hotkeys for any of these commands, if you so choose.
Familiarize yourself with the list of commands available.
- Add a web citation - Inserts citation syntax into your markdown
- Close this editor without saving - Will close the editor tab you have open without saving changes, although it will still prompt you
- Get Preview - Notice the hotkey "Ctrl+Shift+V". This will open a separate view window and, if logged in properly, you will see a rendered preview of you markdown as it would appear on the Grooper Wiki
- Login with your account - This will attempt to use the loging credentials from the Wikitext extension settings to create a login token for VS Code
- Logout, if you are already logged in - This will remove a login token, essentially logging you out of the Grooper Wiki
- Post your edit to the website - This will bring up a prompt asking for the exact name of a page you wish to upload your current active edits to. Type a name of a page and press "Enter" (ESC to cancel). You will also be asked to give a description for the edits you have made. Once complete, the markdown you are currently editing will be uploaded to the named page.
- Pull page to edit - This will bring up a prompt asking for the exact name of a page you wish to make edits to. Type a name of a page and and press "Enter" (ESC to cancel). Once complete, the markdown of the named page will be opend in a new editor tab of VS Code.
- View the page - This will bring up a prompt asking for the exact name of a page you wish to view. Type a name of a page and press "Enter" (ESC to cancel). Once complete a new viewer tab will open, attempting to show you a rendering of the named page.