Jupyter-book: Code tabs from sphinx-tabs don't render

[foster999]

Describe the bug
When using code-tabs from the sphinx-tabs package:

• reStructuredText for the tabs is generated and displayed, but is not rendered
• the code is displayed within a highlight box but without the appropriate syntax highlighting

The tabs are rendered as:

.. tab:: {“tab_id”: “UHl0aG9u”, “classes”: [“code-tab”]} Python

.. code-block:: py

# Code is displayed within a highlight box here

I doubt that this is related, but there is 1 warning when building the minimal example book with or without tabs:
WARNING: unsupported theme option 'number_toc_sections' given

See this example repo.

To Reproduce

1. Add the extension:

sphinx:
  extra_extensions:
    - sphinx_tabs.tabs

1. Include code-tab syntax in a .md file within the book. For example:

` {tabs}

```{code-tab} py

def main():
    return

```{code-tab} c
int main(const int argc, const char **argv) {
    return 0;
    }

````
`````

1. Build the book using jb build .

Expected behavior
I expect this to render as grouped tabs, with the code syntax highlighted as appropriate.

Environment (please complete the following information):

• Python Version: 3.7.7
  
  
  
  • sphinx-tabs: 1.1.13
  
  
  • Jupyter Book: 0.7.1
  
  
  • MyST-NB: 0.8.4
  
  
  • Sphinx Book Theme: 0.0.31
  
  
  • MyST-Parser: 0.9.0
  
  
  • Jupyter-Cache: 0.2.2
  
  

[choldgraf]

Hmmm - I have found sphinx-tabs to be a little bit unpredictable in similar kinds of ways. This sounds trivial, but could you play around with putting a space before the content of the code tabs? That has resolved similar issues for me before

[foster999]

Thanks for the quick response! Good to know that this feature of sphinx-tabs is supported and that the issue is likely with the extension. Have had similar issues with spacing around rST directives before, usually my fault - will give it a try tomorrow

[foster999]

Afraid I haven't had any luck adding space around tabs or their contents. The same syntax is working fine for basic tabs, but doesn't work for group- or code-tabs using the same format:

``````
Basic tabs

````{tabs}

```{tab} Apples

Apples are green, or sometimes red.

```{tab} Pears

Pears are green.

```{tab} Pears

Oranges are Oranges.

````

Grouped tabs

````{tabs}

```{group-tab} Linux

Linux Line 1

```{group-tab} Mac OSX

Mac OSX Line 1

````


````{tabs}

```{group-tab} Linux

Linux Line 2

```{group-tab} Mac OSX

Mac OSX Line 2

````


Code tabs


````{tabs}

```{code-tab} py

def main():
    return

```{code-tab} c

int main(const int argc, const char **argv) {
return 0;
}

```
````
``````

This results in:

Looking at the HTML, the tabs directive is correctly producing the tabs div, but the individual tab directives are not being evaluated.

Is it possible to output the MyST, before it's converted to HTML? So that I check which difference between the basic and grouped/code tabs is stopping them from being converted.

[choldgraf]

Hmmm - ah it looks like what's happened is that sphinx-tabs has actually hard-coded reStructuredText into its library, so it's generating tab rST even though the parser is for markdown. So I think your options are either:

1. Write your page in reStructuredText when you want to use code-tab
2. Wait for rST syntax to be allowed within MyST Markdown (see https://github.com/executablebooks/MyST-Parser/issues/164)
3. Get the author of that package to stop hard-coding reStructuredText in the package so it'll work with markdown

[foster999]

Ah that makes sense! Odd that the standard tabs do supportMarkdown, but not the grouped versions.

Thanks for this. 1 works perfectly, I look forward to 2, and will follow up 3 on sphinx-tabs.

[foster999]

Regarding 3 above, would you know of any examples where a Directive subclass applies another existing directive as part of it's implementation?

As you suggested, the rST for the code-block directive is hard-coded inside the code-tab directive method. It then relies on nested parsing to parse this, thus it fails when using a MyST parser. I'm not clear on how this could be adjusted to effectively call the existing code-block directive (as a child node), in a parser-independent fashion, and pass any options through.

It seems like something that would be reasonably common in extensions, unless it's expected that users nest the directives themselves.

[choldgraf]

hmmm - here's one example: https://github.com/executablebooks/sphinx-book-theme/blob/master/sphinx_book_theme/__init__.py#L286

it's a "Margin" directive that inherits from "Sidebar" and calls it as a part of its functionality. Does that help?

[foster999]

Exactly what I was looking for - thanks very much for your help with all of this!