Creating Pages
1️⃣ Basics¶
Get started with Markdown basics then move on to advance concepts .
Download the cheat sheet
Move on to learning linking pages
2️⃣ Components¶
Note : Space place very critical role in Markdown.
Tabs¶
Refer this for more details.
Markup¶
=== "C"
``` c
#include <stdio.h>
int main(void) {
printf("Hello world!\n");
return 0;
}
```
=== "C++"
``` c++
#include <iostream>
int main(void) {
std::cout << "Hello world!" << std::endl;
return 0;
}
```
Output¶
#include <stdio.h>
int main(void) {
printf("Hello world!\n");
return 0;
}
#include <iostream>
int main(void) {
std::cout << "Hello world!" << std::endl;
return 0;
}
Tables¶
Refer this for more details
| Method | Description |
|---|---|
GET |
Fetch resource |
PUT |
Update resource |
DELETE |
Delete resource |
| Method | Description |
| ----------- | ------------------------------------ |
| `GET` | :material-check: Fetch resource |
| `PUT` | :material-check-all: Update resource |
| `DELETE` | :material-close: Delete resource |
Images¶
Example #1¶
{: align=left }
Example #2¶
Task Lists¶
- item 1
- item A
- item B
more text
- item a
- item b
- item c
- item C
- item 2
- item 3
- [X] item 1
* [X] item A
* [ ] item B
more text
+ [x] item a
+ [ ] item b
+ [x] item c
* [X] item C
- [ ] item 2
- [ ] item 3
Call outs¶
See this for more details.
Success¶
optional explicit title within double quotes
Any number of other indented markdown elements.
This is the second paragraph.
!!! success "optional explicit title within double quotes"
Any number of other indented markdown elements.
This is the second paragraph.
Note¶
Note
You should note that the title will be automatically capitalized.h.
!!! note
You should note that the title will be automatically capitalized.
Danger¶
Don't try this at home
...
!!! danger "Don't try this at home"
...
Important¶
This is important admonition box.
!!! important ""
This is important admonition box.
Tip¶
tip
This is tip admonition box.
!!! tip "tip"
This is tip admonition box.
Warning¶
warning
This is warning admonition box.
!!! warning "warning"
This is warning admonition box.
Error¶
error
This is an error admonition box.
!!! error "error"
This is an error admonition box.
Info¶
info
This is an info admonition box.
!!! info "info"
This is an info admonition box.
Quote¶
quote
This is an quote admonition box.
!!! quote "quote "
This is an quote admonition box.
Example¶
example
This is an example admonition box.
!!! example "example"
This is an example admonition box.
Question¶
question
This is an example admonition box.
!!! question "question"
This is an question admonition box.
Failure¶
failure
This is an failure admonition box.
!!! failure "failure"
This is an failure admonition box.
Danger¶
danger
This is an danger admonition box.
!!! danger "danger"
This is an danger admonition box.
Bug¶
bug
This is an bug admonition box.
!!! bug "bug"
This is an bug admonition box.
Abstract¶
abstract
This is an abstract admonition box.
!!! abstract "abstract"
This is an abstract admonition box.
Details¶
Refer this for more details
Example #1¶
Success
Content.
Warning
Content.
Tip
Content.
Note
Content.
Example
Content.
Quote
Content.
Info
Content.
Question
Content.
Failure
Content.
Bug
Content.
Abstract
Content.
??? success
Content.
??? warning classes
Content.
??? tip
Content.
??? note classes
Content.
??? success
Content.
??? example classes
Content.
??? quote classes
Content.
??? info classes
Content.
??? question classes
Content.
??? failure classes
Content.
??? bug classes
Content.
??? abstract classes
Content.
Example #2¶
Summary
Here's some content.
Summary
Here's some content.
??? optional-class "Summary"
optional-class: Here's some content.
??? multiple optional-class "Summary"
multiple class: Here's some content.
Example #3¶
???+ note default expanded
Here's some content.
Progress Bar¶
Refer this for more details
Example #1¶
[=0% "0%"]
[=5% "5%"]
[=25% "25%"]
[=45% "45%"]
[=65% "65%"]
[=85% "85%"]
[=100% "100%"]
Example #2¶
[=1/10 "10%"]
[=5%]
[=25% "More than 25%"]
[=100/100 'All set']
Example #3¶
[=100% "100%"]{: .static .blue}
[=85% "85%"]{: .static .lightcyan}
[=100% "100%"]{: .static .darkcyan}
[=85% "85%"]{: .static .verydarkcyan}
[=85% "85%"]{: .static .blueviolet}
[=100% "100%"]{: .static .bisque}
[=85% "85%"]{: .static .green}
[=85% "85%"]{: .static .darkgreen}
[=100% "100%"]{: .static .orange}
[=85% "85%"]{: .static .orangered}
[=100% "100%"]{: .static .olivedrab}
[=85% "85%"]{: .static .red}
[=100% "100%"]{: .static .gray}
[=100% "100%"]{: .static .grey}
Example #4¶
[=85% "85%"]{: .candystripe}
[=100% "100%"]{: .candystripe .candystripe-animate}
[=0%]{: .thin}
[=5%]{: .thin}
[=25%]{: .thin}
[=45%]{: .thin}
[=65%]{: .thin}
[=85%]{: .thin}
[=100%]{: .thin}
Example #5¶
[=91% "Going good"]{: .static .blue}
[=85% "In progress"]{: .static .orange}
[=100% "Blocked"]{: .static .red}
[=100% "Not Started"]{: .static .grey}
[=100% "Completed"]{: .static .darkgreen}