asciinema di jekyll
Plugins untuk menampilkan asciinema
Pengantar
asciinema.org cukup menarik untuk membiat video mode ASCII untuk membuat tutorial cara pakai, atau tujuan lainnya berdasarkan aktivitas yang dilakukan di console.
Nah, sekarang mari kita test, tampilkan asciinema di jekyll..
Ada 2 cara :
- copas code yang diberikan oleh asciinema.org
- atau pakai plugins jekyll berikut ini
Plugins
Ini saya ambil plugins dari SANREMEMBER dan sudah saya sesuaikan, yakni dihilangkan tag <center> nya karena tak cocok dipakai di themes jekyll yang ini.
Cara Pakai
Menampilkan playernya:
{% asciinema_play ASCIINEMA_ID %}
Menampilkan screenshoot:
{% asciinema_img ASCIINEMA_ID %}
Contoh ini saya ambil dari tutorialnya si merbot aja.
{% asciinema_play 80206 %}
Hasil
Cara Pasang
Berikut ini source code aslinya yang belum saya sesuaikan.
Copy-kan isi file asciinema.rb dalam folder _plugins :
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
# coding: utf-8
# Jekyll Asciinema - The lazy way to embed Asciinema in Jekyll
module Jekyll
class Asciinema_player < Liquid::Tag
@id = nil
PLAY_ID = /(\S+)/i
def initialize(tag_name, markup, tokens)
super
if markup =~ PLAY_ID
@id = $1
end
end
def render(context)
source = "<center>"
source += "<script type=\"text/javascript\" src=\"https://asciinema.org/a/#{@id}.js\" id=\"asciicast-#{@id}\" async></script>"
source += "</center>"
source
end
end
class Asciinema_image < Liquid::Tag
@id = nil
IMG_ID = /(\S+)/i
def initialize(tag_name, markup, tokens)
super
if markup =~ IMG_ID
@id = $1
end
end
def render(context)
source = "<a href=\"https://asciinema.org/a/#{@id}\" target=\"_blank\"><img src=\"https://asciinema.org/a/#{@id}.png\"></a>"
source
end
end
end
Liquid::Template.register_tag('asciinema_play', Jekyll::Asciinema_player)
Liquid::Template.register_tag('asciinema_img', Jekyll::Asciinema_image)