Tutorial: Codeforces formatting/markup
When writing my first blog post I grew frustrated because I couldn't find resources on how to format the post and what I can/can't use. So I decided to collect what I know in this blogpost, so this wouldn't be such a problem for other newbies in the future.
This post has been written with my best knowledge. If something is incorrect please let me know!
Table of Contents
- Markdown — general formatting
- LaTeX (MathJax) — math and other special symbols
- Codeforces specific features
- Other useful resources
- BONUS: Typing $ in your posts
1. Markdown — general formatting
Overview
When you are writing a post or a comment on codeforces, you are writing in a markup language called Markdown. You can learn more about markdown and how it works here. It has its own easy syntax, for example if you want bold text, you should write **bold text** in the editor. You can find links to resources about Markdown provided by the creator of Codeforces MikeMirzayanov in his post here. There are also many materials and Markdown cheatsheets on the internet (https://www.markdownguide.org/basic-syntax/), but beware that Markdown has many flavours meaning something you find online might apply to a different Markdown flavour than Codeforces uses and therefore will not work here. Also if something doesn't work try adding an empty line before and after it. For example, you need an empty line before and after list's items to make a list.
HTML
Because Markdown gets converted into HTML, you can use HTML tags in it. So writing <b>something bold</b> will also get you something bold. You can read more about it here. Beware that from my experience unfortunately not all tags work, I've had problems with <svg>.
Tables
I find it much easier to use https://www.tablesgenerator.com/markdown_tables rather than create tables in Markdown manually.
Code
Short code
To include code in your posts enclose it in triple backtics (```), like so:
```c++
#include <iostream>
using namespace std;
int main () {
cout << "Hello world!\n";
return 0;
}
```
You can add your language name after the beginning triple backtics. See c++ above. The above will render as:
#include <iostream>
using namespace std;
int main () {
cout << "Hello world!\n";
return 0;
}
Longer code
If your code is long it is good to enclose it in <spoiler></spoiler> tags, like so:
<spoiler summary="My Code">
```c++
#include <iostream>
using namespace std;
int main () {
cout << "Hello world!\n";
return 0;
}
```
</spoiler>
This will render as:
2. LaTeX (MathJax) — math and other special symbols
Overview
To type math on Codeforces we use LaTeX language, which is getting rendered by MathJax (source). In LaTeX, a command is backslash symbol (\) followed by the name of the command. The 'arguments' are inside curly braces. For example, \frac{1}{2} would give us a fraction of 1/2. There are two ways to enter 'math mode' on Codeforces:
inline math mode: the equation will be inline. To use it, put LaTeX code between single $ (dollar signs):
Some text containing math $1 + \frac{1}{2} = \frac{3}{2}$., which renders as:
Some text containing math $$$1 + \frac{1}{2} = \frac{3}{2}$$$.
displayed math mode: the equation will be on a new line and centered. To use it, put LaTeX code between $$ (two dollar signs):
Some text containing math $$1 + \frac{1}{2} = \frac{3}{2}$$., which renders as:
Some text containing math
.
Cheatsheet and tutorial
You can find more about LaTeX in MathJax here:
- MathJax basic tutorial and quick reference $$$\leftarrow$$$ This one is very nice!
- MathJax Cheat Sheet for Mathematical Notation
Making your equations bigger
If you type $$\sum_{n=1}^\infty \frac{1}{n^2}$$ you will get this:
As you can see, the $$$\infty$$$ and $$$n=1$$$ parts are not above and under the sum symbol. We can fix this by adding \displaystyle command at the beginning of math mode (just after $ or $$), like so: $$\displaystyle\sum_{n=1}^\infty \frac{1}{n^2}$$ and we get this:
Seeing LaTeX source of any equation
You can see the LaTeX source of any equation on Codeforces by right-clicking it and selecting 'Show math as > TeX Commands'. Try it on the equation above! Note that it will not work on older equations, which are rendered as images. More info here.
Finding the name of a symbol
If you don't know the name of a symbol in LaTeX try using https://detexify.kirelabs.org/classify.html, where you can draw it and it will tell you the name! Isn't it cool?
3. Codeforces specific features
Codeforces has some special features to link its entities (users, submissions, problems, etc.). To use them, use the dropdown with the Codeforces icon 
in the bar above the editor.
4. Other useful resources
- Short instruction of formulas writing (translation)
- Know more? Write in the comments!
5. BONUS: Typing $ in your posts
If you want to type $ symbol without activating the math mode, you should use HTML escape codes and type $ in your post. This will display as a dollar sign.
