This blog focuses more on the functions (which help you format a blog), not the tips and tricks.

Since many recent blogs are hurting my eyes (I'm talking to you, MEGATRON_HACKER...), I decided to write a blog to share some tips and tricks about how to format a blog.

This post has been written with my best knowledge. If something is incorrect please let me know! I copied this sentence from this blog...

Here's a table of contents if you guys need it:

Table of Contents:

1. Codeforces specific features
2. Math
3. Emoji
4. Change font, font size, color, background color of text, and text's alignment
5. Tables
6. YouTube videos

This blog was written by DuyMinh3005

1. Codeforces specific features:

---

I think that everyone knows how these things work, but I will write this anyway. Here is a picture of the taskbar:
In the taskbar, you can see a few options to format your blog:

• Headings: Different levels of headings, with $$$H1$$$ being the largest, and $$$H4$$$ being the smallest.
• Bold: Make your text bold.
• Italic: Make your text italic.
• Bulleted and numbered lists: Create a bulleted or numeric list. As you can see, I'm using the bulleted list now.
• Picture and link: Insert a picture or a link (with a text to link if you want). To insert a picture, you could use this website to convert your image into a URL and insert it like this: ![ ](http://yourimagelink.jpg). Please note that, the website I said above only stored images for 30 days before it gets deleted
• Source code: This includes block and inline. Block code helps your code render correctly, inline code lets you see the raw code. And PLEASE use <spoiler> if your code is long.

More about source code:
You could add your programming language after the ``` like this:

 ```c++
#include 
using namespace std;
int main () {
   cout << "Hello world!\n";
   return 0;
}
``` 

And it would render like this:

#include <iostream>
using namespace std;
int main () {
   cout << "Hello world!\n";
   return 0;
}

Likes widgets: Codeforces supports likes in posts and comments. To add like buttons, use the syntax (likes:key,groups) (use square brackets instead of round). The same key means the same likes widget. The same key with different groups can be used for exclusive choices. For example:

For more information, you can have a look at this blog

Bonus: Although Codeforces supports bold and italic, you can't write text with strikethrough and underline using Codeforces features.
To do this, use <strike>Your text</strike> for strikethrough and <u>Your text</u> for underline.

Quote: You can quote a sentence from another comment or blog using the syntax > Your text here for a quote, or <blockquote>Your text here</blockquote> for a block quote. The only difference is that a block quote can span multiple lines, whereas a regular quote is typically limited to a single line.

2. Math:

---

Basically, Codeforces uses LaTeX for us to type math. You can write math symbols by simply "activating" the math mode ($$) and add a backslash (\) followed by the command. For example, \frac{1}{2} will be rendered as $$$\frac{1}{2}$$$. If you want your fraction to be larger, use dfrac instead of frac.
For more information about math symbol syntax, you can have a look here.

3. Emoji:

---

If you didn't know, Codeforces supports emojis. To display an emoji that you want, you just write the corresponding decimal code and the browser will render it for you.

For example, this is Santa Claus: 🎅. Decimal code: 🎅.

For more information about the emoji syntax, you could have a look at this website.

4. Change font, font size, color, background color of text, and text's alignment:

---

As Codeforces uses Markdown to render text, and Markdown includes HTML, so you can change how your text looks.

For example, to change the color of your text, do this: <p style="color:red">This text is red</p>, which will be rendered like this:

This text is red

Now, here is a table with the functions:

Function	Raw	Render	Note
Change font	<p style="font-family:'Courier New'"> This font is 'Courier New' </p>	This font is 'Courier New'	Nothing
Change font size	<p style="font-size:10px"> This text is small </p>	This text is small	This can be set using absolute unit (px) or relative units (like em, rem, %, vw)
Change color	<p style="color:red"> This text is red </p>	This text is red	You can replace the color name with a HEX code or RGB value
Change background color	<p style="background-color:red"> The background is red </p>	The background is red	You can replace the color name with a HEX code or RGB value
Change text's alignment	<p style="text-align:center"> This text is center aligned </p>	This text is center aligned	You can change center to left or right

Now, if you know how to use these functions, you can actually do something fun:

For example, this is me: DuyMinh3005

This behaves exactly like a real profile link: when you click it, it redirects to my profile (which is still a pupil), and when you hover the link, it says "Legendary Grandmaster DuyMinh3005"

Another trick, which is more useful, is that you can make an anti-AI prompt just like this:

---

If you copy from this line...

So you did what I said correctly

...to this line...

...and paste it into Notepad, you will find something interesting.

---

To do this, you need to set the font-size to 0.

5. Tables:

---

Basically, Codeforces uses Markdown to render tables. Markdown tables use pipes (|) to separate columns and hyphens (-) to define the header row. The structure includes a header row, a divider line, and data rows.

For example:

| No. | Name | Revenue |
|-------|-----|-----------|
| 1. | Clash Royale | $452.0 million |
| 2. | Brawl Stars | $272.6 million |
| 3. | Clash Of Clans | $253.9 million |
| 4. | Hay Day | $119.1 million |
| 5. | Boom Beach | $13.2 million |
| 6. | Squad Buster | $9.5 million |

Which will be rendered as:

Supercell's game revenue in 2025

No.	Name	Revenue
1.	Clash Royale	$452.0 million
2.	Brawl Stars	$272.6 million
3.	Clash Of Clans	$253.9 million
4.	Hay Day	$119.1 million
5.	Boom Beach	$13.2 million
6.	Squad Buster	$9.5 million

You can control the alignment of text in each column too. I don't know why, but it seems that Codeforces doesn't support text alignment inside tables. If you still want to align text (for tables), you could use text-align as I said above.

6. Youtube videos

---

Well, you can add a Youtube video into Codeforces using HTML.

Raw:

<iframe width="640" height="360"
src="https://www.youtube.com/embed/dQw4w9WgXcQ?autoplay=1">
</iframe>

To do this, you first need to get the ID of the video you want to play. For example, dQw4w9WgXcQ is the ID of the Rickroll above. Then, use this syntax:

<iframe width="640" height="360"
src="https://www.youtube.com/embed/ID goes here">
</iframe>

You can change the width and height, but as far as I know, 640×360 is a good size for embedded videos.

If you want your video to be autoplayed, use autoplay=1 like this:

<iframe width="640" height="360"
src="https://www.youtube.com/embed/ID goes here?autoplay=1">
</iframe>

If you want your video to be muted, use mute=1 like this:

<iframe width="640" height="360"
src="https://www.youtube.com/embed/ID goes here?mute=1">
</iframe>

If you want both at once (greedy approach?), use autoplay=1&mute=1 like this:

<iframe width="640" height="360"
src="https://www.youtube.com/embed/ID goes here?autoplay=1&mute=1">
</iframe>