

Code Tabs Extension Documentation¶

Migrating from an older version? Check out our Release notes.

Overview¶

Code Tabs is an extension that generates a HTML structure for consecutive fenced code blocks content. It provides four features:

The ability to choose the HTML template.
The ability to specify custom label for a tab.
The ability to enable tab generation for a single fenced code block.
The ability to specify the css class for the tab active state.

Example:

``` c
printf("HELLO WORLD!");
```

``` java 
System.out.println("HELLO WORLD!");
```

``` python
print("HELLO WORLD!")
```

Result:

C

printf("HELLO WORLD!");

Java

System.out.println("HELLO WORLD!");

Python

print("HELLO WORLD!")

Installation¶

Installation is easy with pip:

pip install markdown-fenced-code-tabs

If you want to manually install it, run python setup.py build and python setup.py install. You should be able to access the extensions in Python Markdown.

If you would like to modify the code, you can install it via: python setup.py develop. This method will allow you to instantly see your changes without reinstalling.

Usage¶

In order to enable the extension just add it to your markdown_extensions list:

markdown_extensions:
  - markdown_fenced_code_tabs

This will add the extension with the default options. To configure them:

markdown_extensions:
  - markdown_fenced_code_tabs:
      single_block_as_tab: False
      active_class: 'active'
      template: 'default'

Important

If you choose the default template you wiLl have to add the needed css as explained in the templates documentation.

Label customization¶

By default the tab label is the language of the code block but it can be customized by passing the title to the fct_label argument placed right after the language identifier.

Example:

``` python fct_label="Python 2"
print "Bonjour" 
```

``` python fct_label="Python 3"
print("Bonjour")
```

Result:

Python 2

print "Bonjour"

Python 3

print("Bonjour")

Options¶

The following options are provided to configure the output:

Option	Type	Default	Description
`single_block_as_tab`	bool	`False`	Renders a single fenced code block as a tab.
`active_class`	string	`active`	Class name is applied to the active tab.
`template`	string	`default`	A string that specifies which HTML template should be used `default`, `bootstrap3`, or `bootstrap4`.