www/pages/notes/[note].tsx

import Layout from '../../components/layout';
import { getAllNotes, getNote } from '../../lib/slug';
import ReactMarkdown from 'react-markdown';
import SyntaxHighlighter from 'react-syntax-highlighter';
import { monokaiSublime as hlTheme } from 'react-syntax-highlighter/dist/cjs/styles/hljs';
import remarkGfm from 'remark-gfm';
import rehypeRaw from 'rehype-raw';

function Markdown({content}: any) {
    return <ReactMarkdown
        remarkPlugins={[remarkGfm]}
        rehypePlugins={[rehypeRaw]}
        components={{
            code({ node, inline, className, children, ...props }) {
                const match = /language-(\w+)/.exec(className || '')
                return !inline && match
                    ? (
                        <SyntaxHighlighter
                            showLineNumbers={true}
                            language={match[1]}
                            //@ts-ignore
                            style={hlTheme}
                            PreTag='div'
                            codeTagProps={{ style: { display: 'block' } }}
                            customStyle={{ padding: '0', borderRadius: '1rem' }}
                            {...props}
                        >{String(children).replace(/\n$/, '')}</SyntaxHighlighter>
                    )
                    : <code className={className} {...props}>
                        {children}
                    </code>
            }
        }}
    >{content}</ReactMarkdown>
}

function Note({ note }: any) {
    return (<>
        <Layout name={note.title} title={note.title} ancestors={[{ name: 'Notes', path: 'notes' }]}>
            <section className='block'>
                <Markdown content={note.content} />
            </section>
        </Layout>
    </>
    );
}

export async function getStaticProps({ params }: any) {
    const note = getNote(params.note);

    return {
        props: { note }
    };
}

export async function getStaticPaths() {
    const notes = getAllNotes();
    return {
        paths: notes.map((note: any) => {
            return {
                params: {
                    note: note.slug
                }
            }
        }),
        fallback: false
    };
}


export default Note;