Tabbed Code Blocks

[jdgamble555]

It would be cool to be able to have tabbed code blocks where you can select different languages.

https://rdmd.readme.io/docs/code-blocks

That way you could do two code blocks in a row, and it tabs them.

https://firebase.google.com/docs/firestore/query-data/order-limit-data#web-version-9

Thank!

J

[fynnfluegge]

Hi @jdgamble555, I guess this is out of scope of this project and maybe a suggestion for a plugin in prism. But I use a very straight forward workaround for this as you can see here.

The basic idea is to create a hook function and pass it as a complete hook to Prism with

Prism.hooks.add('complete', hook);

My function to create a tab pane is

// check if element is inside a tabbed element
if (env.element.parentElement.parentNode.classList.contains("tabbed")) {
    const elementId = Math.random().toString(36);
    let firstTab = false;
    // check if tab header already exists
    if (env.element.parentElement.parentNode.previousSibling == undefined || !env.element.parentElement.parentNode.previousSibling.classList?.contains("tab")) {
        firstTab = true;
        // create tab header
        var header = document.createElement('div');    
        header.classList.add("tab");
        env.element.parentElement.parentNode.parentNode.insertBefore(header, env.element.parentElement.parentNode);
    }

    // create tab button
    var tabButton = document.createElement('button');
    tabButton.innerHTML = env.language;
    tabButton.classList.add("tablinks", env.language);

    // set button background color from prism theme
    var theme = getComputedStyle(env.element.parentElement)
    tabButton.style.backgroundColor = theme.backgroundColor;
    tabButton.style.color = theme.color;

    // add onclick event to tab button
    tabButton.onclick = function(event) { openTab(event, elementId); };

    // add tab button to tab header
    env.element.parentElement.parentNode.previousSibling.appendChild(tabButton);

    // if element is inside a tabbed element, add tabcontent class and id
    wrapper.classList.add("tabcontent");
    wrapper.setAttribute("id", elementId);
    // if element is the first tab, show it
    if (firstTab) {
        wrapper.style.display = "block";
    } else {
        tabButton.classList.add("inactive");
    }
    // set border top radius of element to 0
    env.element.parentElement.style.borderTopLeftRadius = "0";
    env.element.parentElement.style.borderTopRightRadius = "0";
    env.element.parentElement.style.marginTop = "0";
}

Note that I use a wrapper tag around the prism code, hence you need to call this

wrapper.classList.add("tabcontent");
wrapper.setAttribute("id", elementId);

on the pre tag element generated by Prism.

How to use it in your markdown code:

<div class"tabbed">
                     <-- this empty line is important
code-block 1
code block 2
</div>

Full source code of my workaround it you can find here prism-custom.js. Hope that it helps 🙌

[jfcere]

Now that ngx-markdown supports marked extensions, that could probably be done with a custom implementation... I'm surprised it has not been implemented yet.