Guide to implement Multi-tab Code Snippets in Jekyll 🧪

Written by - Millan Kaul

This article demonstrates how to implement clean, multi-tab code snippets or pseudocode on a static website like Jekyll hosted on GitHub Pages. Let me explain how I built it using my agent, link to the source files, and show you how to easily reuse this dynamic setup in your own blog.

---

Live Demonstration

Here is the multi-tab code snippets component in action. Select a tab to view the code snippet formatted for that environment:

---

How It Works Under the Hood

The component is split into three modular pieces:

1. Styles: Scoped CSS managing layouts, active tabs underlines, and light-theme syntax colors.
2. Javascript Engine: A lightweight controller that creates elements, highlights syntax dynamically, and handles keyboard arrow key navigation.
3. Jekyll Layout: A layout file linking CSS and JS assets automatically.

Source Files

You can view the source files directly on GitHub (opens in a new tab):

• assets/css/code-tabs.css
• assets/js/code-tabs.js
• _layouts/single-tabs.html

---

Add Code Tabs to Your Jekyll Posts

To use this code tab system in any post:

Step 1: Set the Layout

Configure your post frontmatter to inherit the single-tabs layout:

---
layout: single-tabs
title: "Your Post Title"
---

Step 2: Add a Target Container

Place a div element with a unique ID inside your markdown article:

IMP: This must be a unique ID in your entire blog

<div id="code-tabs-202X-XX-XX"></div>

Step 3: Initialize with JavaScript

Add the initialization script directly below it:

<script>
  document.addEventListener('DOMContentLoaded', () => {
    createCodeTabs('code-tabs-202X-XX-XX', [
      { language: 'cURL', code: 'curl http://localhost:11434/' },
      { language: 'Python', code: `from openai import`},
      { language: 'JavaScript', code: 'import openai' }
    ]);
  });
</script>

Thats it, happy coding!