asciinema di jekyll

1 menit saja

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)

Tinggalkan komentar