pymdownx.tabbed is not working

I checked that…

• [Y] … the documentation does not mention anything about my problem
• [Y] … the problem doesn’t occur with the default MkDocs template
• [Y] … the problem is not in any of my customizations (CSS, JS, template)
• [Y] … there are no open or closed issues that are related to my problem

Description

Trying to display tabbed code blocks. Here is the sample code block

=== “C”

``` c
#include <stdio.h>

int main(void) {
  printf("Hello world!\n");
  return 0;
}
```

=== “C++”

``` c++
#include <iostream>

int main(void) {
  std::cout << "Hello world!" << std::endl;
  return 0;
}
```

Expected behavior

See the tabbed code block

Actual behavior

Seeing code blocks vertical aligned one after another with radio button selection

Steps to reproduce the bug

1. Updated MkDocs.yaml with pymdownx.tabbed under markdown.extensions
2. Added the above code blocks
3. mkdocs build --clean and mkdocs serve

Package versions

• Python: 3.7.6
• Markdown==3.2.1
• MarkupSafe==1.1.1
• mkdocs==1.1.2
• mkdocs-material==6.0.2
• nltk==3.4.5
• Pygments==2.6.1 *.pymdown-extensions==8.0.1
• PyYAML==5.3.1
• six==1.14.0
• tornado==6.0.4
• markdown-blockdiag==0.7.0

Project configuration

The contents of your mkdocs.yml
site_name: Internal Docs
site_description: Documentation
site_author: 


theme:
  name: null
  custom_dir: 'material'
  favicon: 'images/logo-fiddler.png'
  language: en
  palette:
    primary: blue
    accent: blue
  font:
    text: Assistant
    code: Roboto Mono
  logo: "images/logo-white.png"
  feature:
    tabs: true


# UPDATE HERE FOR EACH VERSION
site_dir:
docs_dir: "docs"
use_directory_urls: true

markdown_extensions:
  - admonition
  - codehilite
  - pymdownx.tabbed
  - pymdownx.superfences
  - meta
# - def_list
  - footnotes
  - toc:
     permalink: true
  - pymdownx.arithmatex
  - pymdownx.betterem:
      smart_enable: all
  - pymdownx.caret
  - pymdownx.critic
  - pymdownx.details
  - pymdownx.emoji:
      emoji_generator: !!python/name:pymdownx.emoji.to_svg
  - pymdownx.inlinehilite
  - pymdownx.magiclink
  - pymdownx.mark
  - pymdownx.smartsymbols
  - pymdownx.tasklist:
      custom_checkbox: true
  - pymdownx.tilde
  - markdown_blockdiag

plugins:
  - search


nav:
  - index.md
  - Single Server: onebox.md
  - Cloud: basics.md
  - Components: components.md
  - Python Package: python-package.md
  - Analytics: analytics.md
  - Explain: explanation.md
  - Monitor: monitoring.md
  - Audit: audit.md
  - Tutorial: tutorial.md
  - System Requirements: system_reqs.md
  #- FAQ: faq.md
  #- Guides: guide.md

System information

• OS: Mac OS 10.15.7
• Browser: Chrome and Safari (same behavior)

[RajeshEk]

Hi Martin Thanks for pointing to the outdated config. I was able to resolve the tabbed code block issue. The reason was that had the ‘custom_dir’ was set to ‘material’ which was older version. Once I got the latest repo from git, I was able to see the tabs working. Appreciate your help. Thank You!

theme:
  name: null
  custom_dir: 'material'
  favicon: 'images/logo-fiddler.png'

[martinbira]

Are your codeblocks correctly indented? See https://squidfunk.github.io/mkdocs-material/reference/content-tabs/#grouping-code-blocks