Codeblock

Display code snippets effectively with Bramble UI's codeblock component. Enhance code readability and create developer-friendly web interfaces

Usage

import {Codeblock} from '@/ui'

return (			
	<Codeblock language='jsx'>
        {`<Breadcrumbs size='sm' />`}
    </Codeblock>
)

Output

<Breadcrumbs size='sm' />

Prism.js

Prism is a lightweight, extensible syntax highlighter.

Install

npm i prismjs

npm i --save @types/prismjs

Theme

import '../className/index.css'
// Add below line to layout.tsx
import 'prismjs/themes/prism-tomorrow.min.css'

Source Code

'use client'

import React, { useEffect } from 'react'
import Prism from 'prismjs'

require('prismjs/components/prism-jsx')

interface CodeblockProps {
	children: string
	language: string
}

const Codeblock = ({ language, children }: CodeblockProps) => {
	useEffect(() => {
		Prism.highlightAll()
	}, [children])

	return (
		<pre>
			<code className={`language-${language}`}>
                    {children}
            </code>
		</pre>
	)
}

export default Codeblock