Cheatsheet for New Posts

13 May 2024 - 2 mins read time
Tags: Template Cheatsheet

Listing of some useful code snippets that I use to create new posts. The basic markdown syntax are natively supported and can be used without any problem, thus I am not going to introduce in this cheatsheet.

Headers

# H1  
## H2  
### H3  
#### H4  
##### H5  
###### H6   

Emphasis

- Italics, with *asterisks* or _underscores_.  
- Bold, with **asterisks** or __underscores__.  
- Bold & italics, with **asterisks and _underscores_**.  
- Strikethrough, uses two tildes. ~~Scratch this.~~

Italics, with asterisks or underscores.
Bold, with asterisks or underscores.
Bold & italics, with asterisks and underscores.
Strikethrough, uses two tildes. ~~Scratch this.~~

Highlight Text

/* Using inline CSS method */

/* Highlight text font only */
<span style="color: Tomato;">I am highlighted text with font colort</span>

/* Highlight text with background fill only */
<span style="background-color: #90EE90;">I am highlighted text with background fill</span>

/* Highlight text font with background fill both */
<span style="background-color: #90EE90;"><span style="color: #000000;">I am highlighted text with both font and background</span></span>

I am highlighted text with font color

I am highlighted text with background fill

I am highlighted text with both font and background

Figures with Caption

<!-- Insert figure with caption using remote theme figure element -->

{% include elements/figure.html image="https://images.unsplash.com/photo-1605315024122-7fd363c1f7ab?q=80&w=2077&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" caption="Tomato" %}

Album

<!-- Using the remote theme carousel element -->

{% capture carousel_images %}
https://images.unsplash.com/photo-1624821588855-a3ffb0b050ff?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D
https://images.unsplash.com/photo-1598404148538-f0bc11a5515c?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D
https://images.unsplash.com/photo-1509042509830-d41df2156c6f?q=80&w=1895&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D
{% endcapture %}
{% include elements/carousel.html %}

Video

<!-- Using the remote theme videos element -->

{% include elements/video.html id="17uxyViao2s" %}

How to get a YouTube video ID?
The video ID is located in the URL of the video page, right after the v= parameter.
For exmaple, the URL of the video is: https://www.youtube.com/watch?v=17uxyViao2s
Therefore, the ID of the video is 17uxyViao2s