question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

PyMdown Tabbed not working with code blocks

See original GitHub issue

I checked that…

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

Description

When I implement tabs, as in the documentation, it creates the tabs but does not correctly format the code in them.

Documentation example: https://squidfunk.github.io/mkdocs-material/extensions/codehilite/#grouping-code-blocks

My markdown:

=== "Pandas"
    ```python
    import pandas as pd
    import numpy as np
    import cape

    df = pd.DataFrame(np.ones(5,), columns=["value"])
    policy = cape.parse_policy("test_policy.yaml")
    df = cape.apply_policies([policy], "transactions", df)

    print(df.head())
    ```

=== "Spark"
    ```python
    ```

Expected behavior

Tabs with code blocks, correctly highlighted

Actual behavior

Tabs with everything within them treated as plain text: image

Tried copying the docs exactly (copy-pasted), same issue: image

Note that other markdown is ok (for example, if you write some text and make it bold, that formats correctly)

Steps to reproduce the bug

  1. Add pymdownx.tabbed and codehilite to your markdown_extensions
  2. Create a .md file using the tabbed syntax in the docs
  3. Place code blocks in the tabs
  4. Run mkdocs serve and preview in browser

Package versions

  • Python: 3.8.3
  • MkDocs: 1.1.2
  • Material: 5.3.0
  • pymdown-extensions 7.1

Project configuration

The extensions section:

markdown_extensions:
    - admonition
    - codehilite
    - pymdownx.tabbed
    - toc:
        permalink: "#"

System information

  • OS: Windows 10
  • Browser: Chrome latest

Issue Analytics

  • State:closed
  • Created 3 years ago
  • Comments:7 (5 by maintainers)

github_iconTop GitHub Comments

6reactions
Sieboldianuscommented, Mar 4, 2022

Just a note, in the newest mkdocs Material release (8.2.4), it is also necessary to enable “alternate style” to use ===

markdown_extensions:
  - pymdownx.superfences
  - pymdownx.tabbed:
      alternate_style: true
0reactions
facelessusercommented, Aug 6, 2020

Yeah, SuperFences is not deprecated at all, but the old tab feature of SuperFences is as we now have the Tabbed extension for general purpose tabs as opposed to code specific tabs.

Read more comments on GitHub >

github_iconTop Results From Across the Web

How to Create Tabbed Code Blocks in Mkdocs or Sphinx?
1. Can't say for sure about Sphinx (did you check their plugins), but MkDocs does not offer such a feature out of the...
Read more >
Tabbed - PyMdown Extensions Documentation - GitHub Pages
Tabbed Code Setup. This is a very basic setup. Tabs can be styled in different ways, but this shows how to get it...
Read more >
CodeHilite - ML-Hispano @ Github
This will only work for code blocks that are indented using four spaces, not for ... Extensions package adds support for grouping code...
Read more >
mkdocs-techdocs-core - Python Package Health Analysis - Snyk
Bumped pymdown-extensions to 9.3 and enabled pygments_lang_class to allow easier targeting of codeblocks by language in TechDocs Addons.
Read more >
mkdocs-techdocs-core - PyPI
pymdownx.tabbed is added to support tabs to group markdown content, such as codeblocks. "PyMdown Extensions includes three extensions that ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found