code snippets

Mantine's Code Highlighter Utility


One of the easiest ways to display code on-screen without it rendering. It even provides you with the "copy / copied" button functionality.
Sure you could write this utility yourself or just use <CodeHighlight /> instead.

// Try it, click the Copy Code icon 
// to display this code on-screen.... 
const mycode =  `  
function Button() {
    return 
        <button>
            Click me
        </button>;
    }
`

// ...use the following code snippet:
<CodeHighlight
    code={`// Try it, click the Copy Code icon ${mycode}`}
    language="tsx"
    copyLabel="Copy button code"
    copiedLabel="There ya go!"
/>

Summary: Visit https://mantine.dev/x/code-highlight/ for all of the specifics, but this is super-easy to use:
1. NPM install it
2. Import it into your component
3. Set some formatted code to display....
4. ...then spit it out to screen with the <CodeHighlight... /> component.