Create MDX Blog in your app using Contentlayer and Next.js - 2nd Part

In the last blog we created simple mdx website using contenlayer and nextjs.

now in this blog we learn some advance technique's like

how to create custom components
how to add color to code blocks
etc etc

suppose we have to create a component may which just highlight some text like a callout components how we will do that in mdx lets see.

first we create a custom component name callout.tsx

app/blog/_component/components/callout.tsx

import { cn } from "@/lib/utils"
 
interface CalloutProps {
  icon?: string
  children?: React.ReactNode
  type?: "default" | "warning" | "danger"
}
 
export function Callout({
  children,
  icon,
  type = "default",
  ...props
}: CalloutProps) {
  return (
    <div
      className={cn("my-6 flex items-start rounded-md border border-l-4 p-4", {
        "border-red-900 bg-red-50": type === "danger",
        "border-yellow-900 bg-yellow-50": type === "warning",
      })}
      {...props}
    >
      {icon && <span className="mr-4 text-2xl">{icon}</span>}
      <div>{children}</div>
    </div>
  )
}

here something I am intentionally missing let you figure out that 😎

now import that callout inside mdx-component.tsx

app/blog/_component/mdx-component.tsx

import { useMDXComponent } from 'next-contentlayer/hooks'
import { Callout } from './components/Callout'
 
const components = {
  Callout,
}
 
interface MdxProps {
  code: string
}
 
export function Mdx({ code }: MdxProps) {
  const Component = useMDXComponent(code)
 
  return (
    <div className="mdx">
      <Component components={components} />
    </div>
  )
}

now that callout look somthing like this

Hi from callout

this do not need to be this much ugly but you got the point.😒

like this you can create as many components as you need to create. from here your creativity take driver seat.

adding custom component part done

also you can refer shadcn and see how they write custom components refer here

now lets see how can we add highlighted codeblocks 👨‍💻

for adding themed codeblocks we need to install several dependancies

terminal

 npm i rehype-pretty-code --force

terminal

 npm i rehype-slug  --force

contentlayer.config.ts

import { defineDocumentType, makeSource } from "contentlayer/source-files";
import rehypePrettyCode from "rehype-pretty-code";
import rehypeSlug from "rehype-slug";
 
const Blog = defineDocumentType(() => ({
    name: "Blog",
    filePathPattern: `blog/**/*.mdx`,
    contentType: 'mdx',
    fields: {
        title: { type: "string", required: true },
        date: { type: "string", required: true },
 
    },
}));
 
export default makeSource({
    contentDirPath: "content",
    documentTypes: [Blog],
    mdx: {
        // @ts-ignore
        rehypePlugins: [rehypeSlug, [rehypePrettyCode, { theme: "github-dark" }]]
    }
})

you can choose theme of code block from here

now comes the case to add line number and line highlight to code block

for this part i used this in this they have a file which make this lineNumber and linehighlight possible.

file contains styles for that file

paste this file in global.css

now if you type isCallLikeExpression

```tsx showLineNumbers {}
console.log("Hello world")

this will work like this

console.log("bye 👋")

Thats it ,Thank you for reading

Here is link to repo which has all code.