Testing Code Tabs

This page displays how my Code Tabs plugin, jdvp-codetabs-commonmark, displays code blocks. See the linked project's README for installation instructions. This page will serve as a demo of the project's functionality since it can't be shown in the pure markdown README.

This project was largely spurred by my desire to include tabbed code switchers in my articles since I wanted to show examples in multiple languages - usually Java and Kotlin - in the same article in order to help the largest audience. I really liked the code tabs on the Android Developer site and they seemed to be the most aesthetically pleasing option that I had seen. An example from the android developer documentation can be seen in this documentation on manual dependency injection.

I didn't see anything that really matched what I was looking for so I decided to try building it myself. There was a lot I had to learn from css variables for theming to jekyll plugin hooks but that's a story for another time.

The main feature of this project is that it allows the addition of tabs to code blocks to concisely show multiple snippets of code. It also allows the ability to copy code blocks (which is opt-in on a per code block basis) and ability to switch between light and dark mode inside the code blocks. Switching between light and dark mode is currently always enabled but I want to make it a configuration option to allow either hard-coding or auto (user selection) mode.

Single code block

A single code block can be displayed without tabs. To do so, ensure the code block is isolated in markdown and doesn't have anything after the language directive.

```md
    For example, this is a code block
```

Single code block with tab as labels

A single code block can use a tab as a label. To do this, include the desired text in the code fence after the language as shown in the example below.

Copy-enabled code blocks

A copy button can be added to any code block (even those without tabs) by adding the string codeCopyEnabled to the code fence. This string will be removed so will never be part of your label. Unfortunately, this means you can't have a label with that text! The icon appears on the upper right-hand corner as shown below.

Example without tabs:

```md codeCopyEnabled
    For example, this is a code block
```

Multiple code tabs

To use multiple code tabs, just put code blocks next to each other in your markdown. If you create code tabs this, way you don't necessarily need to include custom names for each tab as above. If you don't include a name after the language in the code fence, it will just take the language name from the fence itself. In the example below "Kotlin" and "Markdown Example" are using custom tab names but "java" is not.

It's also worth noting that you can include a copy option on individual code blocks inside of a tabbed container without having to allow copying on all of them. In the example below, only the java section has a copy button (although a user could still select the text and copy/paste that way).

Multiple code tab components on a single page

If you have multiple code tab components on a single page, language selections on one can change another. There are some rules to this behavior:

Code block with line numbers

At this time, this feature does NOT work with codeblocks with line numbers generated with the highlight liquid tag.

In case you don't know, liquid codeblocks look like this:

{% highlight kotlin linenos %}
data class Example {
    val text: String
}
{% endhighlight %} 

Sample showing current behavior:

1
2
3
data class Example {
    val text: String
}
1
2
3
4
5
6
7
8
9
10
11
class Example {
    String text;
    
    Example(String text) {
        this.text = text;
    }
    
    String getText() {
        return text;
    }
 }

Other References

Filed under:

Comments

There are currently no comments on this article, be the first to add one below

Add a Comment

Note that I may remove comments for any reason, so try to be civil. If you are looking for a response to your comment, either leave your email address or check back on this page periodically.

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.