¶ Headings
Headings are used to separate and highlight the different sections on a page and also affect the left-hand Table of Contents.
¶ Heading 1
# Heading 1
¶ Heading 2
## Heading 2
¶ Heading 3
### Heading 3
¶ Basic Formatting
¶ Bold
Some Bold Text
Some **Bold** Text
¶ Italics
Some Italicised Text
Some *Italicised* Text
¶ Horizontal Rule
Text above the horizontal rule.
Text below the horizontal rule.
Text above the horizonal rule.
---
Text below the horizontal rule.
¶ Links
Here is an internal link to the Documentation Home Page. This text is not part of the link
[Here is an internal link to the Documentation Home Page.](/home) This text is not part of the link
Here is an external link to the WJPS Website. This text is not part of the link.
[Here is an external link to the WJPS Website.](https://www.wjps.co.uk) This text is not part of the link
Link to Anchor. This text is not part of the link. N.B. The anchor must be all lower case and use - instead of spaces.
[Link to Anchor.](#basic-formatting) This text is not part of the link. N.B. The anchor must be all lower case and use - instead of spaces.
External links will be automatically marked with an icon to indicate to the User that they will leave the site.
¶ Images
¶ Image examples
For the image path, always use the relative file path from the root directory.
Syntax is:
Images can be resized along either vertical/horizontal axis (whichever side is left blank will scale proportionally:
Explicitly declare both sides:
¶ Decoration
Extra decoration such as shadows and rounded corners can be added to images for additional emphasis (works best on screenshots with no white-space):
{.decor-shadow}{.radius-4}
¶ Lists
Below is an ordered list:
- First Item
- Second Item
- Third Item
1. First Item
2. Second Item
3. Third Item
Below is an unordered list:
- First Item
- Second Item
- Third Item
- First Item
- Second Item
- Third Item
¶ Documentation Styling Extras
¶ Keyboard Keys
When referring to Keyboard Shortcuts, use the following syntax:
To copy and paste, simple press CTRL + C
To copy and paste, simple press <kbd>CTRL</kbd> + <kbd>C</kbd>
¶ Alerts & Hints
When giving extra information to the User about a particular step or feature, the following panels can be used to draw their attention:
I am an Information panel, use me to notify the user of any extra useful, but non-critical information.
> I am an **Information** panel, use me to notify the user of any extra useful, but non-critical information.
{.is-info}
I am a Warning panel, use me to alert the user of any important information about a particular step or feature.
> I am a **Warning** panel, use me to alert the user of any important information about a particular step or feature.
{.is-warning}
I am a Danger panel, use me to warn the user of something they shouldn't do, or any negative effects that may occur as a result of the adjacent information.
> I am a **Danger** panel, use me to warn the user of something they shouldn't do, or any negative effects that may occur as a result of the adjacent information.
{.is-danger}
¶ Footnotes
Footnotes can be used to reference minor, inessential information relating to a particular word or concept within your documentation:
Users of MRS can make use of the Identifications Module[1] and Book-In plates using QR Codes[2]
*Users of MRS can make use of the **Identifications Module**[^1] and Book-In plates using **QR Codes**[^2]*
[^1]: Introduced in version 3.0.1
[^2]: Introduced in 3.1.0
¶ Links Lists
Links lists can be used to for linking to related pages of documentation at the end of a particular article.
Sub-titles can also be added to add further information to the link:
- First Link
- Second Link Here is a subtitle for this link
- Third Link Here is a subtitle on a new line
- [First Link](/)
- [Second Link *Here is a subtitle for this link*](/)
- [Third Link](/) *Here is a subtitle on a new line*
{.links-list}
¶ Content Tabs
Content Tabs are ideal for
Content Tabs will end when they encounter another
# Heading 1element.
Any content here will go into the first tab...
Any content here will go into the second tab...
Any content here will go into the third tab...