Sometime I forgot the standard or custom markdown feature that available (built-in or customize) on my blog (jekyll). So I create this post as self reference and reminder.

• Word highlighting (css+js)
• Word highlighting (native)
• PlantUML
• Mermaid
• Note (within rectangle box)
• Centering embed picture with text caption
• Embed video (mp4)
• Secret (password protected) blog post
• Premonotion (block-style side content)
• Foot note

Word highlighting (css+js)

code:

---
layout: post
title: dummy
date: 2020-04-23 12:19 +0800
highlight: true # <-------- enable this
---
try to ==highlight this words==. This feature has to be implemented by js + css.

result:

try to ==highlight this words==. This feature has to be implemented by js + css.

Word highlighting (native)

code:

try to <mark>highlight this words</mark>. This feature is native

result:

try to highlight this words. This feature is native

PlantUML

code:

result:

Mermaid

source:

result:

gantt
    dateFormat  YYYY-MM-DD
    title Adding GANTT diagram functionality to mermaid
    section A section
    Completed task            :done,    des1, 2014-01-06,2014-01-08
    Active task               :active,  des2, 2014-01-09, 3d
    Future task               :         des3, after des2, 5d
    Future task2               :         des4, after des3, 5d
    section Critical tasks
    Completed task in the critical line :crit, done, 2014-01-06,24h
    Implement parser and jison          :crit, done, after des1, 2d
    Create tests for parser             :crit, active, 3d
    Future task in critical line        :crit, 5d
    Create tests for renderer           :2d
    Add to mermaid                      :1d

sequenceDiagram
    Alice ->> Bob: Hello Bob, how are you?
    Bob-->>John: How about you John?
    Bob--x Alice: I am good thanks!
    Bob-x John: I am good thanks!
    Note right of John: Bob thinks a long
long time, so long
that the text does
not fit on a row.

    Bob-->Alice: Checking with John...
    Alice->John: Yes... John, how are you?

Note (within rectangle box)

code:

Asalnya aku nak tulis artikel ni dalam bahasa Inggeris (Kelakar plak bila eja English macam tu dalam bahasa Melayu), tapi aku rasa banyak dah orang duk tulis hal yang sama dalam bahasa omputih tu. So Aku buat keputusan nak tulis dalam bahasa Melayu. Tulisan mood santai-santai je nih
{: .note}

result:

Asalnya aku nak tulis artikel ni dalam bahasa Inggeris (Kelakar plak bila eja English macam tu dalam bahasa Melayu), tapi aku rasa banyak dah orang duk tulis hal yang sama dalam bahasa omputih tu. So Aku buat keputusan nak tulis dalam bahasa Melayu. Tulisan mood santai-santai je nih

Centering embed picture with text caption

code:

{:.image-caption} 
![Polygon Xtrada 6 (2018)](https://images2.imgbox.com/f7/2c/dSDeqVBn_o.png#center)My personal rocket

result:

My personal rocket

Embed video (mp4)

code:

<center>
<video controls width="100%">
    <source src="https://i.vgy.me/eoZYNM.mp4"
            type="video/mp4">
    Sorry, your browser doesn't support embedded videos.
</video>
</center>

result:

Secret (password protected) blog post

code:

---
layout: post
title: 'Project: Scout registration system'
date: 2020-02-12 09:39 +0800
password: 'secret'
---

cth:
http://www.pgscout.org/daftar/e-daftar
https://www.pgscout.org/daftar/
https://sos.penangscout.org/daftar/

result:

Check this post - Project: Scout registration system

Premonotion (block-style side content)

code:

> foo "Linked"
> Unknown type

> info "The information header"
> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean interdum, ligula in
> ultrices sodales, ante enim scelerisque diam, nec molestie lorem nulla sit amet dolor. 

> warning "The information header"
> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean interdum, ligula in
> ultrices sodales, ante enim scelerisque diam, nec molestie lorem nulla sit amet dolor.

> error "The information header"
> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean interdum, ligula in
> ultrices sodales, ante enim scelerisque diam, nec molestie lorem nulla sit amet dolor.

> citation "-- Mark Twain" [ cite = "twain" ]
> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean interdum, ligula in
> ultrices sodales, ante enim scelerisque diam, nec molestie lorem nulla sit amet dolor.

> notes "My note"
> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean interdum, ligula in
> ultrices sodales, ante enim scelerisque diam, nec molestie lorem nulla sit amet dolor.

> custom "A custom box with a Font Awesome icon"
> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean interdum, ligula in
> ultrices sodales, ante enim scelerisque diam, nec molestie lorem nulla sit amet dolor.

> error "The information header"
> [Premonition](https://github.com/lazee/premonition) allows you to add
>
> * Lists
> * like this
>
> Use *formatting* and add code blocks.
>
> ~~~~
> Isn't that sweet?
> ~~~~~
> Anything you can do in Markdown, you can do here. Expect from embeds Premonition boxes ;)

result:

Isn't that sweet?

Foot note

code:

Some text[^1].

Some other text[^2].

The identifier in the square brackets does not have to be numeric[^my_footnote].

[^1]: Some footnote.
[^2]: Other footnote.
[^my_footnote]: This also works fine.

result:

Some text¹.

Some other text².

The identifier in the square brackets does not have to be numeric³.

Edit