New Anlist users often have questions about how to format text, use links, and so forth. This guide attempts to document just about everything you could ever need to know, so that all of these tips and tricks are explained in one place.
Feel free to suggest changes, or to share/modify this guide as you wish.
PART 1: BASICS
Formatting is based on Markdown, though with a few Anilist-specific quirks such as spoilers or Youtube video embeds. For this reason, I've referred to it as "Anilist-Flavored" Markdown in this guide, like the GitHub Flavored Markdown used by GitHub, or Reddit Flavored Markdown at Reddit.
newlines
Unlike the Original Markdown, newlines "just work" without any messing around. For example, this text:
Hello
world
...will appear as two separate lines, like you'd expect, whereas it "ought to" appear as Hello world (on a single line) according to "original" Markdown.
italic text
Put one * or _ character either side of the text:
_hello_becomes hello*world*becomes world
You can also use the HTML <i>...</i> or <em>...</em> tags:
<i>hello</i>becomes hello<em>hello</em>becomes hello
Note that there is currently a bug where _ doesn't work with less than three characters, so _1_ or _12_ won't work, but _123_ will.
bold text
Put two * or _ characters either side of the text:
__hello__becomes hello**world**becomes world
You can also use the HTML <b>...</b> or <strong>...</strong> tags:
<b>hello</b>becomes hello<strong>hello</strong>becomes hello
This can be combined with italics like so: _**hello world**_
strikethrough text
Put two ~ characters either side of the text:
~~hello~~becomeshello
You can also use the HTML <del>...</del> or <strike>...</strike> tags:
<del>hello</del>becomeshello<strike>hello</strike>becomeshello
Again, this can be combined with bold or italic text: ~~**hello** _world_~~
alignment
To center-align text, surround it with either ˜˜˜...˜˜˜ or <center>...</center>:
For centred, right-aligned, or "justified" text, add align="???" to the HTML <p>...</p> or <div>...</div> tags:
<p align="left">This is kind of pointless...</p>
<p align="center">This is equivalent to the other methods.</p>
<p align="right">This aligns the text to the right.</p>
<p align="justify">This gives you "non-ragged" paragraphs of text.</p>
Note that these all rely on HTML4 features, and so may stop working one day...
quoted text
Begin each line with a > character, or use <blockquote>...</blockquote>:
> hello
> world
<blockquote>hello
world</blockquote>
...becomes:
hello
world
You can "nest" quotes by adding extra > characters, like so:
> hello
>> world
...becomes:
hello
world
Note that quoted text will always appear italic due to Anilist styling.
links
Link to other pages using [the text you see](https://anilist.co/). This will open in a new tab when clicked.
You can also use <a href="https://anilist.co">the text you see</a> HTML, but this will not open in a new tab unless you add target="_blank" (possibly a bug; may change in the future).
Simple links will "just work", and may optionally be surrounded with < and > like so:
https://www.google.com
<https://www.google.com>
As a special case, links to anime/manga pages on Anilist will show a preview:
https://anilist.co/anime/66/Azumanga-Daioh/
https://anilist.co/manga/30085/Azumanga-Daioh/
https://anilist.co/anime/66/Azumanga-Daioh/
https://anilist.co/manga/30085/Azumanga-Daioh/
images
Images look like links, but with a ! in front:
You can also use HTML:
<img alt="fallback text" src="https://anilist.co/img/icons/icon.svg">
There's also an (Anilist-specific) way to specify a size:
img###(https://anilist.co/img/icons/icon.svg)
...where ### is the width in pixels, such as 420.
Note that the img code is always converted (even within code blocks) so be careful when trying to explain how it works to other users!
text size
Create a "header" by starting the line with 1-5 # characters:
# Bigger
## Normal
### Smaller
#### Smaller still
##### Even smaller
Result:
Bigger
Normal
Smaller
Smaller still
Even smaller
You can also use the HTML <h1>/<h2>/<h3>/<h4>/<h5> tags, but Anilist doesn't allow the <h6> tag (so ###### this or <h6>this</h6> won't work).
Alternatively, you can use == or -- instead of # text or ## text:
Hello
==
World
--
Use as many = or - characters as you like, but there must be at least two.
horizontal lines
Enter three or more - or * characters, optionally with spaces:
---
***
- - -
* * *
Make sure to have a blank line either side to avoid ambiguity:
this is a header
---
this is text followed by a horizontal line
---
Alternatively, you can use the <hr> HTML tag.
lists
For bullet-point lists, simply start each line with -, *, or +:
- hello
- world
* hello
* world
+ hello
+ world
All of these become:
- hello
- world
For numbered lists, simply begin each line with 1., 2., etc.
1. hello
2. world
This becomes:
- hello
- world
Note that you don't actually have to use sequential numbers. For example:
6. ALL
6. HAIL
6. SATAN
...becomes:
- ALL
- HAIL
- SATAN
For sub-lists, simply indent each point by two spaces:
+ hello
+ world
+ hello
+ world
You can also mix-and-match numbered and bulleted lists:
* hello
1. world
+ hello
+ world
2. hello
* world
Alternatively, you could use the HTML <ul>/<ol>/<li> tags instead.
code
For "inline" code, use backticks:
blah blah `markdown **does
not** work here` blah blah
If you use the HTML <code>...</code> tag, you can use Markdown in your code, so it essentially acts as a monospaced-text effect:
blah blah <code>markdown **works
fine** here</code> blah blah
For "blocks" of code, simply prefix each line with four spaces:
normal **markdown** text
some(code) { markdown(wont**work**here) }
more _normal_ text
... or surround it with triple-backticks:
normal **markdown** text
```
some(code) { markdown(wont**work**here) }
```
more _normal_ text
You can also use the HTML <pre>...</pre> tag:
normal **markdown** text
<pre>
some(code) { markdown(wont**work**here) }
</pre>
more _normal_ text
PART 2: ANLIST-SPECIFIC FEATURES
Most of the things above will work on any Markdown website, but this section covers things that are specific to Anilist.
Note that most or all of these will always be converted, even if they're put inside code blocks!
spoiler text
Surround text you want to hide with ~!...!~ like so:
~!some spoiler text!~
Using <div rel="spoiler">some spoiler text</div> also works for now, but this might not be the case in the future - stick with the Markdown approach!
Note that the spoiler text feature has a few bugs at the moment:
~!...!~is converted even in code blocks, so it can be difficult to explain how it works to other users.- It doesn't interact well with
˜˜˜...˜˜˜or<center>...</center>; it puts the "hidden" text after the Spoiler, click to view block.
Hopefully, these will be fixed in the future, but for now, be careful to avoid unintentionally revealing spoilers to other users!
youtube videos
Surround the URL with youtube(...) like so:
youtube(https://www.youtube.com/watch?v=D0q0QeQbw9U)
Note that only the D0q0QeQbw9U part is actually required:
youtube(D0q0QeQbw9U)
Again, this is always converted - even in code blocks.
other videos
Surround the URL with webm(...) like so:
webm(https://files.kiniro.uk/video/sonic.webm)
These embeds will play (and loop) automatically, and are muted by default:
webm(https://files.kiniro.uk/video/sonic.webm)
Note that, despite the name, any audio or video file will work - but may not actually be supported by all browsers.
PS: Does not interact well with code blocks.
PART 3: EMOJI AND UNICODE
This section covers a few things to be aware of if you want to post emojis (or other non-ASCII characters) on Anilist.
tl;dr
Run everything through this before you post on Anilist and you should be fine.
longer version
Any Unicode character whose "code point" is more than 65535 (FFFF hexadecimal) will cause the rest of your post to be "cut off" and disappear, because, well, MySQL. Unfortunately, this includes (almost) all emojis, plus various other "unusual" Unicode characters.
Using HTML magic, you can "manually" include these characters like so:
🤔 = 🤔 (decimal) or 🤔 (hexadecimal)
The Unicodifier does this for you, converting any code-points over 65535 into &#this; format so that they won't cause problems when you post them on the Anilist website.
PART 4: MISCELLANEOUS
This section covers a few odds and ends which sometimes get asked about on the global feed.
linked images
To have an image take you somewhere when you click on it, simply wrap it in an ordinary Markdown link:
[ img###(https://anilist.co/img/icons/icon.svg) ](https://anilist.co/)
Note that the spaces around the img code are necessary in order for it to be converted properly. However, this isn't the case with "basic" Markdown images:
[](https://anilist.co/)
colored text
A few people have colored (non-link) text on their profile pages. This is done via a HTML link that doesn't specify a URL: blah <a>hello world</a> blah
𝖈𝖔𝖔𝖑 𝕥𝕖𝕩𝕥 ℯ𝒻𝒻ℯ𝒸𝓉𝓈
You can change the font-styling of your text through the magic of Unicode. See https://yaytext.com for examples, but remember to run everything through the Unicodifier before you post it!
insecure images
Embedded images are automatically converted to https:// if they start with a plain http:// prefix.
If you embed an image in a post and it doesn't seem to appear, check that it's coming from a website that supports secure (HTTPS) URLs.
displaying special characters normally
If you want to use an asterisk/underscore/etc. without it being used to format your text, simply prefix it with a backslash:
\*hello world\*becomes *hello world*\_hello world\_becomes _hello world_
Use two backslashes to get a single backslash.
Alternatively, use HTML character-entity references (like & or () instead of & or ( to get literal characters.
underlined text
Not possible, as far as I'm aware - the <u>...</u> HTML tag is currently not allowed by Anilist.