how do I count how many languages (code) are within my block so I can render each of them in it's own tab?

[reypm]

Hi, I am trying to add syntax highlighting and also tabs support to my code blocks and this is what I have done:

import React from 'react'
import ReactMarkdown from 'react-markdown'
import rehypeExternalLinks from 'rehype-external-links'
import rehypeRaw from 'rehype-raw'
import rehypeSlug from 'rehype-slug'
import remarkBreaks from 'remark-breaks'
import remarkDirective from 'remark-directive'
import remarkFrontmatter from 'remark-frontmatter'
import remarkGfm from 'remark-gfm'
import remarkHtml from 'remark-html'
import remarkMermaid from 'remark-mermaidjs'
import remarkParse from 'remark-parse'
import shortcodePlugin from './ShortcodePlugin'
import remarkUnwrapImages from 'remark-unwrap-images'
import rehypePrismAll from "rehype-prism-plus";
import "prismjs/themes/prism.css";

const imgLinks = require("@pondorasti/remark-img-links");

const ReactMarkDown = ({content}: { content: any }) => {
    const getCode = ({inline, className, children, ...props}: any) => {
        const match = /language-(\w+)/.exec(className || "")

        return match ? (
            <pre className={className}>
            <code {...props}>{children}</code>
        </pre>
        ) : (
            <code className={className} {...props}>
                {children}
            </code>
        )
    }

    return (
        <ReactMarkdown
            remarkPlugins={[
                remarkGfm,
                [remarkFrontmatter, ['yaml', 'toml']],
                remarkHtml,
                remarkParse,
                remarkBreaks,
                [remarkMermaid],
                remarkDirective,
                shortcodePlugin,
                remarkUnwrapImages,
                [imgLinks, {absolutePath: process.env.CONTENT_DOMAIN}],
            ]}
            rehypePlugins={[
                rehypeSlug,
                rehypeExternalLinks,
                rehypeRaw,
                rehypePrismAll,
            ]}
            remarkRehypeOptions={{allowDangerousHtml: true}}
            components={{
                code: ({...props}) => {
                    return getCode(props)
                }
            }}
        >
            {content}
        </ReactMarkdown>
    )
}

export default ReactMarkDown

the syntax highlighting is working perfect but now I need to use a Tab component that can be rendered as follow:

<MyCustomTabComp
      tabs={ [ 'PHP', 'Java', 'Javascript' ] }
    >
      <div>
        <p>PHP</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
      </div>
      <div>
        <p>Java</p>
        <p>Est placerat in egestas erat imperdiet sed euismod nisi porta.</p>
      </div>
      <div>
        <p>Javascript</p>
        <p>Ipsum dolor sit amet consectetur adipiscing elit pellentesque.</p>
      </div>
</MyCustomTabComp>
)

My problem is how do I know how many different languages are contained within my code block so I can render each of them inside it is own tab?

ie:

[ChristianMurphy]

Hey @reypm! 👋
What does your content look like?
This would probably need either a remark plugin https://unifiedjs.com/learn/guide/using-plugins/ to handle this ahead of time, or use react context to hoist it at runtime https://react.dev/reference/react/createContext

[ChristianMurphy]

I'd consider looking at this from the remark plugin perspective.
A question, will there only be one tab on the page?
Or could there be multiple?

If there is only one, the code could look something like:

⚠️ I have not tested this ⚠️

import React, { useState } from 'react';
import ReactMarkdown from 'react-markdown';
import { Transformer } from 'unified';
import { Root, Code } from 'mdast';
import { Parent } from 'unist';

// ----------------------------
// Remark Plugin: Wrap Code Nodes
// ----------------------------

// Define a custom node interface for our wrapper.
interface CodeWrapper extends Parent {
  type: 'code-wrapper';
  // Array of languages found in the wrapped code nodes.
  languages: string[];
  // Data to pass to the HAST transformer.
  data?: {
    hName?: string; // Our custom element name.
    hProperties?: Record<string, unknown>; // HTML attributes.
  };
  // The children will be the original code nodes.
  children: Code[];
}

/**
 * A Remark plugin that wraps all direct code nodes in the root into a custom node.
 * The custom node uses HAST metadata with hName set to a custom web component (dash‑separated)
 * and includes a `languages` property with the languages of each code block.
 */
function remarkWrapCodeNodes(): Transformer<Root> {
  return (tree: Root) => {
    // Filter out all code nodes that are direct children of the root.
    const codeNodes: Code[] = tree.children.filter(
      (node): node is Code => node.type === 'code'
    );
    // Remove the code nodes from the original children.
    tree.children = tree.children.filter((node) => node.type !== 'code');

    if (codeNodes.length > 0) {
      // Collect languages for each code block; default to 'plaintext' if none is specified.
      const languages: string[] = codeNodes.map((node) =>
        node.lang ? node.lang : 'plaintext'
      );

      // Create a new wrapper node with custom HAST metadata.
      const wrapper: CodeWrapper = {
        type: 'code-wrapper',
        languages,
        children: codeNodes,
        data: {
          // Use a custom element name (dash‑separated to be valid as a web component).
          hName: 'remark-code-tabs',
          hProperties: {
            className: 'code-tabs',
            // Pass the languages as a custom property.
            languages,
          },
        },
      };

      // Append the new wrapper node to the root's children.
      tree.children.push(wrapper);
    }
  };
}

// ----------------------------
// React Component: CodeTabs
// ----------------------------

interface CodeTabsProps {
  // Languages that will be rendered as tab labels.
  languages?: string[];
  children: React.ReactNode;
}

const CodeTabs: React.FC<CodeTabsProps> = ({ languages = [], children }) => {
  // Convert children to an array (each expected to be a code block).
  const codeBlocks = React.Children.toArray(children);
  const [activeTab, setActiveTab] = useState(0);

  return (
    <div className="code-tabs-wrapper">
      <div className="tabs">
        {languages.map((lang, idx) => (
          <button
            key={idx}
            className={activeTab === idx ? 'active' : ''}
            onClick={() => setActiveTab(idx)}
          >
            {lang}
          </button>
        ))}
      </div>
      <div className="tab-content">{codeBlocks[activeTab]}</div>
    </div>
  );
};

// ----------------------------
// Main Component: MarkdownRenderer
// ----------------------------

const markdownContent = `
# Example with Code Tabs

Here are several code blocks:

\`\`\`javascript
console.log('Hello, JavaScript!');
\`\`\`

\`\`\`html
<div>Hello, HTML!</div>
\`\`\`

\`\`\`css
body { background-color: #282c34; }
\`\`\`

\`\`\`php
<?php echo 'Hello, PHP!'; ?>
\`\`\`

\`\`\`python
print('Hello, Python!')
\`\`\`
`;

// Map our custom element (as set by our plugin) to the CodeTabs component.
const components = {
  'remark-code-tabs': ({ node, ...props }: any) => {
    const languages = node?.data?.hProperties?.languages;
    return <CodeTabs languages={languages} {...props} />;
  },
};

const MarkdownRenderer: React.FC = () => {
  return (
    <ReactMarkdown
      remarkPlugins={[remarkWrapCodeNodes]}
      components={components}
    >
      {markdownContent}
    </ReactMarkdown>
  );
};

export default MarkdownRenderer;

[reypm]

will there only be one tab on the page?
Or could there be multiple?

I am not sure I am following your question but if you mean the tabs will appear only once then no, they should render every time a piece of markdown code is found. So for example you could have markdown for code in section A but then a section B within the same page with more code ... does this answer your question?

[ChristianMurphy]

No, I mean

```javascript
example 1
```

```typescript
example 1
```

---

```javascript
example 2
```

```typescript
example 2
```

Can multiple groupings of tabs appear in the same document?
Or would these be bundled into one group of tabs?
How do you handle content put between pieces of code? Should the split groups or become part of the group?
What if there is only one code block, should it still be wrapped in a tab.

[reypm]

Can multiple groupings of tabs appear in the same document?

yes, the same document can have multiple tabs grouping same as in your example

Or would these be bundled into one group of tabs? (btw what is the trick for displaying the above code? I tried like 10 times yesterday without success)

Well if it belongs to the same section then yes, ie:

# Section A
codeblock
javascript
typescript

# Section 2
codeblock
python
java

the above should add a tab section for Section A containing one tab for JS and another for TS and same for Section 2 one tab for Python and one for Java, all of that markdown is on the same page

How do you handle content put between pieces of code?

I am thinking to create something like [codeblock] ... code examples goes here [/codeblock] that way I do know where it starts and where it ends

Should the split groups or become part of the group?

Got lost on this one

What if there is only one code block, should it still be wrapped in a tab.

Yes, unless you tell me is less code if there is only one but if the same code will work for n or n+1 then it does not matter to me

[ChristianMurphy]

Well if it belongs to the same section then yes
I am thinking to create something like [codeblock] ... code examples goes here [/codeblock] that way I do know where it starts and where it ends

I think you are looking for remark directive https://github.com/remarkjs/remark-directive
And mark the start and end of a tab group with a container directive.
And translate that to an HTML custom element that you can have a renderer for in the components prop in react markdown

Got lost on this one

What do you want to do with text that is not code between things?
for example What should I do with text in here? below

# Section A

::: code-tabs {tabs="JavaScript, TypeScript"}
```javascript
console.log("Hello, JavaScript!");
```

What should I do with text in here?

```typescript
console.log("Hello, TypeScript!");
```
:::

⚠️ not tested, just a gist of an idea

import React, { useState } from 'react';
import ReactMarkdown from 'react-markdown';
import remarkDirective from 'remark-directive';
import { Transformer } from 'unified';
import { Root } from 'mdast';
import visit from 'unist-util-visit';
import type { ContainerDirective } from 'mdast-util-directive';

// --------------------------------------------------------------------------
// Remark Plugin: remarkCodeTabsDirective
// --------------------------------------------------------------------------
// This plugin visits only container directives, then checks if the directive’s
// name is "code-tabs". If so, it extracts the "tabs" attribute (a comma‑separated
// list) and sets HAST metadata (data.hName and data.hProperties) so that the
// directive is rendered as a custom element.
function remarkCodeTabsDirective(): Transformer<Root> {
  return (tree: Root) => {
    visit(tree, 'containerDirective', (node: ContainerDirective) => {
      if (node.name === 'code-tabs') {
        // Extract the "tabs" attribute (a comma‑separated list)
        const tabsAttr = node.attributes?.tabs;
        let tabs: string[] = [];
        if (typeof tabsAttr === 'string') {
          tabs = tabsAttr.split(',').map((t) => t.trim());
        }
        // Set or create the data object on the node.
        node.data = node.data || {};
        // Translate the directive to HTML by setting the element name and properties.
        node.data.hName = 'remark-code-tabs'; // Custom element (dash‑separated)
        node.data.hProperties = {
          className: 'code-tabs',
          tabs, // Pass along the tabs array
        };
      }
    });
  };
}

// --------------------------------------------------------------------------
// Define a custom type for our transformed directive node.
// --------------------------------------------------------------------------
interface CodeTabsNode extends ContainerDirective {
  type: 'code-tabs';
  data: {
    hName: string;
    hProperties: {
      className: string;
      tabs: string[];
    };
  };
}

// --------------------------------------------------------------------------
// React Component: CodeTabs
// --------------------------------------------------------------------------
interface CodeTabsProps {
  tabs: string[];
  children: React.ReactNode;
}

const CodeTabs: React.FC<CodeTabsProps> = ({ tabs, children }) => {
  // Convert children into an array (each child is expected to be a code block)
  const codeBlocks = React.Children.toArray(children);
  const [activeTab, setActiveTab] = useState(0);

  return (
    <div className="code-tabs-wrapper">
      <div className="tabs">
        {tabs.map((tab, idx) => (
          <button
            key={idx}
            className={activeTab === idx ? 'active' : ''}
            onClick={() => setActiveTab(idx)}
          >
            {tab}
          </button>
        ))}
      </div>
      <div className="tab-content">{codeBlocks[activeTab]}</div>
    </div>
  );
};

// --------------------------------------------------------------------------
// Main Component: MarkdownRenderer
// --------------------------------------------------------------------------
const markdownContent = `
# Section A

::: code-tabs {tabs="JavaScript, TypeScript"}
\`\`\`javascript
console.log("Hello, JavaScript!");
\`\`\`

\`\`\`typescript
console.log("Hello, TypeScript!");
\`\`\`
:::

# Section 2

::: code-tabs {tabs="Python, Java"}
\`\`\`python
print("Hello, Python!")
\`\`\`

\`\`\`java
System.out.println("Hello, Java!");
\`\`\`
:::
`;

// Map our custom element (from HAST metadata) to the CodeTabs React component.
const components = {
  'remark-code-tabs': ({ node, ...props }: { node: CodeTabsNode; [key: string]: unknown }) => {
    const { tabs } = node.data.hProperties;
    return <CodeTabs tabs={tabs} {...props} />;
  },
};

const MarkdownRenderer: React.FC = () => {
  return (
    <ReactMarkdown
      // Include remark-directive to parse directives, then our plugin to transform them.
      remarkPlugins={[remarkDirective, remarkCodeTabsDirective]}
      // Map custom elements to our React components.
      components={components}
    >
      {markdownContent}
    </ReactMarkdown>
  );
};

export default MarkdownRenderer;

Yes, unless you tell me is less code if there is only one but if the same code will work for n or n+1 then it does not matter to me

The amount of code is somewhat less relevant, what is it that you are trying to build.
Describe that in clear terms and then what needs to be coded becomes clearer.