Posts with plasmic, nextjs, mdx and code syntax highlighter

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:

• Code Highlighting for React Markdown and Next.js
• Enhancing Your React Markdown Experience with Syntax Highlighting