Jekyll markdown feature (self note)
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}
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:
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.
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.
Discussion and feedback

This work is licensed under a Creative Commons Attribution-NonCommercial-NoDerivatives 4.0 International License.