Weekly React Newsletter

Decomponent

Guides

Code Highlights

A simple way to highlight a few lines of code within your blog or app for users to copy

Why use this?

You might need users to copy and paste a code snippet (e.g. analytics installation)

Recommended Package:

react-syntax-highlighter

How to use?

Install the package
Decide on what theme you want to use (demo here)
Copy & modify the cope snippets below

Simple React Component


import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
import { oneDark as theme } from 'react-syntax-highlighter/dist/esm/styles/prism';

export default function SimpleComponent() {
    return(
        <SyntaxHighlighter 
            language="jsx" style={theme} wrapLongLines={false} wrapLines={false}
            className='py-20 px-5 text-xs tracking-tight overflow-x-scroll whitespace-nowrap'
        >
        Hello World
    </SyntaxHighlighter>
    )
}

One Light Theme


import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
import { oneLight as theme2 } from 'react-syntax-highlighter/dist/esm/styles/prism';

export default function SimpleComponent() {
    return(
        <SyntaxHighlighter 
            language="jsx" style={theme2} wrapLongLines={false} wrapLines={false}
            className='py-20 px-5 text-xs tracking-tight overflow-x-scroll whitespace-nowrap'
        >
        Hello World
    </SyntaxHighlighter>
    )
}

Atom Dark Theme


import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
import { atomDark as theme3 } from 'react-syntax-highlighter/dist/esm/styles/prism';

export default function SimpleComponent() {
    return(
        <SyntaxHighlighter 
            language="jsx" style={theme3} wrapLongLines={false} wrapLines={false}
            className='py-20 px-5 text-xs tracking-tight overflow-x-scroll whitespace-nowrap'
        >
        Hello World
    </SyntaxHighlighter>
    )
}

Funky Theme


import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
import { funky as theme4 } from 'react-syntax-highlighter/dist/esm/styles/prism';

export default function SimpleComponent() {
    return(
        <SyntaxHighlighter 
            language="jsx" style={theme4} wrapLongLines={false} wrapLines={false}
            className='py-20 px-5 text-xs tracking-tight overflow-x-scroll whitespace-nowrap'
        >
        Hello World
    </SyntaxHighlighter>
    )
}

If you need a lighter build...


import { PrismLight as SyntaxHighlighter2 } from 'react-syntax-highlighter';
import { oneDark as theme } from 'react-syntax-highlighter/dist/esm/styles/prism';
import jsx from 'react-syntax-highlighter/dist/esm/languages/prism/jsx';

SyntaxHighlighter.registerLanguage('jsx', jsx);

export default function SimpleComponent() {
    return(
        <SyntaxHighlighter2 
            language="jsx" style={theme} wrapLongLines={false} wrapLines={false}
            className='py-20 px-5 text-xs tracking-tight overflow-x-scroll whitespace-nowrap'
        >
        Hello World
    </SyntaxHighlighter2>
    )
}

Note: If you go with the lighter build, you will need to directly import the language and the theme read more here.

Alternatives

Note:

This package covers 90% of my use cases but it is rather large, if you only need it for a small component of your app, I recommend react-highlight.