Code

Here is a demo of code snippet. It is used to format code blocks in markdown files.

Example 1

function PostCard(post: Post) {
    return (
        <div className='mb-8'>
            <h2 className='mb-1 text-xl'>
                <Link
                    href={post.url}
                    className='text-blue-700 hover:text-blue-900 dark:text-blue-400'>
                    {post.title}
                </Link>
            </h2>
            <time
                dateTime={post.date}
                className='mb-2 block text-xs text-gray-600'>
                {format(parseISO(post.date), 'LLLL d, yyyy')}
            </time>
        </div>
    );
}

Example 2

const PostLayout = ({ params }: { params: { slug: string } }) => {
    const post = allPosts.find(
        (post) => post._raw.flattenedPath === params.slug
    );

    if (!post) notFound();

    const MDXContent = useMDXComponent(post.body.code);

    return (
        <article className='mx-auto max-w-xl py-8'>
            <div className='mb-8 text-center'>
                <time
                    dateTime={post.date}
                    className='mb-1 text-xs text-gray-600'>
                    {format(parseISO(post.date), 'LLLL d, yyyy')}
                </time>
                <h1 className='text-3xl font-bold'>{post.title}</h1>
            </div>
            <div className='[&>*]:mb-3 [&>*:last-child]:mb-0'>
                <MDXContent component={mdxComponents} />
            </div>
        </article>
    );
};