MENU |
|---|
# First level header
## Second level header
### Third level header
#### Fourth level header
##### Fifth level header
###### Sixth level header
Headings as HTML
<h1>First level header</h1>
<h2>Second level header</h2>
<h3>Third level header</h3>
<h4>Fourth level header</h4>
<h5>Fifth level header</h5>
<h6>Sixth level header</h6>
Example:
*italic*
_italic_
Italic as HTML
<i>italic</i>
<em>italic</em>
<var>italic</var>
Example:
italic
italic
**bold**
__bold__
Bold as HTML
<b>bold</b>
<strong>bold</strong>
Example:
bold
bold
***bold italic***
___bold italic___
Bold Italic as HTML
<b><i>bold italic</i></b>
<strong><em>bold italic</em></strong>
Example:
bold italic
bold italic
~~strikethrough~~
Strikethrough as HTML
<s>strikethrough</s>
<del>strikethrough</del>
Example:
strikethrough
Superscript and Subscript as HTML
This is a <sup>superscript</sup> text
Example:
This is a superscript text
This is a <sub>subscript</sub> text
Example:
This is a subscript text
This is a paragraph. To create a new paragraph, leave a blank line between two lines of text.
This is the first line
And this is the second line, but they are in the same paragraph. To move a line, use two spaces at the end of the previous line.
Example:
This is a paragraph. To create a new paragraph, leave a blank line between two lines of text.
This is the first line
And this is the second line, but they are in the same paragraph. To move a line, use two spaces at the end of the previous line.
Line Breaks as HTML
This is the first line <br> And this is the second line
or
<dd>This is the first line</dd> And this is the second line
Example:
This is the first line
And this is the second line
1. Paragraph one
2. Paragraph two
3. Paragraph three
Numbered List as HTML
<ol>
<li>Paragraph one</li>
<li>Paragraph two</li>
<li>Paragraph three</li>
</ol>
Example:
- Paragraph one
- Paragraph two
- Paragraph three
- Bullet point one
- Bullet point two
- Bullet point three
Marked List as HTML
<ul>
<li>Paragraph one</li>
<li>Paragraph two</li>
<li>Paragraph three</li>
</ul>
Example:
- Bullet point one
- Bullet point two
- Bullet point three
You can create a nested list by indenting one or more list items below another item.
1. First list item
- First nested list item
- First nested list item
2. First list item
- First nested list item
+ Second nested list item
+ Second nested list item
- First nested list item
* Second nested list item
* Second nested list item
Nested List as HTML
<ol>
<li>First list item</li>
<ul>
<li>First nested list item</li>
<li>First nested list item</li>
</ul>
<li>First list item</li>
<ul>
<li>First nested list item</li>
<ul>
<li>Second nested list item</li>
<li>Second nested list item</li>
</ul>
</ul>
<ul>
<li>First nested list item</li>
<ul>
<li>Second nested list item</li>
<li>Second nested list item</li>
</ul>
</ul>
</ol>
Example:
- First list item
- First nested list item
- First nested list item
- First list item
- First nested list item
- Second nested list item
- Second nested list item
- First nested list item
- Second nested list item
- Second nested list item
- First nested list item
[Link Text](https://www.example.com)
Example:
<http://example.com/>
<address@example.com>
Example
Reference-style links allow you to refer to your links by names, which you define elsewhere in your document:
I get 10 times more traffic from [Google][1] than from
[Yahoo][2] or [MSN][3].
[1]: http://google.com/ "Google"
[2]: http://search.yahoo.com/ "Yahoo Search"
[3]: http://search.msn.com/ "MSN Search"
Reference-style Links as HTML
<p>I get 10 times more traffic from <a href="http://google.com/"
title="Google">Google</a> than from <a href="http://search.yahoo.com/"
title="Yahoo Search">Yahoo</a> or <a href="http://search.msn.com/"
title="MSN Search">MSN</a>.</p>
Example
I get 10 times more traffic from Google than from Yahoo or MSN.
[Some Title 1](#some-title-1)
## Some Title 1
Some content
Example:
Some content
[Go to Title 1](#title1)
## <a id="title1">Title 1</a>
Some content
Example:
Some content
10MBfor images and gifs
Example:
<img width="50%" height="auto" src="https://www.example.com/image.jpg">
Example:
Tip
How to upload images
-
Drag-and-drop an image on to the description field. This will start the uploading process.
-
Copy the URL and use it in README, issues or pull requests however you like.
Image tags that link to files with a video extension are automatically converted to a video player. The valid video extensions are .mp4, .m4v, .mov, .webm, and .ogv.
10MBfor videos uploaded to a repository owned by a user or organization on a free GitHub plan
100MBfor videos uploaded to a repository owned by a user or organization on a free GitHub plan
If the video is short, you can insert the video via drag and drop into a Markdown file.
https://github.com/user-attachments/assets/964af541-a09b-4569-be9d-5d3a826b8d49
Example:
Introduction.to.GitHubActions.mp4
[](https://www.youtube.com/watch?v=xREYX-AHii0&list=PL0lo9MOBetEE_p_lL10nji8nVTuzYT580)
Example:
[<img width="50%" src="photo/youtube-video-preview.png">](https://www.youtube.com/watch?v=xREYX-AHii0&list=PL0lo9MOBetEE_p_lL10nji8nVTuzYT580)
Example:
`line of code`
Code Line as HTML
<code>line of code</code>
Example:
line of code
Block of code can be written in multiple lines.
For blocks of code, use three ``` or ~~~.
```
def main():
message = "Hello, World!"
print(message)
if __name__ == "__main__":
main()
```
Example:
def main():
message = "Hello, World!"
print(message)
if __name__ == "__main__":
main()
You can specify the programming language for code blocks.
Syntax highlighting from the linguist library, which includes many different languages, is used.
```python
print("Hello World!")
```
Example:
print("Hello World!")```diff
type demo struct {
- text in red
+ text in green
! text in orange
# text in gray
@@ text in purple (and bold)@@
}
```
Example:
type demo struct {
- text in red
+ text in green
! text in orange
# text in gray
@@ text in purple (and bold)@@
}To demonstrate how to display the code, place the block in ~~~.
~~~
```python
print("Hello World!")
```
~~~
Example:
```python
print("Hello World!")
```The <pre> tag in HTML is used to display text in a format that preserves all spaces and line breaks as they are written in the source code.
<pre>
This is the text inside the "pre" tag.
It preserves all spaces and
line breaks.
function example() {
console.log("Hello, world!");
}
</pre>
Example:
This is the text inside the "pre" tag.
It preserves all spaces and
line breaks.
function example() {
console.log("Hello, world!");
}
Tip
Top Code Languages
| Language | Keyword |
|---|---|
| Bash | bash |
| C# | csharp |
| Clojure | clojure |
| C++ | cpp |
| CSS | css |
| CoffeeScript | coffeescript |
| CMake | cmake |
| HTML | html |
| HTTP | http |
| Java | java |
| JavaScript | javascript |
| JSON | json |
| Markdown | markdown |
| Objective C | objectivec |
| Perl | perl |
| PHP | php |
| Python | python |
| Ruby | ruby |
| R | r |
| SQL | sql |
| Scala | scala |
| Vala | vala |
| XML | xml |
| ~ |
You can quote text with a >.
> First level of quoting
>> Second level of quoting
>>> Third level of quoting
Example:
First level of quoting
Second level of quoting
Third level of quoting
Block Quote as HTML
<blockquote>
You can put entire paragraphs in a `blockquote` tag and it will appear as a quote.
This will work even if you write on multiple lines.
And even if you move the text to a new line.
</blockquote>
Example:
You can put entire paragraphs in a `blockquote` tag and it will appear as a quote.This will work even if you write on multiple lines.
And even if you move the text to a new line.
Hyphens
---
Asterisks
***
Underscores
___
Horizontal Line as HTML
<hr>
Example:
| First Title | Second Title | Third Title |
| :------: | :------- | -------: |
| Cell 1.1 | Cell 1.2 | Cell 1.3 |
| Cell 2.1 | Cell 2.2 | Cell 2.3 |
| Cell 3.1 | Cell 3.2 | Cell 3.3 |
Table as HTML
<table>
<thead>
<tr>
<th align="center">First Title</th>
<th align="left">Second Title</th>
<th align="right">Third Title</th>
</tr>
</thead>
<tbody>
<tr>
<td align="center">Cell 1.1</td>
<td align="left">Cell 1.2</td>
<td align="right">Cell 1.3</td>
</tr>
<tr>
<td align="center">Cell 2.1</td>
<td align="left">Cell 2.2</td>
<td align="right">Cell 2.3</td>
</tr>
<tr>
<td align="center">Cell 3.1</td>
<td align="left">Cell 3.2</td>
<td align="right">Cell 3.3</td>
</tr>
</tbody>
</table>
Example:
| First Title | Second Title | Third Title |
|---|---|---|
| Cell 1.1 | Cell 1.2 | Cell 1.3 |
| Cell 2.1 | Cell 2.2 | Cell 2.3 |
| Cell 3.1 | Cell 3.2 | Cell 3.3 |
- [x] Task 1
- [ ] Task 2
- [ ] Task 3
Example:
- Task 1
- Task 2
- Task 3
> [!caution]
> Depending on the title inside the brackets `[` `]` will be:
>
> - Icon will change
> - Сolor will change
>
> ###### This happens automatically because of this implementation in Markdown.
Example:
Caution
Depending on the title inside the brackets [ ] will be:
- Icon will change
- Сolor will change
> [!warning]
> This “warning” block indicates a warning or important information that needs attention.
Example:
Warning
This “warning” block indicates a warning or important information that needs attention.
> [!tip]
> This “tip” block indicates a helpful tip or recommendation.
Example:
Tip
This “tip” block indicates a helpful tip or recommendation.
> [!note]
> This “note” block indicates a note or additional information.
Example:
Note
This “note” block indicates a note or additional information.
> [!important]
> This “important” block indicates critical information.
Example:
Important
This “important” block indicates critical information.
> $\color{#da3633}{\textsf{\Large{⦻} \normalsize{Error}}}$
>
> $\color{#e6edf3}{\textsf{This "custom" block can have any information.}}$
>
> ###### Made with the help of LaTeX.
> $\color{#e89820}{\textsf{\large{⁉︎} \normalsize{Report}}}$
>
> $\color{#e6edf3}{\textsf{This “report” block provides a detailed account or statement about a particular topic or event.}}$
> $\color{#9dea20}{\textsf{\Large{✓} \normalsize{Check}}}$
>
> $\color{#e6edf3}{\textsf{This “check” block is used to verify or confirm information, actions, or conditions.}}$
> $\color{#d8d034}{\textsf{\LARGE{♺} \normalsize{Reuse}}}$
>
> $\color{#e6edf3}{\textsf{This “reuse” block highlights elements or components that can be used again in different contexts or applications.}}$
Example:
$\color{#da3633}{\textsf{\Large{⦻} \normalsize{Error}}}$
$\color{#e6edf3}{\textsf{This "custom" block can have any information.}}$
$\color{#e89820}{\textsf{\large{⁉︎} \normalsize{Report}}}$
$\color{#e6edf3}{\textsf{This “report” block provides a detailed account or statement about a particular topic or event.}}$
$\color{#9dea20}{\textsf{\Large{✓} \normalsize{Check}}}$
$\color{#e6edf3}{\textsf{This “check” block is used to verify or confirm information, actions, or conditions.}}$
$\color{#d8d034}{\textsf{\LARGE{♺} \normalsize{Reuse}}}$
$\color{#e6edf3}{\textsf{This “reuse” block highlights elements or components that can be used again in different contexts or applications.}}$
You can insert comments into your Markdown file that will not appear in the final formatted file:
<!-- This content will not appear in the rendered Markdown -->
or
[//]: # (This is a comment and will not be displayed)
Example:
You can even hide blocks of code.
<details>
<summary>CLICK ME</summary>
<p>
```python
print("Hello World!")
```
</p>
</details>
Example:
CLICK ME
print("Hello World!")<details open>
<summary>CLICK ME</summary>
<p>
```python
print("Hello World!")
```
</p>
</details>
Example:
CLICK ME
print("Hello World!")You can use emoji in your Markdown files.
:smile:
:laughing:
:blush: