Post Formatting Guide

If you are seeing this thread, I’m no longer with you. I’m making this thread as a guide for future forum users who may not know how to properly use and format their posts. I know there are a lot of tech savvy people here but I imagine there are many who don’t know how to format their posts using code. Since you can use Markdown, BBCode, \LaTeX and HTML, there is more than one way to format your text and this can get confusing.

Anything you need is most likely in one of the helpful links below but I decided to type everything out because… well, I don’t know why but I’m doing it sooo, :woman_shrugging: yeah. Anyways, this is a wiki so feel free to add your knowledge since I’m tired of typing and have a bunch of reviews to do.

Some text might not output as expected, including ¯_(ツ)/¯ ¯_(ツ) (A solution: ¯\_(ツ)_/¯ ¯\_(ツ)_/¯) - be sure to learn.

Also, be careful of anything that between <TAG_NAME> and </TAG_NAME> (see, Markdown inside HTML section).

Technical details

WaniKani Community is a Discourse forum, using markdown-it as the Markdown parser, although there are several extensions (e.g. BBCode-like, MathJax).


The GUI (Text Box)

TextGUI

  • Speech Bubble: When you reply to a post, clicking this will copy the entire post and add it as a quote to your post.
  • B: Bolds the selected text.
  • I: Italicizes the text.
  • Chain/Link: Adds a link to the entered website.
  • ": Adds a block quote to your post.

Is this important?

  • </>: Allows you to type anything, including code, without changing it to that format. <sup>This is not small :disappointed: </sup>
  • Image: Hopefully you know how to use this.
  • Bullet/Number Lists: ^^ Same.
  • :smile: : ^^ Same.
    Settings:
  • Hide Details: This creates an open/close drop down like >The Gui (Text Box).
  • Insert Date: Insert a time that shows based on each person’s time zone. I never even knew this was a thing.
  • Blur Spoiler: Adds a film to the text that disappears after clicked.

Just because you see this doesn’t mean it’s really here.

  • Build Poll: Shout out to the POLL thread Woot! Woot! Builds a poll based on what you choose. Go crazy.

And that concludes our tutorial for the post GUI. Stay tuned for how to edit and add your own special something somethings. :wink:

Formatting

If you don’t want to use the GUI or just want to keep typing, this is the place for you.

Italic:

  • [i]purple[/i] purple
  • _blue_ blue
  • *red* red
  • Ctrl + I

Bold:

  • [b]broccoli[/b] broccoli
  • __kale__ kale
  • **carrots** carrots
  • Ctrl + B

Strikethrough:

  • [s]potato[/s] potato
  • ~~potato~~ potato

Super/Subscript:

  • <sup> tiny north </sup> tiny north
  • <small> tiny neutral </small> tiny neutral
  • <sub> tiny south </sub> tiny south
  • <big> anti tiny </big> anti tiny

Underscore:

  • [u]Amazeballs[/u] Amazeballs

Highlights:

  • <ins>green</ins> green
  • <del>red</del> red

Bullet Points:

  • * What's your point?
  • - A dash.
  • + Is that 十 Koichi?
  • 1. I'm number one!

Block:

I like eggs.

Pre-formatted:

  • One-eyed, **one-horned**
  • [code]One-eyed, **one-horned**, flyin' purple people eater[/code] - One-eyed, **one-horned**, flyin' purple people eater

Nonetheless, you can format on over pre-formatted - One-eyed, **one-horned**.

Pre-formatted block:

  • <pre>Preformatted _text_ :thinking:</pre> -
    Preformatted text :thinking:

It breaks into a new line by itself, even though in raw in on the same line.

Aardvarks
                                        _Porcupine_

        "A polar bear's head"

Note: These are backticks (the key with the ~) and not a single quote)

```html does not work

Compare

<ruby>some<rp>(</rp><rt>furi</rt>)</rp> kanji<rp>(</rp><rt>gana</rt><rp>)</rp></ruby>

and

<ruby>some<rp>(</rp><rt>furi</rt>)</rp> kanji<rp>(</rp><rt>gana</rt><rp>)</rp></ruby>
```
Aardvarks
                                        _Porcupine_

        "A polar bear's head"
```

Another way to block quote - 4 spaces are needed in the front:

                            More **Porcupine**

        "I love polar bear's head"

Line Break:

  • <br>




    Hello up there!

Spoiler:

  • [spoiler]Not to be spoilt[/spoiler]

Not to be spoilt

Hide Details:

[details="Summary"]
This text will be hidden
[/details]
Summary

This text will be hidden

Internal link:

Trouble 1

Troubleshooting
Troubleshooting
Troubleshooting

id= is already autogenerated by default for # Header.

Doesn’t work inside closed details, though.


Misc (More Markdown)

Furigana: <ruby>some<rp>(</rp><rt>furi</rt>)</rp> kanji<rp>(</rp><rt>gana</rt><rp>)</rp></ruby> some(furi)) kanji(gana)

Disappearing Text: <POOF>
Better Disappearing Text: <!-- POOFIER -->
Emojis: :crabigator: :crabigator:
Keyboard stuff: <kbd>CTRL</kbd> CTRL
Text center alignment: <div align=center>Centered text</div>
Text right alignment: <div align=right>right text</div>
Escape Character: \* * (otherwise it would become a bullet point)
Horizontal Line:

  • ***
  • ---
  • ___

Multiple line title:

These
are
all titles.

HTML entities:

  • &lt; - <
  • &gt; - >
  • &nbsp; -  

Language Specifier::

This is needed to differentiate Japanese Kanji from Chinese counterpart, for some characters.

<span lang="ja-JP">誤解</span> <span lang="zh-CN">誤解</span> - 誤解 誤解

Mentions: @mentions @polv

Spoiler:

    • <span class="spoiler">Not to be spoiled text</span>

Not to be spoiled text

Hide Details:

<details>
<summary>Alternative Details</summary>

A **bold** [spoiler]spoiler[/spoiler].
</details>
Alternative Details

A bold spoiler.

Table:

Option #1 (harder)

These tags are nested within each other. Each table must have the table tags as the first and last items.
The tr is equal to a row in the table. For each row only one set of tags in needed.
td are column cells. These go inside the row tags and there can be as many as you need (within reason).
th are header cells. Use these instead of td if you want.

  • <table></table>
  • <tr></tr>
  • <td></td>
  • <th></th>
<table>
<tr><th> Cats </th><th> vs.</th><th>Dogs</th></tr>
<tr><td>X</td><td>O</td><td>X</td></tr>
<tr><td>O</td><td>O</td><td>-</td></tr>
<tr><td>X</td><td>O</td><td>X</td></tr>
</table>
Cats vs.Dogs
XOX
OO-
XOX
Option #2 (not not easier)
| Kanji | Meaning | Reading |
| - | - | - |
| 1. 一 | Loneliest Number | むし |
| 2. 二 | First Loser | かかす |
| 3. 三 | Without Serif | やま |
| 4. 四 | The Force | ほし |
Kanji Meaning Reading
1. 一 Loneliest Number むし
2. 二 First Loser かかす
3. 三 Without Serif やま
4. 四 The Force ほし
Option #2 with Column Alignment

You can align columns by adding colons to the separator line:

| Left Kanji | Centered Meaning | Right Reading |
| :- | :-: | -: |
| 1. 一 | Loneliest Number | むし |
| 2. 二 | First Loser | かかす |
| 3. 三 | Without Serif | やま |
| 4. 四 | The Force | ほし |
Left Kanji Centered Meaning Right Reading
1. 一 Loneliest Number むし
2. 二 First Loser かかす
3. 三 Without Serif やま
4. 四 The Force ほし

Mathemathics ($\LaTeX$ / MathJax)

I put LaTeX in a separated thread, because it cannot be hidden inside [details].

e^x

e^x
Markdown inside HTML

Standard way to put Markdown inside HTML is, 0ne blank line after the last tag.

More than that being discussed here..

Nonetheless, several tags already support Markdown inside HTML by default.

<span lang="zh-TW">**誤解**</span>
<span class="spoiler">**Another spoiler style** is not broken.</spoiler>

<ruby lang="zh-TW">**誤解**<rt>~~にゃにー~~</rt></ruby>
<small>**誤解**</small>

誤解
Another spoiler style is not broken.

誤解にゃにー
誤解 :lollipop:

Better syntax with UserScripts

There are several UserScripts to enhance this forum, including

Helpful Links
68 Likes

Ooo. I didn’t know about “ins” and “del”. Gonna have to use those.

Also, ctrl-i and ctrl-b work for italics and bold.

And then there’s tables.

And ruby text.

Superscripts and subscripts.

2 Likes

o m g

I literally thought to myself this morning that it would be really useful to make a formatting thread :joy:

Nice :+1:

5 Likes

All my secrets!!!

edit: I wonder if the hidden image trick still works

6 Likes

In fact, now that I’ve thought about this for more than 30 seconds, the reason I thought it would be useful to have such a thread is because I was wondering whether it’s possible to float an image next to some text?

I assume not, but if anyone knows otherwise I’m all ears :ear:

Like this??? ![](upload://oG5f6hd2INaieJ2VaLX2pIpyUHY.jpeg)
3 Likes

Nice guide, but it doesn’t answer the one question I had in the beginning: how to do furigana.

<ruby>some kanji<rt>furigana</rt></ruby>
some kanjifurigana

<ruby>some<rt>furi</rt> kanji<rt>gana</rt></ruby>
somefuri kanjigana

4 Likes

Yesssssss thank you also quality image :+1: :+1: :+1:

3 Likes
東京( とうきょう)

Like this?

<ruby> <rb>東京</rb><rp>(</rp> <rt>とうきょう</rt><rp>)</rp> </ruby>

edit: I just reread the post and you obviously already knew how to do it :woman_facepalming:

5 Likes

I’m intrigued

1 Like

You’ve never heard that song?! Enjoy.

6 Likes

It did not, but I found out another way to do it. 270000483106684928![image|](http://archive.theletter.co.uk/images/lc/ears-joan-garrigosa-alex-torrens.jpg)

2 Likes

Looks like that also works, though it does use more tags.

Thanks
I was just wondering how to quote an entire post

<poof_the_text>

1 Like

That’s why <!-- Better poof → is better; it can handle special characters

1 Like
w00t w00t !!! it works :slight_smile:

<you can use spaces with this method but not any special characters>

1 Like

i feel uncomfortable with space character, underscore is better.
:frowning:

Then try this <!-- this_works_with_underscores →

1 Like