Install the plugin

Add jekyll-tabs in Gemfile

group :jekyll_plugins do
  # ... other gems
  gem "jekyll-tabs"
end

Add jekyll-tabs in _config.yaml

# Plug-ins
plugins:
    # ... other plugins
    - jekyll-tabs

Modify docker-compose.yaml to build your own version. For example, your name as foo, and al-folio version is v0.10.1.

version: "3"
# this file uses prebuilt image in dockerhub
services:
    jekyll:
        image: foo/al-folio:v0.10.1
        # ...

After that, build your own docker image and push to docker hub.

Include the javascript

Copy the content of this file in your public folder (for example assets/js/tabs.js)

<!DOCTYPE html>
<html lang="en-us">
    <head>
        ...
    </head>
    <body>
        <script src="/assets/js/tabs.js"></script>
    </body>
</html>

Add tabs style

Copy the content of this file in your public folder (for example assets/css/tabs.css)

<!DOCTYPE html>
<html lang="en-us">
    <head>
        ...
        <link rel="stylesheet" href="/assets/css/custom.css" />
    </head>
    <body>
        ....
    </body>
</html>

Demo

  • print("Hello World!")

  • package main

import "fmt"

func main() {
    fmt.Println("Hello World!")
}

  • fn main() {
    println!("Hello World!");
}

code tabs demo

Reference