shortcodes.md

title	description	date	thumbnail	author	draft
Shortcodes	Danh sách custom shortcodes.	2018-12-28 13:15:32 +0700	/img/posts/default-thumb-1200-630.png	name github 12bit Team 12bitvn	false

Bên cạnh những shortcode đã được tích hợp sẵn trong Hugo, tụi mình còn build thêm một số shortcode để phục vụ cho việc thể hiện nội dung bài viết được rõ ràng và sinh động hơn.

CodePen

{{</* codepen username pen_id */>}}

Ví dụ

{{</* codepen tatthien LgMKpm */>}}

{{}}

Alert box

Thay vì dùng {{</* */>}} chúng ta sẽ dùng {{%/* */%}} để có thể sử dụng Markdown bên trong shortcode.

{{%/* alert type */%}}
Nội dung bên trong. **Tự tin dùng markdown đi các bạn!**
{{%/* /alert */%}}

Success

{{%/* alert success */%}}
Chúc mừng! **bạn đã được tăng lương**.
{{%/* /alert */%}}

{{% alert success %}} Chúc mừng! bạn đã được tăng lương. {{% /alert %}}

Warning

{{%/* alert warning */%}}
Chú ý ngã 4
{{%/* /alert */%}}

{{% alert warning %}} Chú ý ngã 4 {{% /alert %}}

Danger

{{%/* alert danger */%}}
Xin đừng hút thuốc
{{%/* /alert */%}}

{{% alert danger %}} Xin đừng hút thuốc {{% /alert %}}

Info

{{%/* alert info */%}}
https://12bit.vn là nơi chia sẻ kiến thức lập trình web.
{{%/* /alert */%}}

{{% alert info %}} https://12bit.vn là nơi chia sẻ kiến thức lập trình web. {{% /alert %}}

Runkit

{{%/* runkit unique-id */%}}
your code block with ``` code and ```
{{%/* /runkit */%}}

{{% runkit abc %}}

const object1 = {};
Reflect.set(object1, 'property1', 42);

console.log(object1.property1);
// expected output: 42

const array1 = ['duck', 'duck', 'duck'];
Reflect.set(array1, 2, 'goose');

console.log(array1[2]);
// expected output: "goose"

{{% /runkit %}}

caniuse

{{</* caniuse feature="proxy" */>}}

{{< caniuse feature="proxy" >}}

mermaid

{{</* mermaid */>}}
graph TB
    c1-->a2
    subgraph one
    a1-->a2
    end
    subgraph two
    b1-->b2
    end
    subgraph three
    c1-->c2
    end
{{</* /mermaid */>}}

{{< mermaid >}} graph TB c1-->a2 subgraph one a1-->a2 end subgraph two b1-->b2 end subgraph three c1-->c2 end {{< /mermaid >}}

image-zoom

{{</* zoom-img src="/img/posts/default-thumb-1200-630.png" */>}}

{{< zoom-img src="/img/posts/default-thumb-1200-630.png" >}}

oembed

{{</* oembed url="https://open.spotify.com/playlist/37i9dQZEVXbc3uyDjJcA7l" title="ahhi" */>}}

{{< oembed url="https://open.spotify.com/playlist/37i9dQZEVXbc3uyDjJcA7l" title="ahhi">}}