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.
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, }, })); };
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>← Back to posts</span>, shape: 'sharp', style: { width: '100%', }, }} /> ), }} /> </PlasmicClientRootProvider> </> ); };
Here are some resources to help you out:
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: