Reference to Format Topics on the PurpleAir Forum

[PurpleAir]

This reference will help you understand how to use built-in formatting techniques to improve the look and functionality of your topics published on the PurpleAir Community Forums.

---

Links

Links can be quickly added into a post to direct users from your post to other URLs. Click or tap on the Hyperlink button in the toolbar or use the keyboard shortcut to access the Insert Hyperlink menu (on Windows computers use the hotkey Ctrl+K, on Apple computers use the hotkey Cmd+K). Basic formatting for a link will look like this: [link text](link URL).

Script example:

[Link Example](https://community.purpleair.com/t/guide-to-format-topics-on-the-purpleair-forums/191#links-1)

Example result:

Link Example

---

Images

Images can be quickly added into a post. Click or tap on the Upload button in the toolbar, select the file you wish to upload, and click or tap “Open”. Afterwards, the selected image will appear visible within your post.

Script example:


Example result:

---

Format Text

Font Style

You are able to format text within your post. Boldface and Italics font can be quickly added into a post. Click or tap on the B or I button, respectively, in the toolbar or use the keyboard shortcut to create Boldface or Italics font (on Windows computers use the hotkey Ctrl+B or Ctrl+I, on Apple computers use the hotkey Cmd+B or Cmd+I). The following examples will demonstrate how to make text appear in boldface, italics, boldface and italics, struck-through, and underlined.

Script example:

**Boldface** or __Boldface__ or [b]Boldface[/b]
*Italics* or _Italics_ or [i]Italics[/i]
***Boldface & Italics*** or ___Boldface & Italics___ or [i][b]Boldface & Italics[/b][/i]
~~Strike-through~~
[u]Underlined[/u]
`Monospace`

Example result:

Boldface or Boldface or Boldface
Italics or Italics or Italics
Boldface & Italics or Boldface & Italics or Boldface & Italics
Strike-through
Underlined
Monospace

Font Size

The size of text is able to be modified within your post. This can be done by using simple HTML tags.

Script example:

<small>Small Text</small>
Normal Text
<big>Big Text</big>

Example result:

Small Text
Normal Text
Big Text

---

Headings

Placing one to six number signs (#) and a space before a line of text will create a heading. Headings will become more nested as the amount of number signs (#) used increases.

Script example:

# H1
## H2
### H3
#### H4
##### H5
###### H6

Example result:

H1

H2

H3

H4

H5

H6

---

Horizontal Rule

A Horizontal Rule can be used to separate text within your post. It can be added by either writing three consecutive asterisks (*), three consecutive hyphens (-), or the HTML tag <hr>. Either method must be utilized alone within a single line of script.

Script example:

---
or
***
or
<hr>

Example result:

---

or

---

or

---

---

Lists

Lists can be used to organize items inside of a post. Indentation is taken into account when creating a list. For Bulleted List, every two spaces will create a new nested item. For Numbered List, every three spaces will create a new nested item.

Bulleted List

Bulleted Lists are used when the items they include do not need to be displayed in any specific order. Bulleted Lists can be quickly added into a post. Click or tap on the Bulleted List button in the toolbar or use the keyboard shortcut (on Windows computers use the hotkey Ctrl+Shift+8, on Apple computers use the hotkey Cmd+Shift+8).

Script example:

- List Item

- Nested List Item

- Nested List Item

or

* List Item

* Nested List Item

* Nested List Item

Example result:

• List Item
  • Nested List Item
    • Nested List Item

or

• List Item
  • Nested List Item
    • Nested List Item

Numbered Lists

Numbered Lists are used when the items within a list need to be displayed in a specific order. The list items will be numbered. Numbered Lists can be quickly added into a post. Click or tap on the Numbered List button in the toolbar or use the keyboard shortcut (on Windows computers use the hotkey Ctrl+Shift+7, on Apple computers use the hotkey Cmd+Shift+7).

Script example:

1. List Item

1. Nested List Item

2. Nested List Item

3. Nested List Item

2. List Item

3. List Item

Example result:

1. List Item
   1. Nested List Item
   2. Nested List Item
   3. Nested List Item
2. List Item
3. List Item

---

Code Block

Code blocks can be used to show code in a more user-friendly and easy-to-read way. Code blocks can be quickly added into a post. Click or tap on the Preformatted text button in the toolbar or use the keyboard shortcut (on Windows computers use the hotkey Ctrl+E, on Apple computers use the hotkey Cmd+E). Alternatively, surround the text that you would like to be contained in a code block with groups of three backticks (`).

You can also specify the language of the script inside of a code block by writing the name of the language to the right of the first group of backticks.

Script example:

``` javascript

while(true) {

do.something();

console.log("Something has been done!");

}

```

Example result:

while(true) {
    do.something();
    console.log("Something has been done!");
}

---

Escape Characters

Escape characters are used to show other characters that normally would be hidden within the text. Characters could be hidden if they are used to perform a function, such as how surrounding asterisks are used to make text in italics. To use an escape character, place a backslash (\) immediately before the character that you would like to be revealed.

Script example:

\\
*Italics*
\*Not Italics\*

Example result:

\
Italics
*Not Italics*

---

Tables

Tables can be created to visually organize data within your posts. This is done by creating columns and rows, where columns are separated by a pipe symbol (|) and rows are denoted by each subsequent line of script. The first line of script (the table header) must be followed by a row of columns containing a single hyphen (-).

Script example:

|Col 1|Col 2|Col 3|
|-|-|-|
|A 1|A 2|A 3|
|B 1|B 2|B 3|
|C 1|C 2|C 3|

Example Result:

Col 1	Col 2	Col 3
A 1	A 2	A 3
B 1	B 2	B 3
C 1	C 2	C 3

---

Blockquotes

Blockquotes can be quickly added into a post to separate groups of text into easily noticeable blocks that are commonly used to display quotes, notes, and examples. Click or tap on the Blockquotes button in the toolbar or use the keyboard shortcut (on Windows computers use the hotkey Ctrl+Shift+9, on Apple computers use the hotkey Cmd+Shift+9).

Script example:

> Text to include in a blockquote.
A second line of text to include in a blockquote.

A break in the blockquote

>> Text to include in a nested blockquote.

Example result:

Text to include in a blockquote.
A second line of text to include in a blockquote.

A break in the blockquote.

Text to include in a nested blockquote.

---

Emojis

Emojis can be quickly added in-line with the text of your post. Click or tap on the Emoji button in the toolbar. Alternatively, surround the name of an emoji within colon symbols (:).

PurpleAir has Emojis specific to these community forums; checkbox , community , community_left , community_right , configuration_menu , hotspot , lightbulb , message , red_marker , wifi .

Script example:

:smiley:

Example result:

---

Hide Details

A Hide Details interactive tool can be quickly added into a post. Click or tap on the gear button in the toolbar, and click or tap “Hide Details”. Afterwards, the text will remain hidden within your post until you click or tap it.

Script example:

[details=“Summary”]
This text will be hidden
[/details]

Example result:

Summary

This text will be hidden

---

Blur Spoiler

A Blur Spoiler interactive tool can be quickly added into a post. Click or tap on the gear button in the toolbar, and click or tap “Blur Spoiler”. Afterwards, the text will remain blurred within your post until you click or tap it.

Script example:

[spoiler]This text will be blurred[/spoiler]

Example result:

This text will be blurred

---

Poll

A Poll interactive tool can be quickly added into a post. Click or tap on the gear button in the toolbar, and click or tap “Build Poll”. Afterwards, follow the resulting instructions.

Script example:

[poll type=regular results=always chartType=bar]
* Option 1
* Option 2
* Option 3
[/poll]

Example result:

• Option 1
• Option 2
• Option 3

---

Table of Contents

A table of contents can be quickly added to your post to make it more easily navigable. Click or tap on the gear button in the toolbar, and click or tap “Insert table of contents”. The following script will be placed at the location of your text cursor: <div data-theme-toc="true"></div>

Headers are needed to create a table of contents. The hierarchy of the table of contents is portrayed by its indentation and order. Higher ordered headers will appear further indented within lower ordered headers above them. An example of this can be found on this post by exploring the table of contents to the right.

---

Alignment

Simple HTML tags can be used to align elements within your post. The following example will demonstrate how to align elements to the left, center, and right of your post.

Script example:

<div align=‘left’>Left Aligned</div>
<div align=‘center’>Center Aligned</div>
<div align=‘right’>Right Aligned</div>

Example result:

Left Aligned

Center Aligned

Right Aligned

---

Float

A custom CSS class specific to these forums can be used to float elements around the text of your post. Elements can float to the left or right.

Script example:

<div data-theme-float-left>


<div>

The image will float around the text.

Example result:

The image will float around the text.

---

LaTeX Math

The \LaTeX{} Project has published official Core Documentation that will prove useful. The following is a common example:

\begin{align} E_0 &= mc^2 \\ E &= \frac{mc^2}{\sqrt{1-\frac{v^2}{c^2}}} \end{align}

---

Learn More

Air Quality Index
PurpleAir Map Guide
Which AQI Data Layer to Choose