yacir / markdown-fenced-code-tabs Goto Github PK

HI .. I'm far from an mkdocs expert and not a programmer either! I just about know enough to do my documentation. I'd like to implement these code tabs but I can't get them to display correctly. I've probably missed something, so I'd be really grateful for your assistance. I'm using material theme. I've copied the code-tab.css as you suggested in another query. This is in my mkdocs.yml:

#Extensions
markdown_extensions:
- extra
- toc
- nl2br
- codehilite(css_class=highlight,use_pygments=True)
- admonition
- markdown_fenced_code_tabs:
single_block_as_tab: True

extra_css:
- css/extra.css
- css/highlight-fix.css
- css/pygments-custom.css
- css/code-tabs.css

Thank you so much in advance.

When building docs using:

single_block_as_tab: True

I get:

Traceback (most recent call last):
  File "C:\Python27\lib\runpy.py", line 162, in _run_module_as_main
    "__main__", fname, loader, pkg_name)
  File "C:\Python27\lib\runpy.py", line 72, in _run_code
    exec code in run_globals
  File "C:\Python27\lib\site-packages\mkdocs\__main__.py", line 228, in <module>
    cli()
  File "C:\Python27\lib\site-packages\click\core.py", line 722, in __call__
    return self.main(*args, **kwargs)
  File "C:\Python27\lib\site-packages\click\core.py", line 697, in main
    rv = self.invoke(ctx)
  File "C:\Python27\lib\site-packages\click\core.py", line 1066, in invoke
    return _process_result(sub_ctx.command.invoke(sub_ctx))
  File "C:\Python27\lib\site-packages\click\core.py", line 895, in invoke
    return ctx.invoke(self.callback, **ctx.params)
  File "C:\Python27\lib\site-packages\click\core.py", line 535, in invoke
    return callback(*args, **kwargs)
  File "C:\Python27\lib\site-packages\mkdocs\__main__.py", line 156, in build_command
    ), dirty=not clean)
  File "C:\Python27\lib\site-packages\mkdocs\commands\build.py", line 379, in build
    build_pages(config, dirty=dirty)
  File "C:\Python27\lib\site-packages\mkdocs\commands\build.py", line 332, in build_pages
    dump_json)
  File "C:\Python27\lib\site-packages\mkdocs\commands\build.py", line 188, in _build_page
    site_navigation=site_navigation
  File "C:\Python27\lib\site-packages\mkdocs\commands\build.py", line 59, in convert_markdown
    extension_configs=config['mdx_configs']
  File "C:\Python27\lib\site-packages\mkdocs\utils\__init__.py", line 366, in convert_markdown
    html_content = md.convert(markdown_source)
  File "C:\Python27\lib\site-packages\markdown\__init__.py", line 368, in convert
    self.lines = prep.run(self.lines)
  File "C:\Python27\lib\site-packages\markdown_fenced_code_tabs.py", line 236, in run
    return self._populate_tabs(text).split('\n')
  File "C:\Python27\lib\site-packages\markdown_fenced_code_tabs.py", line 218, in _populate_tabs
    tab_html = str(tab_set)
  File "C:\Python27\lib\site-packages\markdown_fenced_code_tabs.py", line 297, in __str__
    tab_set_id = self._get_tab_id(tab)
  File "C:\Python27\lib\site-packages\markdown_fenced_code_tabs.py", line 283, in _get_tab_id
    ) for _ in range(self.RANDOM_ID_CHAR_LENGTH)
  File "C:\Python27\lib\site-packages\markdown_fenced_code_tabs.py", line 283, in <genexpr>
    ) for _ in range(self.RANDOM_ID_CHAR_LENGTH)
NameError: global name 'string' is not defined

I commented in a closed issue so I thought I would create a new one to ask for some help.

I am a newbie to using Mkdocs and I was told it was simple as adding

    blah blah

  yada yada

to make tabs work. Never that simple ;-) Note the above has three backticks then android followed by tab="Tabname", then it is duplicated for iOS .

I downloaded markdown-fenced-code-tabs and realize I need to add some CSS or Javascript code but I don't know where. Any help or advice is appreciated. I am not a developer but a documentation person at a new job.

The first tab isn't active by default. It should be !

Current:

Expectation result:

Reproduce steps

1. clone this repo

$ git clone https://github.com/yacir/markdown-fenced-code-tabs.git

2. mkdocs serve

$ cd docs/
$ mkdocs serve

3. error

INFO    -  Building documentation...
WARNING -  Config value: 'pages'. Warning: The 'pages' configuration option has been deprecated and will be removed in a future release of MkDocs. Use 'nav' instead.
INFO    -  Cleaning site directory
ERROR   -  Error reading page 'index.md': store() got an unexpected keyword argument 'safe'
Traceback (most recent call last):
  File "/usr/local/bin/mkdocs", line 11, in <module>
    sys.exit(cli())
  File "/usr/local/lib/python2.7/site-packages/click/core.py", line 764, in __call__
    return self.main(*args, **kwargs)
  File "/usr/local/lib/python2.7/site-packages/click/core.py", line 717, in main
    rv = self.invoke(ctx)
  File "/usr/local/lib/python2.7/site-packages/click/core.py", line 1137, in invoke
    return _process_result(sub_ctx.command.invoke(sub_ctx))
  File "/usr/local/lib/python2.7/site-packages/click/core.py", line 956, in invoke
    return ctx.invoke(self.callback, **ctx.params)
  File "/usr/local/lib/python2.7/site-packages/click/core.py", line 555, in invoke
    return callback(*args, **kwargs)
  File "/usr/local/lib/python2.7/site-packages/mkdocs/__main__.py", line 134, in serve_command
    livereload=livereload
  File "/usr/local/lib/python2.7/site-packages/mkdocs/commands/serve.py", line 119, in serve
    config = builder()
  File "/usr/local/lib/python2.7/site-packages/mkdocs/commands/serve.py", line 114, in builder
    build(config, live_server=live_server, dirty=dirty)
  File "/usr/local/lib/python2.7/site-packages/mkdocs/commands/build.py", line 274, in build
    _populate_page(file.page, config, files, dirty)
  File "/usr/local/lib/python2.7/site-packages/mkdocs/commands/build.py", line 177, in _populate_page
    page.render(config, files)
  File "/usr/local/lib/python2.7/site-packages/mkdocs/structure/pages.py", line 184, in render
    self.content = md.convert(self.markdown)
  File "/usr/local/lib/python2.7/site-packages/markdown/core.py", line 265, in convert
    self.lines = prep.run(self.lines)
  File "/usr/local/lib/python2.7/site-packages/markdown_fenced_code_tabs/__init__.py", line 204, in run
    return self._render_code_tabs(parsed_lines).split('\n')
  File "/usr/local/lib/python2.7/site-packages/markdown_fenced_code_tabs/__init__.py", line 152, in _render_code_tabs
    transformed_lines += '\n' + self.markdown.htmlStash.store(group_html, safe=True) + '\n\n'
TypeError: store() got an unexpected keyword argument 'safe'

Environment

• OS: Mac OS Mojave

$  mkdocs --version
mkdocs, version 1.0.4 from /usr/local/lib/python2.7/site-packages/mkdocs (Python 2.7)

Use Case

As a user of a specific language, once I select the tab displaying code in my language I want to see all code examples display my language automatically so that I can learn faster, or share a link to a colleague that will open to that tab.

Acceptance Criteria

1. Browsing to /getting-started/hello-world/#csharp should make all tabs active where tab.fct_label equals csharp.
2. Browsing to /getting-started/hello-world/#csharp,docker should make all tabs on that page active where tab.fct_label equals csharp or docker.
3. When two or more tabs in the same tab set satisfy the condition described in (2), use the first match to determine the active tab such that the behavior is functionally equivalent to (1).

I'm trying to use this extension with a project which uses Material UI via mkdocs-material. It looks like the HTML generated for use with Twitter Bootstrap to create code tabs isn't the same rough layout as what the HTML with Material UI would expect. What's the best way to make changes?

Should I fork the repo and would the changes be accepted upstream with some kind of flag to switch themes?

Using something like:

```java fct_label="One"
pubic static void oneTest();
```
```java fct_label="Two"
public static void twoTest();
```

Generates the 2 tabs but the links are the same, e.g. <a href="#tab-22-java"

Sample generated from the above:

<div class="code-nav-container">    
    <ul class="nav nav-tabs">        
        <li class="nav-item active">
            <a href="#tab-22-java" aria-controls="tab-22-java" role="tab" data-toggle="tab" data-lang="java">One</a>
        </li>        
        <li class="nav-item">
            <a href="#tab-22-java" aria-controls="tab-22-java" role="tab" data-toggle="tab" data-lang="java">Two</a>
        </li>
        
    </ul>
    
    <div class="tab-content">        
        <div role="tabpanel" class="tab-pane active" id="tab-22-java">
            <div class="codehilite" id="__code_22"><button class="md-clipboard" title="Copy to clipboard" data-clipboard-target="#__code_22 pre, #__code_22 code"><span class="md-clipboard__message"></span></button><pre><span></span><span class="n">pubic</span> <span class="kd">static</span> <span class="kt">void</span> <span class="nf">oneTest</span><span class="o">();</span>
            </pre></div>
        </div>    
        <div role="tabpanel" class="tab-pane" id="tab-22-java">
            <div class="codehilite" id="__code_23"><button class="md-clipboard" title="Copy to clipboard" data-clipboard-target="#__code_23 pre, #__code_23 code"><span class="md-clipboard__message"></span></button><pre><span></span><span class="kd">public</span> <span class="kd">static</span> <span class="kt">void</span> <span class="nf">twoTest</span><span class="o">();</span>
            </pre></div>
        </div>
    </div>
</div>

Not having any event trigger with the click on the tab to toggle displayed results. I've successfully styled and show the content hidden, but not sure how to get the active flag to toggle for each tab in the code. Any ideas?

Trying to use this extension simply for the tabs, not necessarily because I want to combine it with code highlighting. Not sure if that matters, but thought I'd mention it. I should also mention I'm using the Material theme.

This is what I have:
```redhat fct_label="RedHat"
something about redhat
```
```centos fct_label="CentOS"
something about centos
```

I'm seeing the tabs and they seem to have correctly generated links with anchor tags like:
https://....page#tab-0-redhat
https://....page#tab-0-centos

But when I click on a non-active tab it doesn't become active. I've looked at the generated HTML and it looks good:

            <div class="code-nav-container">

    <ul class="nav nav-tabs">
    <li class="nav-item active">
        <a href="#tab-0-redhat" aria-controls="tab-0-redhat" role="tab" data-toggle="tab" data-lang="redhat">RedHat</a>
    </li>

    <li class="nav-item ">
        <a href="#tab-0-centos" aria-controls="tab-0-centos" role="tab" data-toggle="tab" data-lang="centos">CentOS</a>
    </li>
    </ul>

    <div class="tab-content">

    <div role="tabpanel" class="tab-pane active" id="tab-0-redhat">
        <div class="codehilite"><pre><span></span>something about redhat</pre></div>
    </div>
    <div role="tabpanel" class="tab-pane " id="tab-0-centos">
        <div class="codehilite"><pre><span></span>something about centos</pre></div>
    </div>
    </div>
            </div>

Am I doing something wrong?

Hi,

This is a great extension, though my team is using it in a slightly different way than intended. We are using it on multiple documentation pages via mkdocs and using the code tabs as different versions of implementation details of code. So instead of putting a language after the ```, we put a version like 1_0 and so on. This way we can have lots of versions shown via different tabs. By doing this, we lose the ability to specify a language and we can't use period characters in the title. Is it possible to allow us to specify the string for the tab including the period character?

For example:

'''1.0
code
'''
'''2.0
code
'''

So that when rendered by mkdocs, we get 2 tabs (one titled 1.0 and one titled 2.0). This works similarly right now if I do (except with underscores):
'''1_0
code
'''
'''2_0
code
'''

What about something more complex like:

'''"1.0 A"
code
'''
'''"2.0 B"
code
'''

It would be great if this could make tabs with "1.0 A" and "2.0 B" as denoted by the quoted string past the ```.

Note that I've used ' instead of ` for the examples to prevent GitHub formatting the markdown.

Thanks again for the extension!

ERROR   -  Config value 'markdown_extensions': Failed to load extension 'markdown_fenced_code_tabs'.
             File "C:\Python\Python312\Lib\site-packages\mkdocs\config\config_options.py", line 1031, in run_validation
               md.registerExtensions((ext,), self.configdata)
             File "C:\Python\Python312\Lib\site-packages\markdown\core.py", line 181, in registerExtensions
               ext.extendMarkdown(self)
           TypeError: CodeTabsExtension.extendMarkdown() missing 1 required positional argument: 'md_globals'

Tested on markdown version: 3.6

markdown_fenced_code_tabs works with markdown < 3.4

md file

printf("HELLO WORLD!");

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

print("HELLO WORLD!")

yml file

markdown_extensions:

• markdown_fenced_code_tabs
• pymdownx.arithmatex
• plantuml_markdown

theme:
name: 'readthedocs'

html source

printf("HELLO WORLD!");
  | 

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

print("HELLO WORLD!")
  | 

This is working:

```typescript
// Test
```

```java
// Test
```

But when I add a markdown comment, it does not work anymore

```typescript
// Test
```
<!-- Not working when there is a comment here -->
```java
// Test
```

Can it be fix/implemented ?

I need it to make it works with Mardown Magic

Thanks!