mdXtend

about

CMS Code Blocks

2025-01-26

The CMS Code Blocks component is used to display code snippets in a structured and visually appealing way. It supports both single and tabbed code blocks, providing a flexible solution for showcasing code across multiple programming languages.

Examples

  • Inline code block using <Codebox></Codebox> file:
Content Inside Inline Code Block
  • Single code block using <FileName></FileName> file:
tsscript.ts
Copy code
const fun = () => "Inside Function fun()";
console.log(`Output: ${fun()}`);
  • Tabed code block using <TabGroup></TabGroup> and <Tab></Tab> file:
tsscript.ts
Copy code
const fun = () => "Inside Function fun()";
console.log(`Output: ${fun()}`);

Syntax

mdxcodeblock.mdx
Copy code
{/* for single tab */}
<Codebox>Content Inside Inline Code Block</Codebox>


{/* for single tab */}
<FileName icon="ts" fileName="script.ts">
```ts
const fun = () => "Inside Function fun()";
console.log(`Output: ${fun()}`);
```
</FileName>


{/* for tab groups */}
<TabGroup>
<Tab icon="ts" fileName="script.ts">
```ts
const fun = () => "Inside Function fun()";
console.log(`Output: ${fun()}`);
```
</Tab>
<Tab icon="terminal" fileName="terminal">
```shell
Inside Function fun();
```
</Tab>
</TabGroup>