Posts with plasmic, nextjs, mdx and code syntax highlighter

Enhancing Blogs with Syntax Highlighting: A Plasmic and Next.js Integration

How to Enhance Blogs with Syntax Highlighting

Step 1: Install the Syntax Highlighter

First, you need to install the react-syntax-highlighter package. Open your terminal and run:

npm i -D react-syntax-highlighter

This will allow you to use the SyntaxHighlighter component (which might also be Prism). Here's a link to read more about react-syntax-highlighter.

Step 2: Create Static Params

Next, let’s set up the generateStaticParams function. This function decides what type of page it is and its expected behavior:

const generateStaticParams = async () => {
  const slugs = await getArticleSlugs();
  return slugs.map(async ({ slug }) => ({
    params: {
      slug,
    },
  }));
};

Step 3: Design the Article Page

Now, let’s work on the ArticlePage component. This will be the core of the page you display for each article or post:

const ArticlePage = async (props: ArticleProps) => {
  const { frontMatter, content } = await getArticleBySlug(props.params.slug);
  const plasmicData = await PLASMIC.fetchComponentData({
    projectId: '<projectId here>',
    name: 'Blog',
  });
  const compMeta = plasmicData.entryCompMetas[0];
  return (
    <>
      <PlasmicClientRootProvider
        prefetchedData={plasmicData}
        pageRoute={compMeta.path}
        pageParams={compMeta.params}
        // pageQuery={searchParams}
      >
        <PlasmicComponent
          component={compMeta.displayName}
          componentProps={{
            title: frontMatter.title,
            actualContent: (
              <div className="content">
                <ReactMarkdown
                  components={{
                    code({ className, children, ...props }) {
                      const match = /language-(\w+)/.exec(className || '');
                      return match ? (
                        <SyntaxHighlighter
                          style={dracula}
                          language={match[1]}
                          {...props}
                        >
                          {String(children).replace(/\n$/, '')}
                        </SyntaxHighlighter>
                      ) : (
                        <code className={className} {...props}>
                          {children}
                        </code>
                      );
                    },
                  }}
                >
                  {content}
                </ReactMarkdown>
              </div>
            ),
            actionItems: (
              <PlasmicComponent
                component="Button"
                componentProps={{
                  link: '/',
                  children: <span>&larr; Back to posts</span>,
                  shape: 'sharp',
                  style: {
                    width: '100%',
                  },
                }}
              />
            ),
          }}
        />
      </PlasmicClientRootProvider>
    </>
  );
};

Additional Resources

Here are some resources to help you out:

← Back to posts

We use cookies to improve your experience and analyze our traffic. By using our site, you consent to our use of cookies. You can manage your preferences below: