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)

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:

Polygon Xtrada 6 (2018)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:

PREMONITION ERROR: Invalid box type

You have specified an invalid box type "foo". You can customize your own box types in `_config.yml`. See documentation for more help.

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.

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.

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.

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.

-- Mark Twain

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.

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.

The information header

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 ;)

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 text1.

Some other text2.

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

  1. Some footnote. 

  2. Other footnote. 

  3. This also works fine. 

Edit