pawamoy/markdown-exec

`source = "tabbed-right"` seems to conflict with annotations in Material

femtomc opened this issue ยท 7 comments

Describe the bug
There's really two bugs here. The first bug is that I've enabled pymdownx.tabbed but the tabs don't appear to be working when I set source="tabbed-right".

Secondly, if I have any annotations using Material -- using the tabbed option breaks them -- e.g.

Screenshots
Before tabs (here, I'm using source="console"):

image

After, with source = "tabbed-right":

image

System (please complete the following information):

  • Markdown Exec version: 1.2.0
  • Python version: 3.11
  • OS: Mac OS X

Here's my plugins and markdown_extensions:

plugins:
  - search
  - offline
  - markdown-exec
  - git-revision-date-localized:
      enable_creation_date: true
      type: date
  - mkdocstrings:
      enabled: !ENV [ENABLE_MKDOCSTRINGS, true]
      custom_templates: templates
      default_handler: python
      handlers:
        python:
          options:
            show_source: true
            show_root_heading: true

markdown_extensions:
  - attr_list
  - md_in_html
  - admonition
  - pymdownx.details
  - pymdownx.tabbed
  - pymdownx.highlight
  - pymdownx.superfences:
      custom_fences:
        - name: mermaid
          class: mermaid
          format: !!python/name:pymdownx.superfences.fence_code_format
  - pymdownx.arithmatex:
      generic: true
  - toc:
      permalink: true

Hello, thanks for the report ๐Ÿ™‚

Could you share some Markdown that replicates the issue? Use 4 backticks to write the 3-backticks code blocks ๐Ÿ˜‰

````
```python exec="1" source="console"
some python code
```
````

The actual Python code is not important, I'd just like to see the markup with both executed blocks and annotations, and the thing that inlines them (left block + right block).

Yes! Will share in a moment.

@pawamoy

Edit: see furthest post below for complete example.

So this maybe breaks inside the div, so let me try outside too.

Edit: it still breaks outside of div, for example:

```python exec="true" source="tabbed-right"
print(5 + 5)
```

image

The annotations are unfolded, and the tabs aren't inserted.

@pawamoy Sorry, here's a complete MWE example in Markdown.

# MWE

This is something (1).
{ .annotate }

1.  By design, blah blah blah.

<div class="grid cards" markdown>

-   __One block of code__

    ```python exec="true" source="tabbed-right"
    print(5 + 5)
    ```

-   __Another block of code__
    
    ```python exec="true" source="tabbed-right"
    print(5 + 5)
    ```
</div>

The result:
image

Switching source="tabbed-right" to "console":
image

Unfortunately (or fortunately ๐Ÿ˜€) I cannot replicate the issue.

Given this markup:

## MWE

This is something (1).
{ .annotate }

1.  By design, blah blah blah.

<div class="grid cards" markdown>

-   __One block of code__

    ```python exec="true" source="tabbed-right"
    print(5 + 5)
    ```

-   __Another block of code__
    
    ```python exec="true" source="tabbed-right"
    print(5 + 5)
    ```

</div>

...and this MkDocs configuration:

markdown_extensions:
- md_in_html
- attr_list
- pymdownx.superfences
- pymdownx.tabbed

...with Material for MkDocs Insiders installed in a Python 3.10 environment, everything renders fine, with both the console and tabbed-right styles for including the source:

tabbed


Can you check your configuration to make sure all the necessary Markdown extensions are loaded? Also, make sure to add a blank line after/before any <div>/</div> containing Markdown contents.

Closing for now, let me know if you still have the issue!