Add the support for tabbed code blocks

Plugins ideas
1

Use case or problem

Sometimes, when we write developer notes and add code blocks, we may write in multiple programming languages. For eg. we can write one in Java, Python, and Rust. Then we can write 3 separate code blocks, but they are actually tied together. For eg. take a look at the snapshot below:

image
image2038×236 19.3 KB

This makes code more readable and focussed.

Proposed solution

Is there a way to bring the tabs into the code block through some library out of the box.

Current workaround (optional)

Currently, I just paste code in different languages one after the other with the h4/h5 headings.

Related feature requests (optional)

1 Like
2

Do you know anyblock?

1 Like
3

Yes, it unblocks for now :slight_smile: Thanks for sharing. Writing codes in a list is a bit of a problem, but good that solution exists for other text-based inputs. Will wait for some proper solutions in the coming days. Thanks :raised_hands:

4

This is a callout based solution
If you’re familiar with markdown attributes, maybe you can can use them together.

This is a case of CSS supporting markdown attributes

5

You can write in the middle of the header, not necessarily in the list of code blocks. AnyBlock supports not only list selectors, but also title selectors. In version V3, markdown-it’s ‘:::’ selector is even supported.

If you use title selector, just like this

## install

[title2tab]

### Linux

...

### Windows

...

### MacOS

...

## Other……

If you use mdit-container-selector, just like this


other content

::: tabs

@tab Linux

...

@tab Windows

...

@tab MacOS

...

:::

other content