Making Beautiful Forum Posts
The simplest way to make beautiful forum posts is using simple markdown tags. The forum do also support a subset of bbcode tags. Modern markup only describes the format of the document. It doesn't describe how it will look. The look itself is based on what is displaying it. This is why the old bbcode [size] and [color] had been abandoned.
Some one the markup described here are also available through buttons in the editor.
Also remember to be generous with blank lines. A header should not follow with a paragraph on the next line. This makes it much easier to navigate in the document when editing and makes you do less mistakes. You can also use the preview button in the editor.
When editing large posts it can be nice to use use an external markdown editor like Stack Edit (in browser) or Atom (application).
Emojis
There are no built in emoji keyboard on the forum. This is simply because it was made with tablets and phones in mind. They already have emoji keyboards. Each operating system are according to the standard required to provide an emoji keyboard.
- On Windows 10 an emoji keyboard should pop up by pressing
Win+. - OS X :
Command+Control+Spacebar - Linux: Widely supported with many options
The most commonly used emojis:
😂 Face With Tears Of Joy
😍 Smiling Face With Heart-Eyes
❤️ Red heart
😀 Grinning Face
😎 Smiling Face With Sunglasses
🎉 Party Popper
😊 Smiling Face With Smiling Eyes
👍 Thumbs Up
💩 Pile Of Poo
Paragraphs
Paragraphs are naturally created between empty lines.
Markup
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris id quam in justo cursus iaculis. Vivamus ac nisl sit amet metus hendrerit euismod vel in neque. Fusce mollis mi venenatis urna eleifend, eu viverra ex efficitur. Suspendisse tristique eros turpis, at interdum purus mollis ut. Suspendisse congue ligula vitae tincidunt blandit. Integer pretium ultrices tellus et dignissim. Aenean aliquam sed tellus ut posuere.
Quisque nisi magna, venenatis non justo et, feugiat ultrices nulla. In ullamcorper, mi vel pellentesque imperdiet, ex ante tincidunt ipsum, in elementum est neque iaculis velit. Mauris imperdiet lectus nisl, a finibus neque elementum et. Donec dapibus, nunc in interdum dictum, ex eros auctor metus, sed porttitor risus urna vitae velit. Mauris nec pulvinar lectus.
Result
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris id quam in justo cursus iaculis. Vivamus ac nisl sit amet metus hendrerit euismod vel in neque. Fusce mollis mi venenatis urna eleifend, eu viverra ex efficitur. Suspendisse tristique eros turpis, at interdum purus mollis ut. Suspendisse congue ligula vitae tincidunt blandit. Integer pretium ultrices tellus et dignissim. Aenean aliquam sed tellus ut posuere.
Quisque nisi magna, venenatis non justo et, feugiat ultrices nulla. In ullamcorper, mi vel pellentesque imperdiet, ex ante tincidunt ipsum, in elementum est neque iaculis velit. Mauris imperdiet lectus nisl, a finibus neque elementum et. Donec dapibus, nunc in interdum dictum, ex eros auctor metus, sed porttitor risus urna vitae velit. Mauris nec pulvinar lectus.
Block Quotes
Block quotes are useful when you want to highlight or quote text. This is done by adding > to the beginning one or multiple consecutive lines.
Markup
> “You've heard shards of our voice in the phantom-radio code of a numbers station in the roar of a crowd - in the screams of your clock - in the scrape of a chalkboard - in the snow static of a TV - in the chainsaw-decibel mating of cicadas - in the urban mythos that spreads amongst children like contagion - in the silence between lies.
>
> White noise becomes a cadence. Words develop self-awareness. Viral. Evolving. Living poetry. Sentient language.”
>
>― Joshua Alan Doetsch
Result
“You've heard shards of our voice in the phantom-radio code of a numbers station in the roar of a crowd - in the screams of your clock - in the scrape of a chalkboard - in the snow static of a TV - in the chainsaw-decibel mating of cicadas - in the urban mythos that spreads amongst children like contagion - in the silence between lies.
White noise becomes a cadence. Words develop self-awareness. Viral. Evolving. Living poetry. Sentient language.”
― Joshua Alan Doetsch
Bold, Strikethrough and Italic Text
Markup
*I'm slightly on the side*
**Look at me!**
~~Shave my cat~~
Result
I'm slightly on the side
Look at me!
Shave my cat
Headers
Headers are created when starting a line with #. This sign can be repeated up to 6 times to create smaller headers.
Markup
# Gigantic
## Huge
### Large
#### Medium
##### Small
###### Tiny
Result
Gigantic
Huge
Large
Medium
Small
Tiny
Lists
It's fairly easy to make lists. We have ordered and unordered lists. When nesting lists indent the line by 4 spaces per level.
Markup
**Unordered List**
* One
* Two
* Thee
**Unordered List**
1. One
2. Two
3. Three
**Nested List**
* One
* Red
* Blue
* Two
* Apple
* Banana
* Three
* Bread
* Milk
Result
Unordered List
- One
- Two
- Thee
Ordered List
- One
- Two
- Three
Nested List
- One
- Red
- Blue
- Two
- Apple
- Banana
- Three
- Bread
- Milk
Horizontal Ruler
We can also add horizontal separation using a horizontal ruler. This is simpy just three dashes. We use these to separate examples in this post.
Markup
---
Code / Mono space
Some words can be useful to display as code or mono space either in the middle of a sentence or an entire paragraph. This can for example be html snippets for scripts. The backtick character is used for this. By enclosing an entire paragraph with ``` in the line above and below it we create a code block. A multi line code block can also be be described using ~~~~.
Markup
TSW are usually found in `C:\path\to\tsw\game\`
```
<html>
<body>
<h1>This is my test page</h1>
<p>Hello there!</p>
</body>
</html>
```
~~~~
10 PRINT "HELLO WORLD
20 GOTO 10
~~~~
Result
TSW are usually found in C:\path\to\tsw\game\
<html>
<body>
<h1>This is my test page</h1>
<p>Hello there!</p>
</body>
</html>
10 PRINT "HELLO WORLD
20 GOTO 10
Links
You can use the link button in the editor to quickly generate a link. Optionally you can write them manually.
Markup
No clickable link: https://omnedatumoptimum.red/
Clickable link: <https://omnedatumoptimum.red/>
Clickable link with title: [ODO](https://omnedatumoptimum.red/)
Result
No clickable link: https://omnedatumoptimum.red/
Clickable link: omnedatumoptimum.red/
Clickable link with title: ODO
Displaying Images
If you want to upload your own local images, just press the upload symbol in the editor. External images are also easy to display with plain markup. Optionally you can use the image button in the editor.
Markup
!(https://media.giphy.com/media/l41lO0QvEQ8kjaIko/giphy.gif)
Result
Embedded Video
Embedding a youtube video is just pasting in the link. It has to be all the way to the right for this to work and the line above and under should be empty.
Markup
Embedded Video Working
https://www.youtube.com/watch?v=dQw4w9WgXcQ
Embedded Video NOT Working
https://www.youtube.com/watch?v=dQw4w9WgXcQ
Result
Embedded Video Working
www.youtube.com/watch?v=dQw4w9WgXcQ
Embedded Video NOT Working
www.youtube.com/watch?v=dQw4w9WgXcQ
