- Useful links
- My blogโs information
- Design
- Frequently used Emoji
- CSS
- Markdown (with plugins)
- Github Card
- Mermaid JS
- Barchart
This page also used for testing components used in the posts and pages.
Useful links
My blogโs information
Design
Frequently used Emoji
๐ :D(shortcut) |
||
๐ :smile: |
๐ :blush: |
๐ :heart_eyes: |
๐ :sweat: |
๐ :thumbsup: |
๐ :yum: |
๐ฐ :cold_sweat: |
๐ฑ :scream: |
๐ญ :sob: |
๐ :stuck_out_tongue_winking_eye: |
๐ :kissing: |
๐ช :sleepy: |
๐ฉ :poop: |
โ๏ธ :v: |
๐ฏ :100: |
๐ :see_no_evil: |
๐ :hear_no_evil: |
๐ :speak_no_evil: |
๐ :kiss: |
๐ :skull: |
๐ง :droplet: |
๐ :fireworks: |
๐ข :loudspeaker: |
โ ๏ธ :warning: |
๐ซ :no_entry_sign: |
โ
:white_check_mark: |
โ :x: |
ใ๏ธ :secret: |
โ๏ธ :interrobang: |
โผ๏ธ :bangbang: |
and more from Emoji Cheatsheet
CSS
Keys
- Control <kbd>Contro</kbd>
- Shift โง <kbd>Shift ⇧</kbd> - use Unicode characters
Markdown (with plugins)
++Inserted++Inserted- Footnote
[^1]for the mark[1],[^1]:for the note - Use {% raw %}{% endraw %} if the markdown cause you trouble on {{}} or {%%}
- Youtube Video {% youtube [youtube id] %}
| Action | Markdown | Sample |
|---|---|---|
| sub | H~2~0 |
H20 |
| sup | x^2^ |
x2 |
| Bold | **bold** |
bold |
| Italic | *italic* |
italic |
| Bold and Italic | ***bold and italic*** |
bold and italic |
| Marked | ==marked== |
marked |
| Strikethrough | ~~strikethrough~~ |
|
| Inline code | `inline code` |
inline code |
| Link | [link text](https://neo01.com) |
link text |
| Image |  |
Attributes with style class, eg:
# header {.style-me}
paragraph {data-toggle=modal}
paragraph *style me*{.red} more text
output
<h1 class="style-me">header</h1>
<p data-toggle="modal">paragraph</p>
<p>paragraph <em class="red">style me</em> more text</p>
Table Column Alignment
Code:
| Default | Left | Center | Right |
| --- | :-- | :-: | --: |
| 1 | 1 | 1 | 1 |
| 22 | 22 | 22 | 22 |
| 333 | 333 | 333 | 333 |
Result:
| Default | Left | Center | Right |
|---|---|---|---|
| 1 | 1 | 1 | 1 |
| 22 | 22 | 22 | 22 |
| 333 | 333 | 333 | 333 |
Blockquote
Code:
> Some quote text
Result:
Some quote text
Ordered list
Code:
1. item 1
2. item 2
Result:
- item 1
- item 2
Unordered list
Code:
- item 1
- item 2
Result:
- item 1
- item 2
Horizontal rule
Code:
---
Result:
Code block
Result:
Code block
Code:
~~~
Code block
~~~
Github Card
User
Code:
{% githubCard user:neoalienson %}
๐ 44
Repositories
โญ 22
Stars
๐ 33
Commits
๐ฅ 13
Followers
๐ 20
Pull Requests
โ 0
Issues
JavaScript 52.6%
Swift 10.5%
TypeScript 7.9%
Dart 5.3%
C++ 5.3%
Other 18.4%
A repository
Code:
{% githubCard user:neoalienson repo:pachinko %}
Result:
neoalienson/pachinko
An iOS 'pinball' game using SpriteKit and Swift with physics engine
โญ 7 Stars
๐ด 1 Forks
Language: C++
Mermaid JS
Prerendered.
Code:
{% mermaid %}
block-beta
columns 1
db(("DB"))
blockArrowId6<[" "]>(down)
block:ID
A
B["A wide one in the middle"]
C
end
space
D
ID --> D
C --> D
style B fill:#969,stroke:#333,stroke-width:4px
{% endmermaid %}
Result:
block-beta
columns 1
db(("DB"))
blockArrowId6<[" "]>(down)
block:ID
A
B["A wide one in the middle"]
C
end
space
D
ID --> D
C --> D
style B fill:#969,stroke:#333,stroke-width:4px
Live rendering
block-beta
columns 1
db(("DB"))
blockArrowId6<[" "]>(down)
block:ID
A
B["A wide one in the middle"]
C
end
space
D
ID --> D
C --> D
style B fill:#969,stroke:#333,stroke-width:4px
Barchart
Result:
Code:
{% echarts %}
{
"title": {
"text": "Ephemeral Port Ranges by Operating System"
},
"tooltip": {},
"xAxis": {
"type": "category",
"data": ["Linux (Old)", "Linux (New)", "Windows", "FreeBSD", "macOS"]
},
"yAxis": {
"type": "value",
"name": "Number of Ports"
},
"series": [{
"type": "bar",
"data": [28233, 28232, 16384, 55536, 16384],
"itemStyle": {
"color": "#1976d2"
}
}]
}
{% endecharts %}
Footnote sample โฉ๏ธ