Anilist-Flavored Markdown

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~~ becomes hello

You can also use the HTML <del>...</del> or <strike>...</strike> tags:

  • <del>hello</del> becomes hello
  • <strike>hello</strike> becomes hello

Again, this can be combined with bold or italic text: ~~**hello** _world_~~


alignment


To center-align text, surround it with either ˜˜˜...˜˜˜ or <center>...</center>:

hello world

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>

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:

![fallback text](https://anilist.co/img/icons/icon.svg)

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:

  1. hello
  2. world

Note that you don't actually have to use sequential numbers. For example:

6. ALL
6. HAIL
6. SATAN

...becomes:

  1. ALL
  2. HAIL
  3. 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:

🤔 = &#129300; (decimal) or &#x1f914; (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:

[![image](https://anilist.co/img/icons/icon.svg)](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 &amp; or &lpar;) 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.