var Component=(()=>{var p=Object.create;var c=Object.defineProperty;var y=Object.getOwnPropertyDescriptor;var E=Object.getOwnPropertyNames;var D=Object.getPrototypeOf,C=Object.prototype.hasOwnProperty;var g=(l,e)=>()=>(e||l((e={exports:{}}).exports,e),e.exports),u=(l,e)=>{for(var r in e)c(l,r,{get:e[r],enumerable:!0})},d=(l,e,r,o)=>{if(e&&typeof e=="object"||typeof e=="function")for(let a of E(e))!C.call(l,a)&&a!==r&&c(l,a,{get:()=>e[a],enumerable:!(o=y(e,a))||o.enumerable});return l};var m=(l,e,r)=>(r=l!=null?p(D(l)):{},d(e||!l||!l.__esModule?c(r,"default",{value:l,enumerable:!0}):r,l)),f=l=>d(c({},"__esModule",{value:!0}),l);var t=g((w,s)=>{s.exports=_jsx_runtime});var k={};u(k,{default:()=>h});var n=m(t());function i(l){let e={a:"a",code:"code",div:"div",figure:"figure",h1:"h1",h2:"h2",li:"li",p:"p",pre:"pre",span:"span",strong:"strong",ul:"ul",...l.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h1,{children:"Objectives"}),(0,n.jsxs)(e.ul,{children:[(0,n.jsxs)(e.li,{children:["Rendering ",(0,n.jsx)(e.a,{href:"/blogs/markdown-cheatsheet",children:"markdown"})," in an Next.js project"]}),(0,n.jsx)(e.li,{children:"Use custom components"}),(0,n.jsxs)(e.li,{children:["Add ",(0,n.jsx)(e.a,{href:"https://remark.js.org/",rel:"nofollow",children:"Remark"})," and ",(0,n.jsx)(e.a,{href:"https://github.com/rehypejs/rehype",rel:"nofollow",children:"Rehype"})," plugins"]}),(0,n.jsx)(e.li,{children:"Learn to change states in parent component from child."}),(0,n.jsx)(e.li,{children:"Have fun \u{1F525}"})]}),(0,n.jsxs)(e.p,{children:["To check the finished build ",(0,n.jsx)(e.a,{href:"https://next-markdown-editor.vercel.app/",rel:"nofollow",children:"click here"})]}),(0,n.jsx)(e.h1,{children:"1. Create the landing page"}),(0,n.jsx)(e.p,{children:"I want a simple layout so I divided the screen into two parts; the left being the editor and we see the markdown rendering on the right."}),(0,n.jsx)(e.div,{children:(0,n.jsx)(e.figure,{"data-rehype-pretty-code-figure":"",children:(0,n.jsx)(e.pre,{style:{backgroundColor:"#23262E",color:"#D5CED9"},tabIndex:"0","data-language":"typescript","data-theme":"andromeeda",children:(0,n.jsxs)(e.code,{"data-language":"typescript","data-theme":"andromeeda",style:{display:"grid"},children:[(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#C74DED"},children:"const"}),(0,n.jsx)(e.span,{style:{color:"#FFE66D"},children:" Homepage"}),(0,n.jsx)(e.span,{style:{color:"#EE5D43"},children:" ="}),(0,n.jsx)(e.span,{style:{color:"#D5CED9"},children:" () "}),(0,n.jsx)(e.span,{style:{color:"#C74DED"},children:"=>"}),(0,n.jsx)(e.span,{style:{color:"#D5CED9"},children:" {"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#C74DED"},children:" return"}),(0,n.jsx)(e.span,{style:{color:"#D5CED9"},children:" ("})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#EE5D43"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#00E8C6"},children:"div"}),(0,n.jsx)(e.span,{style:{color:"#00E8C6"},children:" className"}),(0,n.jsx)(e.span,{style:{color:"#EE5D43"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#96E072"},children:"'h-screen flex justify-between'"}),(0,n.jsx)(e.span,{style:{color:"#EE5D43"},children:">"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#D5CED9"},children:" {"}),(0,n.jsx)(e.span,{style:{color:"#A0A1A7CC"},children:"/* Input markdown */"}),(0,n.jsx)(e.span,{style:{color:"#D5CED9"},children:"}"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#EE5D43"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#00E8C6"},children:"section"}),(0,n.jsx)(e.span,{style:{color:"#00E8C6"},children:" className"}),(0,n.jsx)(e.span,{style:{color:"#EE5D43"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#96E072"},children:"'w-full pt-5 h-full'"}),(0,n.jsx)(e.span,{style:{color:"#EE5D43"},children:">"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#EE5D43"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#00E8C6"},children:"textarea"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#00E8C6"},children:" className"}),(0,n.jsx)(e.span,{style:{color:"#EE5D43"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#96E072"},children:"'w-full ... placeholder:opacity-80'"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#00E8C6"},children:" placeholder"}),(0,n.jsx)(e.span,{style:{color:"#EE5D43"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#96E072"},children:"'Feed me some Markdown \u{1F355}'"})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#00E8C6"},children:" autoFocus"})}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#EE5D43"},children:" />"})}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#EE5D43"},children:" "})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#EE5D43"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#00E8C6"},children:"div"}),(0,n.jsx)(e.span,{style:{color:"#00E8C6"},children:" className"}),(0,n.jsx)(e.span,{style:{color:"#EE5D43"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#96E072"},children:"'fixed ... border-dashed'"}),(0,n.jsx)(e.span,{style:{color:"#EE5D43"},children:" />"})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#D5CED9"},children:" {"}),(0,n.jsx)(e.span,{style:{color:"#A0A1A7CC"},children:"/* Render markdown */"}),(0,n.jsx)(e.span,{style:{color:"#D5CED9"},children:"}"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#EE5D43"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#00E8C6"},children:"article"}),(0,n.jsx)(e.span,{style:{color:"#00E8C6"},children:" className"}),(0,n.jsx)(e.span,{style:{color:"#EE5D43"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#96E072"},children:"'w-full pt-5 pl-6'"}),(0,n.jsx)(e.span,{style:{color:"#EE5D43"},children:">"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#00E8C6"},children:" Markdown"}),(0,n.jsx)(e.span,{style:{color:"#00E8C6"},children:" lies"}),(0,n.jsx)(e.span,{style:{color:"#00E8C6"},children:" here"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#EE5D43"},children:" "})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#EE5D43"},children:" "})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#D5CED9"},children:" )"})}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#D5CED9"},children:"}"})}),` `,(0,n.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#C74DED"},children:"export"}),(0,n.jsx)(e.span,{style:{color:"#C74DED"},children:" default"}),(0,n.jsx)(e.span,{style:{color:"#00E8C6"},children:" Homepage"})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:" "})]})})})}),(0,n.jsx)(e.h1,{children:"2. Add states to store data"}),(0,n.jsxs)(e.p,{children:["Now let's change it into a client component and add the ",(0,n.jsx)(e.span,{"data-rehype-pretty-code-figure":"",children:(0,n.jsx)(e.code,{"data-language":"string","data-theme":"andromeeda",style:{backgroundColor:"#23262E",color:"#D5CED9"},children:(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{children:"useState"})})})})," hook."]}),(0,n.jsx)(e.div,{children:(0,n.jsx)(e.figure,{"data-rehype-pretty-code-figure":"",children:(0,n.jsx)(e.pre,{style:{backgroundColor:"#23262E",color:"#D5CED9"},tabIndex:"0","data-language":"typescript","data-theme":"andromeeda",children:(0,n.jsxs)(e.code,{"data-language":"typescript","data-theme":"andromeeda",style:{display:"grid"},children:[(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#96E072"},children:"'use client'"}),(0,n.jsx)(e.span,{style:{color:"#D5CED9"},children:";"})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#C74DED"},children:"import"}),(0,n.jsx)(e.span,{style:{color:"#D5CED9"},children:" { "}),(0,n.jsx)(e.span,{style:{color:"#00E8C6"},children:"useState"}),(0,n.jsx)(e.span,{style:{color:"#D5CED9"},children:" } "}),(0,n.jsx)(e.span,{style:{color:"#C74DED"},children:"from"}),(0,n.jsx)(e.span,{style:{color:"#96E072"},children:' "react"'})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#C74DED"},children:"const"}),(0,n.jsx)(e.span,{style:{color:"#FFE66D"},children:" Homepage"}),(0,n.jsx)(e.span,{style:{color:"#EE5D43"},children:" ="}),(0,n.jsx)(e.span,{style:{color:"#D5CED9"},children:" () "}),(0,n.jsx)(e.span,{style:{color:"#C74DED"},children:"=>"}),(0,n.jsx)(e.span,{style:{color:"#D5CED9"},children:" {"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#C74DED"},children:" const"}),(0,n.jsx)(e.span,{style:{color:"#D5CED9"},children:" ["}),(0,n.jsx)(e.span,{style:{color:"#00E8C6"},children:"source"}),(0,n.jsx)(e.span,{style:{color:"#D5CED9"},children:", "}),(0,n.jsx)(e.span,{style:{color:"#00E8C6"},children:"setSource"}),(0,n.jsx)(e.span,{style:{color:"#D5CED9"},children:"] "}),(0,n.jsx)(e.span,{style:{color:"#EE5D43"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#FFE66D"},children:" useState"}),(0,n.jsx)(e.span,{style:{color:"#D5CED9"},children:"("}),(0,n.jsx)(e.span,{style:{color:"#96E072"},children:"''"}),(0,n.jsx)(e.span,{style:{color:"#D5CED9"},children:");"})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#C74DED"},children:" return"}),(0,n.jsx)(e.span,{style:{color:"#D5CED9"},children:" ("})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#EE5D43"},children:" ..."})}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#EE5D43"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#00E8C6"},children:"textarea"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#00E8C6"},children:" className"}),(0,n.jsx)(e.span,{style:{color:"#EE5D43"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#96E072"},children:"'w-full ... placeholder:opacity-80'"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#00E8C6"},children:" placeholder"}),(0,n.jsx)(e.span,{style:{color:"#EE5D43"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#96E072"},children:"'Feed me some Markdown \u{1F355}'"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#00E8C6"},children:" value"}),(0,n.jsx)(e.span,{style:{color:"#EE5D43"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#D5CED9"},children:"{"}),(0,n.jsx)(e.span,{style:{color:"#00E8C6"},children:"source"}),(0,n.jsx)(e.span,{style:{color:"#D5CED9"},children:"}"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#00E8C6"},children:" onChange"}),(0,n.jsx)(e.span,{style:{color:"#EE5D43"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#D5CED9"},children:"{(e) => "}),(0,n.jsx)(e.span,{style:{color:"#FFE66D"},children:"setSource"}),(0,n.jsx)(e.span,{style:{color:"#D5CED9"},children:"(e.target.value)}"})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#00E8C6"},children:" autoFocus"})}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#EE5D43"},children:" />"})}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#EE5D43"},children:" ..."})}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#D5CED9"},children:" )"})}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#D5CED9"},children:"}"})})]})})})}),(0,n.jsxs)(e.h1,{children:["3. Setup ",(0,n.jsx)(e.span,{"data-rehype-pretty-code-figure":"",children:(0,n.jsx)(e.code,{"data-language":"string","data-theme":"andromeeda",style:{backgroundColor:"#23262E",color:"#D5CED9"},children:(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{children:"react-markdown"})})})})," and ",(0,n.jsx)(e.span,{"data-rehype-pretty-code-figure":"",children:(0,n.jsx)(e.code,{"data-language":"string","data-theme":"andromeeda",style:{backgroundColor:"#23262E",color:"#D5CED9"},children:(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{children:"@tailwindcss/typography"})})})})]}),(0,n.jsxs)(e.p,{children:["We use ",(0,n.jsx)(e.a,{href:"https://www.npmjs.com/package/react-markdown",rel:"nofollow",children:"react-markdown"})," to render markdown and ",(0,n.jsx)(e.a,{href:"https://tailwindcss.com/docs/typography-plugin",rel:"nofollow",children:"@tailwindcss/typography"})," to style the markdown. Install them by firing the following commands."]}),(0,n.jsx)(e.div,{children:(0,n.jsx)(e.figure,{"data-rehype-pretty-code-figure":"",children:(0,n.jsx)(e.pre,{style:{backgroundColor:"#23262E",color:"#D5CED9"},tabIndex:"0","data-language":"bash","data-theme":"andromeeda",children:(0,n.jsxs)(e.code,{"data-language":"bash","data-theme":"andromeeda",style:{display:"grid"},children:[(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#FFE66D"},children:"npm"}),(0,n.jsx)(e.span,{style:{color:"#96E072"},children:" install"}),(0,n.jsx)(e.span,{style:{color:"#96E072"},children:" react-markdown"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#FFE66D"},children:"npm"}),(0,n.jsx)(e.span,{style:{color:"#96E072"},children:" install"}),(0,n.jsx)(e.span,{style:{color:"#EE5D43"},children:" -D"}),(0,n.jsx)(e.span,{style:{color:"#96E072"},children:" @tailwindcss/typography"})]})]})})})}),(0,n.jsxs)(e.p,{children:["Now import and add the Markdown component and pass ",(0,n.jsx)(e.span,{"data-rehype-pretty-code-figure":"",children:(0,n.jsx)(e.code,{"data-language":"string","data-theme":"andromeeda",style:{backgroundColor:"#23262E",color:"#D5CED9"},children:(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{children:"source"})})})})," as children. Remember to add the ",(0,n.jsx)(e.span,{"data-rehype-pretty-code-figure":"",children:(0,n.jsx)(e.code,{"data-language":"string","data-theme":"andromeeda",style:{backgroundColor:"#23262E",color:"#D5CED9"},children:(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{children:"prose"})})})})," classname to the Markdown component."]}),(0,n.jsx)(e.div,{children:(0,n.jsx)(e.figure,{"data-rehype-pretty-code-figure":"",children:(0,n.jsx)(e.pre,{style:{backgroundColor:"#23262E",color:"#D5CED9"},tabIndex:"0","data-language":"typescript","data-theme":"andromeeda",children:(0,n.jsxs)(e.code,{"data-language":"typescript","data-theme":"andromeeda",style:{display:"grid"},children:[(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#C74DED"},children:"import"}),(0,n.jsx)(e.span,{style:{color:"#00E8C6"},children:" Markdown"}),(0,n.jsx)(e.span,{style:{color:"#C74DED"},children:" from"}),(0,n.jsx)(e.span,{style:{color:"#96E072"},children:" 'react-markdown'"})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#C74DED"},children:"const"}),(0,n.jsx)(e.span,{style:{color:"#FFE66D"},children:" Homepage"}),(0,n.jsx)(e.span,{style:{color:"#EE5D43"},children:" ="}),(0,n.jsx)(e.span,{style:{color:"#D5CED9"},children:" () "}),(0,n.jsx)(e.span,{style:{color:"#C74DED"},children:"=>"}),(0,n.jsx)(e.span,{style:{color:"#D5CED9"},children:" {"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#C74DED"},children:" return"}),(0,n.jsx)(e.span,{style:{color:"#D5CED9"},children:" ("})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#EE5D43"},children:" ..."})}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#EE5D43"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#00E8C6"},children:"div"}),(0,n.jsx)(e.span,{style:{color:"#00E8C6"},children:" className"}),(0,n.jsx)(e.span,{style:{color:"#EE5D43"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#96E072"},children:"'fixed ... border-dashed'"}),(0,n.jsx)(e.span,{style:{color:"#EE5D43"},children:" />"})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#A0A1A7CC"},children:" // Render the markdown"})}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#EE5D43"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#00E8C6"},children:"article"}),(0,n.jsx)(e.span,{style:{color:"#00E8C6"},children:" className"}),(0,n.jsx)(e.span,{style:{color:"#EE5D43"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#96E072"},children:"'w-full pt-5 pl-6'"}),(0,n.jsx)(e.span,{style:{color:"#EE5D43"},children:">"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#EE5D43"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#00E8C6"},children:"Markdown"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#00E8C6"},children:" className"}),(0,n.jsx)(e.span,{style:{color:"#EE5D43"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#96E072"},children:"'prose prose-invert min-w-full'"})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#EE5D43"},children:" >"})}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#D5CED9"},children:" {"}),(0,n.jsx)(e.span,{style:{color:"#00E8C6"},children:"source"}),(0,n.jsx)(e.span,{style:{color:"#D5CED9"},children:"}"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#EE5D43"},children:" "})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#EE5D43"},children:" "})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#EE5D43"},children:" ..."})}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#D5CED9"},children:" )"})}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#D5CED9"},children:"}"})})]})})})}),(0,n.jsxs)(e.p,{children:["Now if you type any markdown you'd still not find any changes. This is because we forgot to add the ",(0,n.jsx)(e.span,{"data-rehype-pretty-code-figure":"",children:(0,n.jsx)(e.code,{"data-language":"string","data-theme":"andromeeda",style:{backgroundColor:"#23262E",color:"#D5CED9"},children:(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{children:"@tailwindcss/typography"})})})})," plugin to the tailwindcss config \u{1F480}"]}),(0,n.jsxs)(e.p,{children:["Change your ",(0,n.jsx)(e.span,{"data-rehype-pretty-code-figure":"",children:(0,n.jsx)(e.code,{"data-language":"string","data-theme":"andromeeda",style:{backgroundColor:"#23262E",color:"#D5CED9"},children:(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{children:"tailwind.config.ts"})})})})," to the following:"]}),(0,n.jsx)(e.div,{children:(0,n.jsx)(e.figure,{"data-rehype-pretty-code-figure":"",children:(0,n.jsx)(e.pre,{style:{backgroundColor:"#23262E",color:"#D5CED9"},tabIndex:"0","data-language":"typescript","data-theme":"andromeeda",children:(0,n.jsxs)(e.code,{"data-language":"typescript","data-theme":"andromeeda",style:{display:"grid"},children:[(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#C74DED"},children:"import"}),(0,n.jsx)(e.span,{style:{color:"#C74DED"},children:" type"}),(0,n.jsx)(e.span,{style:{color:"#D5CED9"},children:" { "}),(0,n.jsx)(e.span,{style:{color:"#00E8C6"},children:"Config"}),(0,n.jsx)(e.span,{style:{color:"#D5CED9"},children:" } "}),(0,n.jsx)(e.span,{style:{color:"#C74DED"},children:"from"}),(0,n.jsx)(e.span,{style:{color:"#96E072"},children:" 'tailwindcss'"}),(0,n.jsx)(e.span,{style:{color:"#D5CED9"},children:";"})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#C74DED"},children:"const"}),(0,n.jsx)(e.span,{style:{color:"#00E8C6"},children:" config"}),(0,n.jsx)(e.span,{style:{color:"#EE5D43"},children:":"}),(0,n.jsx)(e.span,{style:{color:"#FFE66D"},children:" Config"}),(0,n.jsx)(e.span,{style:{color:"#EE5D43"},children:" ="}),(0,n.jsx)(e.span,{style:{color:"#D5CED9"},children:" {"})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#D5CED9"},children:" content: ["})}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#96E072"},children:" './src/pages/**/*.{js,ts,jsx,tsx,mdx}'"}),(0,n.jsx)(e.span,{style:{color:"#D5CED9"},children:","})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#96E072"},children:" './src/components/**/*.{js,ts,jsx,tsx,mdx}'"}),(0,n.jsx)(e.span,{style:{color:"#D5CED9"},children:","})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#96E072"},children:" './src/app/**/*.{js,ts,jsx,tsx,mdx}'"}),(0,n.jsx)(e.span,{style:{color:"#D5CED9"},children:","})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#D5CED9"},children:" ],"})}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#A0A1A7CC"},children:" // Add the plugin here"})}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#D5CED9"},children:" plugins: ["}),(0,n.jsx)(e.span,{style:{color:"#FFE66D"},children:"require"}),(0,n.jsx)(e.span,{style:{color:"#D5CED9"},children:"("}),(0,n.jsx)(e.span,{style:{color:"#96E072"},children:"'@tailwindcss/typography'"}),(0,n.jsx)(e.span,{style:{color:"#D5CED9"},children:")],"})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#D5CED9"},children:"};"})}),` `,(0,n.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#C74DED"},children:"export"}),(0,n.jsx)(e.span,{style:{color:"#C74DED"},children:" default"}),(0,n.jsx)(e.span,{style:{color:"#00E8C6"},children:" config"}),(0,n.jsx)(e.span,{style:{color:"#D5CED9"},children:";"})]})]})})})}),(0,n.jsx)(e.p,{children:"Now write some markdown and you will see the changes live \u{1F680}"}),(0,n.jsx)(e.h1,{children:"4. Code Highlighting and Custom Components"}),(0,n.jsxs)(e.p,{children:["Now we need to install the ",(0,n.jsx)(e.span,{"data-rehype-pretty-code-figure":"",children:(0,n.jsx)(e.code,{"data-language":"string","data-theme":"andromeeda",style:{backgroundColor:"#23262E",color:"#D5CED9"},children:(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{children:"react-syntax-highlighter"})})})})," package to add code highlighting to our project."]}),(0,n.jsx)(e.div,{children:(0,n.jsx)(e.figure,{"data-rehype-pretty-code-figure":"",children:(0,n.jsx)(e.pre,{style:{backgroundColor:"#23262E",color:"#D5CED9"},tabIndex:"0","data-language":"bash","data-theme":"andromeeda",children:(0,n.jsxs)(e.code,{"data-language":"bash","data-theme":"andromeeda",style:{display:"grid"},children:[(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#FFE66D"},children:"npm"}),(0,n.jsx)(e.span,{style:{color:"#96E072"},children:" i"}),(0,n.jsx)(e.span,{style:{color:"#96E072"},children:" react-syntax-highlighter"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#FFE66D"},children:"npm"}),(0,n.jsx)(e.span,{style:{color:"#96E072"},children:" i"}),(0,n.jsx)(e.span,{style:{color:"#EE5D43"},children:" --save"}),(0,n.jsx)(e.span,{style:{color:"#96E072"},children:" @types/react-syntax-highlighter"})]})]})})})}),(0,n.jsxs)(e.p,{children:["Now we are going to create a ",(0,n.jsx)(e.strong,{children:"Custom Component"})," for the Code Highlighter."]}),(0,n.jsxs)(e.p,{children:["Create a folder called ",(0,n.jsx)(e.span,{"data-rehype-pretty-code-figure":"",children:(0,n.jsx)(e.code,{"data-language":"string","data-theme":"andromeeda",style:{backgroundColor:"#23262E",color:"#D5CED9"},children:(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{children:"components"})})})})," inside the ",(0,n.jsx)(e.span,{"data-rehype-pretty-code-figure":"",children:(0,n.jsx)(e.code,{"data-language":"string","data-theme":"andromeeda",style:{backgroundColor:"#23262E",color:"#D5CED9"},children:(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{children:"src"})})})})," folder. Now create a file called ",(0,n.jsx)(e.span,{"data-rehype-pretty-code-figure":"",children:(0,n.jsx)(e.code,{"data-language":"string","data-theme":"andromeeda",style:{backgroundColor:"#23262E",color:"#D5CED9"},children:(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{children:"Code.tsx"})})})})," inside the components folder."]}),(0,n.jsxs)(e.p,{children:["Add the following code from the ",(0,n.jsx)(e.a,{href:"https://github.com/react-syntax-highlighter/react-syntax-highlighter#readme",rel:"nofollow",children:"documentation"})," of react-syntax-highlighter:"]}),(0,n.jsx)(e.div,{children:(0,n.jsx)(e.figure,{"data-rehype-pretty-code-figure":"",children:(0,n.jsx)(e.pre,{style:{backgroundColor:"#23262E",color:"#D5CED9"},tabIndex:"0","data-language":"typescript","data-theme":"andromeeda",children:(0,n.jsxs)(e.code,{"data-language":"typescript","data-theme":"andromeeda",style:{display:"grid"},children:[(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#C74DED"},children:"import"}),(0,n.jsx)(e.span,{style:{color:"#D5CED9"},children:" { "}),(0,n.jsx)(e.span,{style:{color:"#00E8C6"},children:"Prism"}),(0,n.jsx)(e.span,{style:{color:"#C74DED"},children:" as"}),(0,n.jsx)(e.span,{style:{color:"#00E8C6"},children:" SyntaxHighlighter"}),(0,n.jsx)(e.span,{style:{color:"#D5CED9"},children:" } "}),(0,n.jsx)(e.span,{style:{color:"#C74DED"},children:"from"}),(0,n.jsx)(e.span,{style:{color:"#96E072"},children:" 'react-syntax-highlighter'"}),(0,n.jsx)(e.span,{style:{color:"#D5CED9"},children:";"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#C74DED"},children:"import"}),(0,n.jsx)(e.span,{style:{color:"#D5CED9"},children:" { "}),(0,n.jsx)(e.span,{style:{color:"#00E8C6"},children:"materialOceanic"}),(0,n.jsx)(e.span,{style:{color:"#D5CED9"},children:" } "}),(0,n.jsx)(e.span,{style:{color:"#C74DED"},children:"from"}),(0,n.jsx)(e.span,{style:{color:"#96E072"},children:" 'react-syntax-highlighter/dist/cjs/styles/prism'"}),(0,n.jsx)(e.span,{style:{color:"#D5CED9"},children:";"})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#C74DED"},children:"export"}),(0,n.jsx)(e.span,{style:{color:"#C74DED"},children:" const"}),(0,n.jsx)(e.span,{style:{color:"#FFE66D"},children:" CodeBlock"}),(0,n.jsx)(e.span,{style:{color:"#EE5D43"},children:" ="}),(0,n.jsx)(e.span,{style:{color:"#D5CED9"},children:" ({ "}),(0,n.jsx)(e.span,{style:{color:"#EE5D43"},children:"..."}),(0,n.jsx)(e.span,{style:{color:"#00E8C6"},children:"props"}),(0,n.jsx)(e.span,{style:{color:"#D5CED9"},children:" }) "}),(0,n.jsx)(e.span,{style:{color:"#C74DED"},children:"=>"}),(0,n.jsx)(e.span,{style:{color:"#D5CED9"},children:" {"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#C74DED"},children:" return"}),(0,n.jsx)(e.span,{style:{color:"#D5CED9"},children:" ("})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#EE5D43"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#00E8C6"},children:"SyntaxHighlighter"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#00E8C6"},children:" language"}),(0,n.jsx)(e.span,{style:{color:"#EE5D43"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#D5CED9"},children:"{props.className?.replace(/(?:"}),(0,n.jsx)(e.span,{style:{color:"#FFE66D"},children:"lang"}),(0,n.jsx)(e.span,{style:{color:"#D5CED9"},children:"("}),(0,n.jsx)(e.span,{style:{color:"#EE5D43"},children:"?:"}),(0,n.jsx)(e.span,{style:{color:"#00E8C6"},children:"uage"}),(0,n.jsx)(e.span,{style:{color:"#D5CED9"},children:")"}),(0,n.jsx)(e.span,{style:{color:"#EE5D43"},children:"?-"}),(0,n.jsx)(e.span,{style:{color:"#D5CED9"},children:")"}),(0,n.jsx)(e.span,{style:{color:"#EE5D43"},children:"/"}),(0,n.jsx)(e.span,{style:{color:"#D5CED9"},children:", "}),(0,n.jsx)(e.span,{style:{color:"#96E072"},children:"''"}),(0,n.jsx)(e.span,{style:{color:"#D5CED9"},children:")}"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#00E8C6"},children:" style"}),(0,n.jsx)(e.span,{style:{color:"#EE5D43"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#D5CED9"},children:"{"}),(0,n.jsx)(e.span,{style:{color:"#00E8C6"},children:"materialOceanic"}),(0,n.jsx)(e.span,{style:{color:"#D5CED9"},children:"}"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#00E8C6"},children:" wrapLines"}),(0,n.jsx)(e.span,{style:{color:"#EE5D43"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#D5CED9"},children:"{"}),(0,n.jsx)(e.span,{style:{color:"#00E8C6"},children:"true"}),(0,n.jsx)(e.span,{style:{color:"#D5CED9"},children:"}"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#00E8C6"},children:" className"}),(0,n.jsx)(e.span,{style:{color:"#EE5D43"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#96E072"},children:"'not-prose rounded-md'"})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#EE5D43"},children:" >"})}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#D5CED9"},children:" {props."}),(0,n.jsx)(e.span,{style:{color:"#00E8C6"},children:"children"}),(0,n.jsx)(e.span,{style:{color:"#D5CED9"},children:"}"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#EE5D43"},children:" "})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#D5CED9"},children:" )"})}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#D5CED9"},children:"}"})}),` `,(0,n.jsx)(e.span,{"data-line":"",children:" "})]})})})}),(0,n.jsxs)(e.p,{children:["Here the props contain a classname with the language of the code in the format: ",(0,n.jsx)(e.span,{"data-rehype-pretty-code-figure":"",children:(0,n.jsx)(e.code,{"data-language":"string","data-theme":"andromeeda",style:{backgroundColor:"#23262E",color:"#D5CED9"},children:(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{children:"lang-typescript"})})})})," or sometimes ",(0,n.jsx)(e.span,{"data-rehype-pretty-code-figure":"",children:(0,n.jsx)(e.code,{"data-language":"string","data-theme":"andromeeda",style:{backgroundColor:"#23262E",color:"#D5CED9"},children:(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{children:"language-typescript"})})})})," so we use some ",(0,n.jsx)(e.a,{href:"/blogs/regex-cheatsheet-101#groups-and-capture",children:"regex grooups"}),"to remove everything except the name of the language. The ",(0,n.jsx)(e.span,{"data-rehype-pretty-code-figure":"",children:(0,n.jsx)(e.code,{"data-language":"string","data-theme":"andromeeda",style:{backgroundColor:"#23262E",color:"#D5CED9"},children:(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{children:"not-prose"})})})})," classname is going to ",(0,n.jsx)(e.a,{href:"https://tailwindcss.com/docs/typography-plugin#undoing-typography-styles",rel:"nofollow",children:"remove the default typography styles"}),"."]}),(0,n.jsxs)(e.p,{children:["Now comeback to the main ",(0,n.jsx)(e.span,{"data-rehype-pretty-code-figure":"",children:(0,n.jsx)(e.code,{"data-language":"string","data-theme":"andromeeda",style:{backgroundColor:"#23262E",color:"#D5CED9"},children:(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{children:"page.tsx"})})})})," file and import the ",(0,n.jsx)(e.span,{"data-rehype-pretty-code-figure":"",children:(0,n.jsx)(e.code,{"data-language":"string","data-theme":"andromeeda",style:{backgroundColor:"#23262E",color:"#D5CED9"},children:(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{children:"CodeBlock"})})})})," component and pass it to the original ",(0,n.jsx)(e.span,{"data-rehype-pretty-code-figure":"",children:(0,n.jsx)(e.code,{"data-language":"string","data-theme":"andromeeda",style:{backgroundColor:"#23262E",color:"#D5CED9"},children:(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{children:""})})})})," component"]}),(0,n.jsx)(e.div,{children:(0,n.jsx)(e.figure,{"data-rehype-pretty-code-figure":"",children:(0,n.jsx)(e.pre,{style:{backgroundColor:"#23262E",color:"#D5CED9"},tabIndex:"0","data-language":"typescript","data-theme":"andromeeda",children:(0,n.jsxs)(e.code,{"data-language":"typescript","data-theme":"andromeeda",style:{display:"grid"},children:[(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#C74DED"},children:"import"}),(0,n.jsx)(e.span,{style:{color:"#00E8C6"},children:" Markdown"}),(0,n.jsx)(e.span,{style:{color:"#C74DED"},children:" from"}),(0,n.jsx)(e.span,{style:{color:"#96E072"},children:" 'react-markdown'"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#C74DED"},children:"import"}),(0,n.jsx)(e.span,{style:{color:"#D5CED9"},children:" { "}),(0,n.jsx)(e.span,{style:{color:"#00E8C6"},children:"CodeBlock"}),(0,n.jsx)(e.span,{style:{color:"#D5CED9"},children:" } "}),(0,n.jsx)(e.span,{style:{color:"#C74DED"},children:"from"}),(0,n.jsx)(e.span,{style:{color:"#96E072"},children:" '@/components/Code'"})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#C74DED"},children:"const"}),(0,n.jsx)(e.span,{style:{color:"#FFE66D"},children:" Homepage"}),(0,n.jsx)(e.span,{style:{color:"#EE5D43"},children:" ="}),(0,n.jsx)(e.span,{style:{color:"#D5CED9"},children:" () "}),(0,n.jsx)(e.span,{style:{color:"#C74DED"},children:"=>"}),(0,n.jsx)(e.span,{style:{color:"#D5CED9"},children:" {"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#C74DED"},children:" const"}),(0,n.jsx)(e.span,{style:{color:"#00E8C6"},children:" options"}),(0,n.jsx)(e.span,{style:{color:"#EE5D43"},children:" ="}),(0,n.jsx)(e.span,{style:{color:"#D5CED9"},children:" { code: "}),(0,n.jsx)(e.span,{style:{color:"#00E8C6"},children:"CodeBlock"}),(0,n.jsx)(e.span,{style:{color:"#D5CED9"},children:" }"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#C74DED"},children:" return"}),(0,n.jsx)(e.span,{style:{color:"#D5CED9"},children:" ("})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#EE5D43"},children:" ..."})}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#EE5D43"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#00E8C6"},children:"Markdown"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#00E8C6"},children:" className"}),(0,n.jsx)(e.span,{style:{color:"#EE5D43"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#96E072"},children:"'prose prose-invert min-w-full'"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#00E8C6"},children:" components"}),(0,n.jsx)(e.span,{style:{color:"#EE5D43"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#D5CED9"},children:"{"}),(0,n.jsx)(e.span,{style:{color:"#00E8C6"},children:"options"}),(0,n.jsx)(e.span,{style:{color:"#D5CED9"},children:"}"})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#EE5D43"},children:" >"})}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#D5CED9"},children:" {"}),(0,n.jsx)(e.span,{style:{color:"#00E8C6"},children:"source"}),(0,n.jsx)(e.span,{style:{color:"#D5CED9"},children:"}"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#EE5D43"},children:" "})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#EE5D43"},children:" ..."})}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#D5CED9"},children:" )"})}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#D5CED9"},children:"}"})})]})})})}),(0,n.jsxs)(e.p,{children:["This is going to replace every occurrence of ",(0,n.jsx)(e.span,{"data-rehype-pretty-code-figure":"",children:(0,n.jsx)(e.code,{"data-language":"string","data-theme":"andromeeda",style:{backgroundColor:"#23262E",color:"#D5CED9"},children:(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{children:"code"})})})})," with our Custom ",(0,n.jsx)(e.span,{"data-rehype-pretty-code-figure":"",children:(0,n.jsx)(e.code,{"data-language":"string","data-theme":"andromeeda",style:{backgroundColor:"#23262E",color:"#D5CED9"},children:(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{children:"CodeBlock"})})})}),"component."]}),(0,n.jsx)(e.h2,{children:"(Optional)"}),(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.strong,{children:"BUG"})," (\u{1F41B}): You might have a weird dark border around your code component which is caused by the ",(0,n.jsx)(e.span,{"data-rehype-pretty-code-figure":"",children:(0,n.jsx)(e.code,{"data-language":"string","data-theme":"andromeeda",style:{backgroundColor:"#23262E",color:"#D5CED9"},children:(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{children:"pre"})})})})," tag and tailwind styles."]}),(0,n.jsxs)(e.p,{children:["To fix this go back to your ",(0,n.jsx)(e.span,{"data-rehype-pretty-code-figure":"",children:(0,n.jsx)(e.code,{"data-language":"string","data-theme":"andromeeda",style:{backgroundColor:"#23262E",color:"#D5CED9"},children:(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{children:"Code.tsx"})})})})," and add the following code that removes the tailwind styles from the pre tag."]}),(0,n.jsx)(e.div,{children:(0,n.jsx)(e.figure,{"data-rehype-pretty-code-figure":"",children:(0,n.jsx)(e.pre,{style:{backgroundColor:"#23262E",color:"#D5CED9"},tabIndex:"0","data-language":"typescript","data-theme":"andromeeda",children:(0,n.jsxs)(e.code,{"data-language":"typescript","data-theme":"andromeeda",style:{display:"grid"},children:[(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#C74DED"},children:"export"}),(0,n.jsx)(e.span,{style:{color:"#C74DED"},children:" const"}),(0,n.jsx)(e.span,{style:{color:"#FFE66D"},children:" Pre"}),(0,n.jsx)(e.span,{style:{color:"#EE5D43"},children:" ="}),(0,n.jsx)(e.span,{style:{color:"#D5CED9"},children:" ({ "}),(0,n.jsx)(e.span,{style:{color:"#EE5D43"},children:"..."}),(0,n.jsx)(e.span,{style:{color:"#00E8C6"},children:"props"}),(0,n.jsx)(e.span,{style:{color:"#D5CED9"},children:" }) "}),(0,n.jsx)(e.span,{style:{color:"#C74DED"},children:"=>"}),(0,n.jsx)(e.span,{style:{color:"#D5CED9"},children:" {"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#C74DED"},children:" return"}),(0,n.jsx)(e.span,{style:{color:"#D5CED9"},children:" ("})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#EE5D43"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#00E8C6"},children:"div"}),(0,n.jsx)(e.span,{style:{color:"#00E8C6"},children:" className"}),(0,n.jsx)(e.span,{style:{color:"#EE5D43"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#96E072"},children:"'not-prose'"}),(0,n.jsx)(e.span,{style:{color:"#EE5D43"},children:">"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#D5CED9"},children:" {"}),(0,n.jsx)(e.span,{style:{color:"#00E8C6"},children:"props"}),(0,n.jsx)(e.span,{style:{color:"#D5CED9"},children:"."}),(0,n.jsx)(e.span,{style:{color:"#00E8C6"},children:"children"}),(0,n.jsx)(e.span,{style:{color:"#D5CED9"},children:"}"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#EE5D43"},children:" "})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#D5CED9"},children:" )"})}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#D5CED9"},children:"}"})})]})})})}),(0,n.jsxs)(e.p,{children:["Import this into your ",(0,n.jsx)(e.span,{"data-rehype-pretty-code-figure":"",children:(0,n.jsx)(e.code,{"data-language":"string","data-theme":"andromeeda",style:{backgroundColor:"#23262E",color:"#D5CED9"},children:(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{children:"page.tsx"})})})})," and add it into the ",(0,n.jsx)(e.span,{"data-rehype-pretty-code-figure":"",children:(0,n.jsx)(e.code,{"data-language":"string","data-theme":"andromeeda",style:{backgroundColor:"#23262E",color:"#D5CED9"},children:(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{children:"options"})})})})," variable:"]}),(0,n.jsx)(e.div,{children:(0,n.jsx)(e.figure,{"data-rehype-pretty-code-figure":"",children:(0,n.jsx)(e.pre,{style:{backgroundColor:"#23262E",color:"#D5CED9"},tabIndex:"0","data-language":"typescript","data-theme":"andromeeda",children:(0,n.jsxs)(e.code,{"data-language":"typescript","data-theme":"andromeeda",style:{display:"grid"},children:[(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#C74DED"},children:"const"}),(0,n.jsx)(e.span,{style:{color:"#FFE66D"},children:" Homepage"}),(0,n.jsx)(e.span,{style:{color:"#EE5D43"},children:" ="}),(0,n.jsx)(e.span,{style:{color:"#D5CED9"},children:" () "}),(0,n.jsx)(e.span,{style:{color:"#C74DED"},children:"=>"}),(0,n.jsx)(e.span,{style:{color:"#D5CED9"},children:" {"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#C74DED"},children:" const"}),(0,n.jsx)(e.span,{style:{color:"#00E8C6"},children:" options"}),(0,n.jsx)(e.span,{style:{color:"#EE5D43"},children:" ="}),(0,n.jsx)(e.span,{style:{color:"#D5CED9"},children:" {"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#D5CED9"},children:" code: "}),(0,n.jsx)(e.span,{style:{color:"#00E8C6"},children:"CodeBlock"}),(0,n.jsx)(e.span,{style:{color:"#D5CED9"},children:","})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#A0A1A7CC"},children:" // Add here"})}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#D5CED9"},children:" pre: "}),(0,n.jsx)(e.span,{style:{color:"#00E8C6"},children:"Pre"}),(0,n.jsx)(e.span,{style:{color:"#D5CED9"},children:","})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#D5CED9"},children:" }"})}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#C74DED"},children:" return"}),(0,n.jsx)(e.span,{style:{color:"#D5CED9"},children:" ( "}),(0,n.jsx)(e.span,{style:{color:"#EE5D43"},children:"..."}),(0,n.jsx)(e.span,{style:{color:"#D5CED9"},children:" )"})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#D5CED9"},children:"}"})})]})})})}),(0,n.jsx)(e.p,{children:"This is going to remove that border."}),(0,n.jsx)(e.h1,{children:"5. Adding Rehype and Remark Plugins"}),(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.a,{href:"https://github.com/rehypejs/rehype/blob/main/doc/plugins.md",rel:"nofollow",children:"Rehype"})," and ",(0,n.jsx)(e.a,{href:"https://github.com/remarkjs/remark/blob/main/doc/plugins.md",rel:"nofollow",children:"Remark"})," are plugins used to transform and manipulate the HTML and Markdown content of a website, helping to enhance its functionality and appearance."]}),(0,n.jsx)(e.p,{children:"We are going to use the following:"}),(0,n.jsxs)(e.ul,{children:[(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.span,{"data-rehype-pretty-code-figure":"",children:(0,n.jsx)(e.code,{"data-language":"string","data-theme":"andromeeda",style:{backgroundColor:"#23262E",color:"#D5CED9"},children:(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{children:"rehype-sanitize"})})})})," : Sanitize the markdown"]}),(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.span,{"data-rehype-pretty-code-figure":"",children:(0,n.jsx)(e.code,{"data-language":"string","data-theme":"andromeeda",style:{backgroundColor:"#23262E",color:"#D5CED9"},children:(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{children:"rehype-external-links"})})})})," : Add an \u{1F517} icon on links"]}),(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.span,{"data-rehype-pretty-code-figure":"",children:(0,n.jsx)(e.code,{"data-language":"string","data-theme":"andromeeda",style:{backgroundColor:"#23262E",color:"#D5CED9"},children:(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{children:"remark-gfm"})})})})," : Plugin to support ",(0,n.jsx)(e.a,{href:"https://github.github.com/gfm/",rel:"nofollow",children:"GFM"})," (Supporting tables, footnotes, etc.)"]})]}),(0,n.jsx)(e.p,{children:"Install the Plugins:"}),(0,n.jsx)(e.div,{children:(0,n.jsx)(e.figure,{"data-rehype-pretty-code-figure":"",children:(0,n.jsx)(e.pre,{style:{backgroundColor:"#23262E",color:"#D5CED9"},tabIndex:"0","data-language":"bash","data-theme":"andromeeda",children:(0,n.jsx)(e.code,{"data-language":"bash","data-theme":"andromeeda",style:{display:"grid"},children:(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#FFE66D"},children:"npm"}),(0,n.jsx)(e.span,{style:{color:"#96E072"},children:" i"}),(0,n.jsx)(e.span,{style:{color:"#96E072"},children:" remark-gfm"}),(0,n.jsx)(e.span,{style:{color:"#96E072"},children:" rehype-external-links"}),(0,n.jsx)(e.span,{style:{color:"#96E072"},children:" rehype-sanitize"})]})})})})}),(0,n.jsxs)(e.p,{children:["Back to our ",(0,n.jsx)(e.span,{"data-rehype-pretty-code-figure":"",children:(0,n.jsx)(e.code,{"data-language":"string","data-theme":"andromeeda",style:{backgroundColor:"#23262E",color:"#D5CED9"},children:(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{children:"page.tsx"})})})})]}),(0,n.jsx)(e.div,{children:(0,n.jsx)(e.figure,{"data-rehype-pretty-code-figure":"",children:(0,n.jsx)(e.pre,{style:{backgroundColor:"#23262E",color:"#D5CED9"},tabIndex:"0","data-language":"typescript","data-theme":"andromeeda",children:(0,n.jsxs)(e.code,{"data-language":"typescript","data-theme":"andromeeda",style:{display:"grid"},children:[(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#C74DED"},children:"import"}),(0,n.jsx)(e.span,{style:{color:"#00E8C6"},children:" remarkGfm"}),(0,n.jsx)(e.span,{style:{color:"#C74DED"},children:" from"}),(0,n.jsx)(e.span,{style:{color:"#96E072"},children:" 'remark-gfm'"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#C74DED"},children:"import"}),(0,n.jsx)(e.span,{style:{color:"#00E8C6"},children:" rehypeSanitize"}),(0,n.jsx)(e.span,{style:{color:"#C74DED"},children:" from"}),(0,n.jsx)(e.span,{style:{color:"#96E072"},children:" 'rehype-sanitize'"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#C74DED"},children:"import"}),(0,n.jsx)(e.span,{style:{color:"#00E8C6"},children:" rehypeExternalLinks"}),(0,n.jsx)(e.span,{style:{color:"#C74DED"},children:" from"}),(0,n.jsx)(e.span,{style:{color:"#96E072"},children:" 'rehype-external-links'"})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#EE5D43"},children:"..."})}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#EE5D43"},children:"<"}),(0,n.jsx)(e.span,{style:{color:"#00E8C6"},children:"Markdown"})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#EE5D43"},children:" ..."})}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#00E8C6"},children:" remarkPlugins"}),(0,n.jsx)(e.span,{style:{color:"#EE5D43"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#D5CED9"},children:"{["}),(0,n.jsx)(e.span,{style:{color:"#00E8C6"},children:"remarkGfm"}),(0,n.jsx)(e.span,{style:{color:"#D5CED9"},children:"]}"})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#D5CED9"},children:" rehypePlugins={["})}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#00E8C6"},children:" rehypeSanitize"}),(0,n.jsx)(e.span,{style:{color:"#D5CED9"},children:","})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#D5CED9"},children:" ["}),(0,n.jsx)(e.span,{style:{color:"#00E8C6"},children:"rehypeExternalLinks"}),(0,n.jsx)(e.span,{style:{color:"#D5CED9"},children:","})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#D5CED9"},children:" { content: { type: "}),(0,n.jsx)(e.span,{style:{color:"#96E072"},children:"'text'"}),(0,n.jsx)(e.span,{style:{color:"#D5CED9"},children:", value: "}),(0,n.jsx)(e.span,{style:{color:"#96E072"},children:"'\u{1F517}'"}),(0,n.jsx)(e.span,{style:{color:"#D5CED9"},children:" } }"})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#D5CED9"},children:" ],"})}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#D5CED9"},children:" ]}"})}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#D5CED9"},children:">{source}"})})]})})})}),(0,n.jsxs)(e.p,{children:["Pass the remark plugins within ",(0,n.jsx)(e.span,{"data-rehype-pretty-code-figure":"",children:(0,n.jsx)(e.code,{"data-language":"string","data-theme":"andromeeda",style:{backgroundColor:"#23262E",color:"#D5CED9"},children:(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{children:"remarkPlugins"})})})})," and rehype plugins in ",(0,n.jsx)(e.span,{"data-rehype-pretty-code-figure":"",children:(0,n.jsx)(e.code,{"data-language":"string","data-theme":"andromeeda",style:{backgroundColor:"#23262E",color:"#D5CED9"},children:(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{children:"rehypePlugins"})})})})," (I know very surprising)."]}),(0,n.jsxs)(e.p,{children:["If any plugin needs any ",(0,n.jsx)(e.a,{href:"https://github.com/remarkjs/react-markdown#use-a-plugin-with-options",rel:"nofollow",children:"customization"})," put them in square brackets followed by the plugin name and the options in curly brackets in this syntax:"]}),(0,n.jsx)(e.p,{children:(0,n.jsx)(e.span,{"data-rehype-pretty-code-figure":"",children:(0,n.jsx)(e.code,{"data-language":"string","data-theme":"andromeeda",style:{backgroundColor:"#23262E",color:"#D5CED9"},children:(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{children:"[veryCoolPlugin, { { options } }]"})})})})}),(0,n.jsx)(e.h1,{children:"6. Header with Markdown buttons"}),(0,n.jsx)(e.p,{children:"Next we add a Header component that has buttons which on clicked inserts certain Markdown elements."}),(0,n.jsxs)(e.p,{children:["First create a ",(0,n.jsx)(e.span,{"data-rehype-pretty-code-figure":"",children:(0,n.jsx)(e.code,{"data-language":"string","data-theme":"andromeeda",style:{backgroundColor:"#23262E",color:"#D5CED9"},children:(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{children:"Header.tsx"})})})})," in the ",(0,n.jsx)(e.span,{"data-rehype-pretty-code-figure":"",children:(0,n.jsx)(e.code,{"data-language":"string","data-theme":"andromeeda",style:{backgroundColor:"#23262E",color:"#D5CED9"},children:(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{children:"components"})})})})," folder and write the following code:"]}),(0,n.jsx)(e.div,{children:(0,n.jsx)(e.figure,{"data-rehype-pretty-code-figure":"",children:(0,n.jsx)(e.pre,{style:{backgroundColor:"#23262E",color:"#D5CED9"},tabIndex:"0","data-language":"typescript","data-theme":"andromeeda",children:(0,n.jsxs)(e.code,{"data-language":"typescript","data-theme":"andromeeda",style:{display:"grid"},children:[(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#C74DED"},children:"const"}),(0,n.jsx)(e.span,{style:{color:"#FFE66D"},children:" Header"}),(0,n.jsx)(e.span,{style:{color:"#EE5D43"},children:" ="}),(0,n.jsx)(e.span,{style:{color:"#D5CED9"},children:" () "}),(0,n.jsx)(e.span,{style:{color:"#C74DED"},children:"=>"}),(0,n.jsx)(e.span,{style:{color:"#D5CED9"},children:" {"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#C74DED"},children:" const"}),(0,n.jsx)(e.span,{style:{color:"#00E8C6"},children:" btns"}),(0,n.jsx)(e.span,{style:{color:"#EE5D43"},children:" ="}),(0,n.jsx)(e.span,{style:{color:"#D5CED9"},children:" ["})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#D5CED9"},children:" { name: "}),(0,n.jsx)(e.span,{style:{color:"#96E072"},children:"'B'"}),(0,n.jsx)(e.span,{style:{color:"#D5CED9"},children:", syntax: "}),(0,n.jsx)(e.span,{style:{color:"#96E072"},children:"'**Bold**'"}),(0,n.jsx)(e.span,{style:{color:"#D5CED9"},children:" },"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#D5CED9"},children:" { name: "}),(0,n.jsx)(e.span,{style:{color:"#96E072"},children:"'I'"}),(0,n.jsx)(e.span,{style:{color:"#D5CED9"},children:", syntax: "}),(0,n.jsx)(e.span,{style:{color:"#96E072"},children:"'*Italic*'"}),(0,n.jsx)(e.span,{style:{color:"#D5CED9"},children:" },"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#D5CED9"},children:" { name: "}),(0,n.jsx)(e.span,{style:{color:"#96E072"},children:"'S'"}),(0,n.jsx)(e.span,{style:{color:"#D5CED9"},children:", syntax: "}),(0,n.jsx)(e.span,{style:{color:"#96E072"},children:"'~Strikethrough~'"}),(0,n.jsx)(e.span,{style:{color:"#D5CED9"},children:" },"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#D5CED9"},children:" { name: "}),(0,n.jsx)(e.span,{style:{color:"#96E072"},children:"'H1'"}),(0,n.jsx)(e.span,{style:{color:"#D5CED9"},children:", syntax: "}),(0,n.jsx)(e.span,{style:{color:"#96E072"},children:"'# '"}),(0,n.jsx)(e.span,{style:{color:"#D5CED9"},children:" },"})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#D5CED9"},children:"]"})}),` `,(0,n.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#C74DED"},children:" return"}),(0,n.jsx)(e.span,{style:{color:"#D5CED9"},children:" ("})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#EE5D43"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#00E8C6"},children:"header"}),(0,n.jsx)(e.span,{style:{color:"#00E8C6"},children:" className"}),(0,n.jsx)(e.span,{style:{color:"#EE5D43"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#96E072"},children:'"flex ... bg-[#253237]"'}),(0,n.jsx)(e.span,{style:{color:"#EE5D43"},children:">"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#D5CED9"},children:" {"}),(0,n.jsx)(e.span,{style:{color:"#00E8C6"},children:"btns"}),(0,n.jsx)(e.span,{style:{color:"#D5CED9"},children:"."}),(0,n.jsx)(e.span,{style:{color:"#00E8C6"},children:"map"}),(0,n.jsx)(e.span,{style:{color:"#D5CED9"},children:"("}),(0,n.jsx)(e.span,{style:{color:"#00E8C6"},children:"btn"}),(0,n.jsx)(e.span,{style:{color:"#EE5D43"},children:" =>"}),(0,n.jsx)(e.span,{style:{color:"#D5CED9"},children:" ("})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#EE5D43"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#00E8C6"},children:"button"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#00E8C6"},children:" key"}),(0,n.jsx)(e.span,{style:{color:"#EE5D43"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#D5CED9"},children:"{btn."}),(0,n.jsx)(e.span,{style:{color:"#00E8C6"},children:"syntax"}),(0,n.jsx)(e.span,{style:{color:"#D5CED9"},children:"}"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#00E8C6"},children:" className"}),(0,n.jsx)(e.span,{style:{color:"#EE5D43"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#96E072"},children:'"flex ...rounded-md"'})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#EE5D43"},children:" >"})}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#D5CED9"},children:" {"}),(0,n.jsx)(e.span,{style:{color:"#00E8C6"},children:"btn"}),(0,n.jsx)(e.span,{style:{color:"#D5CED9"},children:"."}),(0,n.jsx)(e.span,{style:{color:"#00E8C6"},children:"name"}),(0,n.jsx)(e.span,{style:{color:"#D5CED9"},children:"}"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#EE5D43"},children:" "})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#D5CED9"},children:" ))}"})}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#EE5D43"},children:" "})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#D5CED9"},children:" )"})}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#D5CED9"},children:"}"})}),` `,(0,n.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#C74DED"},children:"export"}),(0,n.jsx)(e.span,{style:{color:"#C74DED"},children:" default"}),(0,n.jsx)(e.span,{style:{color:"#00E8C6"},children:" Header"})]})]})})})}),(0,n.jsxs)(e.p,{children:["Import it in the main ",(0,n.jsx)(e.span,{"data-rehype-pretty-code-figure":"",children:(0,n.jsx)(e.code,{"data-language":"string","data-theme":"andromeeda",style:{backgroundColor:"#23262E",color:"#D5CED9"},children:(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{children:"page.tsx"})})})})]}),(0,n.jsx)(e.div,{children:(0,n.jsx)(e.figure,{"data-rehype-pretty-code-figure":"",children:(0,n.jsx)(e.pre,{style:{backgroundColor:"#23262E",color:"#D5CED9"},tabIndex:"0","data-language":"typescript","data-theme":"andromeeda",children:(0,n.jsxs)(e.code,{"data-language":"typescript","data-theme":"andromeeda",style:{display:"grid"},children:[(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#C74DED"},children:"import"}),(0,n.jsx)(e.span,{style:{color:"#00E8C6"},children:" Header"}),(0,n.jsx)(e.span,{style:{color:"#C74DED"},children:" from"}),(0,n.jsx)(e.span,{style:{color:"#96E072"},children:" '@/components/Header'"})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#C74DED"},children:"const"}),(0,n.jsx)(e.span,{style:{color:"#FFE66D"},children:" Homepage"}),(0,n.jsx)(e.span,{style:{color:"#EE5D43"},children:" ="}),(0,n.jsx)(e.span,{style:{color:"#D5CED9"},children:" () "}),(0,n.jsx)(e.span,{style:{color:"#C74DED"},children:"=>"}),(0,n.jsx)(e.span,{style:{color:"#D5CED9"},children:" {"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#C74DED"},children:" const"}),(0,n.jsx)(e.span,{style:{color:"#00E8C6"},children:" options"}),(0,n.jsx)(e.span,{style:{color:"#EE5D43"},children:" ="}),(0,n.jsx)(e.span,{style:{color:"#D5CED9"},children:" { code: "}),(0,n.jsx)(e.span,{style:{color:"#00E8C6"},children:"CodeBlock"}),(0,n.jsx)(e.span,{style:{color:"#D5CED9"},children:" }"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#C74DED"},children:" return"}),(0,n.jsx)(e.span,{style:{color:"#D5CED9"},children:" ("})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#EE5D43"},children:" <>"})}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#EE5D43"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#00E8C6"},children:"Header"}),(0,n.jsx)(e.span,{style:{color:"#EE5D43"},children:" />"}),(0,n.jsx)(e.span,{style:{color:"#A0A1A7CC"},children:" // Should be on top"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#EE5D43"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#00E8C6"},children:"div"}),(0,n.jsx)(e.span,{style:{color:"#00E8C6"},children:" className"}),(0,n.jsx)(e.span,{style:{color:"#EE5D43"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#96E072"},children:"'h-screen flex justify-between'"}),(0,n.jsx)(e.span,{style:{color:"#EE5D43"},children:">"})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#EE5D43"},children:" ..."})}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#EE5D43"},children:" "})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#EE5D43"},children:" "})}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#D5CED9"},children:" )"})}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#D5CED9"},children:"}"})})]})})})}),(0,n.jsxs)(e.p,{children:["Now here's the catch. Our states lie in the parent component and the ",(0,n.jsx)(e.span,{"data-rehype-pretty-code-figure":"",children:(0,n.jsx)(e.code,{"data-language":"string","data-theme":"andromeeda",style:{backgroundColor:"#23262E",color:"#D5CED9"},children:(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{children:"Header"})})})})," is a child component."]}),(0,n.jsxs)(e.p,{children:["How do we work with the states in the child component? The best solution is we create a function to change the state in parent component and pass the function to the child component. ",(0,n.jsx)(e.a,{href:"https://surajsharma.net/blog/react-update-parent-state-from-child",rel:"nofollow",children:"Read this article"})]}),(0,n.jsx)(e.div,{children:(0,n.jsx)(e.figure,{"data-rehype-pretty-code-figure":"",children:(0,n.jsx)(e.pre,{style:{backgroundColor:"#23262E",color:"#D5CED9"},tabIndex:"0","data-language":"typescript","data-theme":"andromeeda",children:(0,n.jsxs)(e.code,{"data-language":"typescript","data-theme":"andromeeda",style:{display:"grid"},children:[(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#C74DED"},children:"const"}),(0,n.jsx)(e.span,{style:{color:"#FFE66D"},children:" Homepage"}),(0,n.jsx)(e.span,{style:{color:"#EE5D43"},children:" ="}),(0,n.jsx)(e.span,{style:{color:"#D5CED9"},children:" () "}),(0,n.jsx)(e.span,{style:{color:"#C74DED"},children:"=>"}),(0,n.jsx)(e.span,{style:{color:"#D5CED9"},children:" {"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#C74DED"},children:" const"}),(0,n.jsx)(e.span,{style:{color:"#D5CED9"},children:" ["}),(0,n.jsx)(e.span,{style:{color:"#00E8C6"},children:"source"}),(0,n.jsx)(e.span,{style:{color:"#D5CED9"},children:", "}),(0,n.jsx)(e.span,{style:{color:"#00E8C6"},children:"setSource"}),(0,n.jsx)(e.span,{style:{color:"#D5CED9"},children:"] "}),(0,n.jsx)(e.span,{style:{color:"#EE5D43"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#FFE66D"},children:" useState"}),(0,n.jsx)(e.span,{style:{color:"#D5CED9"},children:"("}),(0,n.jsx)(e.span,{style:{color:"#96E072"},children:"''"}),(0,n.jsx)(e.span,{style:{color:"#D5CED9"},children:");"})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#C74DED"},children:" const"}),(0,n.jsx)(e.span,{style:{color:"#FFE66D"},children:" feedElement"}),(0,n.jsx)(e.span,{style:{color:"#EE5D43"},children:" ="}),(0,n.jsx)(e.span,{style:{color:"#D5CED9"},children:" ("}),(0,n.jsx)(e.span,{style:{color:"#00E8C6"},children:"syntax"}),(0,n.jsx)(e.span,{style:{color:"#EE5D43"},children:":"}),(0,n.jsx)(e.span,{style:{color:"#D5CED9"},children:" string) "}),(0,n.jsx)(e.span,{style:{color:"#C74DED"},children:"=>"}),(0,n.jsx)(e.span,{style:{color:"#D5CED9"},children:" {"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#C74DED"},children:" return"}),(0,n.jsx)(e.span,{style:{color:"#FFE66D"},children:" setSource"}),(0,n.jsx)(e.span,{style:{color:"#D5CED9"},children:"("}),(0,n.jsx)(e.span,{style:{color:"#00E8C6"},children:"source"}),(0,n.jsx)(e.span,{style:{color:"#EE5D43"},children:" +"}),(0,n.jsx)(e.span,{style:{color:"#00E8C6"},children:" syntax"}),(0,n.jsx)(e.span,{style:{color:"#D5CED9"},children:")"})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#D5CED9"},children:" }"})}),` `,(0,n.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#C74DED"},children:" return"}),(0,n.jsx)(e.span,{style:{color:"#D5CED9"},children:" ("})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#EE5D43"},children:" <>"})}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#EE5D43"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#00E8C6"},children:"Header"}),(0,n.jsx)(e.span,{style:{color:"#EE5D43"},children:" />"})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#EE5D43"},children:" ..."})}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#D5CED9"},children:" )"})}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#D5CED9"},children:"}"})})]})})})}),(0,n.jsxs)(e.p,{children:["In ",(0,n.jsx)(e.span,{"data-rehype-pretty-code-figure":"",children:(0,n.jsx)(e.code,{"data-language":"string","data-theme":"andromeeda",style:{backgroundColor:"#23262E",color:"#D5CED9"},children:(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{children:"Header.tsx"})})})})," we need to accept the function as a parameter and add it to the button using the ",(0,n.jsx)(e.span,{"data-rehype-pretty-code-figure":"",children:(0,n.jsx)(e.code,{"data-language":"string","data-theme":"andromeeda",style:{backgroundColor:"#23262E",color:"#D5CED9"},children:(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{children:"onClick"})})})})," attribute:"]}),(0,n.jsx)(e.div,{children:(0,n.jsx)(e.figure,{"data-rehype-pretty-code-figure":"",children:(0,n.jsx)(e.pre,{style:{backgroundColor:"#23262E",color:"#D5CED9"},tabIndex:"0","data-language":"typescript","data-theme":"andromeeda",children:(0,n.jsxs)(e.code,{"data-language":"typescript","data-theme":"andromeeda",style:{display:"grid"},children:[(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#C74DED"},children:"const"}),(0,n.jsx)(e.span,{style:{color:"#FFE66D"},children:" Header"}),(0,n.jsx)(e.span,{style:{color:"#EE5D43"},children:" ="}),(0,n.jsx)(e.span,{style:{color:"#D5CED9"},children:" ("})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#D5CED9"},children:" { "}),(0,n.jsx)(e.span,{style:{color:"#00E8C6"},children:"feedElement"}),(0,n.jsx)(e.span,{style:{color:"#D5CED9"},children:" }"}),(0,n.jsx)(e.span,{style:{color:"#EE5D43"},children:":"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#D5CED9"},children:" { "}),(0,n.jsx)(e.span,{style:{color:"#FFE66D"},children:"feedElement"}),(0,n.jsx)(e.span,{style:{color:"#EE5D43"},children:":"}),(0,n.jsx)(e.span,{style:{color:"#D5CED9"},children:" ("}),(0,n.jsx)(e.span,{style:{color:"#00E8C6"},children:"syntax"}),(0,n.jsx)(e.span,{style:{color:"#EE5D43"},children:":"}),(0,n.jsx)(e.span,{style:{color:"#D5CED9"},children:" string) "}),(0,n.jsx)(e.span,{style:{color:"#C74DED"},children:"=>"}),(0,n.jsx)(e.span,{style:{color:"#D5CED9"},children:" void }"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#D5CED9"},children:") "}),(0,n.jsx)(e.span,{style:{color:"#C74DED"},children:"=>"}),(0,n.jsx)(e.span,{style:{color:"#D5CED9"},children:" {"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#C74DED"},children:" const"}),(0,n.jsx)(e.span,{style:{color:"#00E8C6"},children:" btns"}),(0,n.jsx)(e.span,{style:{color:"#EE5D43"},children:" ="}),(0,n.jsx)(e.span,{style:{color:"#D5CED9"},children:" [ "}),(0,n.jsx)(e.span,{style:{color:"#EE5D43"},children:"..."}),(0,n.jsx)(e.span,{style:{color:"#D5CED9"},children:" ]"})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#C74DED"},children:" return"}),(0,n.jsx)(e.span,{style:{color:"#D5CED9"},children:" ("})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#EE5D43"},children:" ..."})}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#EE5D43"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#00E8C6"},children:"button"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#00E8C6"},children:" key"}),(0,n.jsx)(e.span,{style:{color:"#EE5D43"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#D5CED9"},children:"{btn."}),(0,n.jsx)(e.span,{style:{color:"#00E8C6"},children:"syntax"}),(0,n.jsx)(e.span,{style:{color:"#D5CED9"},children:"}"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#00E8C6"},children:" className"}),(0,n.jsx)(e.span,{style:{color:"#EE5D43"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#96E072"},children:'"flex ...rounded-md"'})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#00E8C6"},children:" onClick"}),(0,n.jsx)(e.span,{style:{color:"#EE5D43"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#D5CED9"},children:"{() => "}),(0,n.jsx)(e.span,{style:{color:"#FFE66D"},children:"feedElement"}),(0,n.jsx)(e.span,{style:{color:"#D5CED9"},children:"(btn.syntax)}"})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#EE5D43"},children:" >"})}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#D5CED9"},children:" {"}),(0,n.jsx)(e.span,{style:{color:"#00E8C6"},children:"btn"}),(0,n.jsx)(e.span,{style:{color:"#D5CED9"},children:"."}),(0,n.jsx)(e.span,{style:{color:"#00E8C6"},children:"name"}),(0,n.jsx)(e.span,{style:{color:"#D5CED9"},children:"}"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#EE5D43"},children:" "})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#D5CED9"},children:" )"})}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#D5CED9"},children:"}"})})]})})})}),(0,n.jsxs)(e.p,{children:["Back to ",(0,n.jsx)(e.span,{"data-rehype-pretty-code-figure":"",children:(0,n.jsx)(e.code,{"data-language":"string","data-theme":"andromeeda",style:{backgroundColor:"#23262E",color:"#D5CED9"},children:(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{children:"page.tsx"})})})})," we pass the ",(0,n.jsx)(e.span,{"data-rehype-pretty-code-figure":"",children:(0,n.jsx)(e.code,{"data-language":"string","data-theme":"andromeeda",style:{backgroundColor:"#23262E",color:"#D5CED9"},children:(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{children:"feedElement"})})})})," function to the Header"]}),(0,n.jsx)(e.div,{children:(0,n.jsx)(e.figure,{"data-rehype-pretty-code-figure":"",children:(0,n.jsx)(e.pre,{style:{backgroundColor:"#23262E",color:"#D5CED9"},tabIndex:"0","data-language":"typescript","data-theme":"andromeeda",children:(0,n.jsxs)(e.code,{"data-language":"typescript","data-theme":"andromeeda",style:{display:"grid"},children:[(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#C74DED"},children:"const"}),(0,n.jsx)(e.span,{style:{color:"#FFE66D"},children:" feedElement"}),(0,n.jsx)(e.span,{style:{color:"#EE5D43"},children:" ="}),(0,n.jsx)(e.span,{style:{color:"#D5CED9"},children:" ("}),(0,n.jsx)(e.span,{style:{color:"#00E8C6"},children:"syntax"}),(0,n.jsx)(e.span,{style:{color:"#EE5D43"},children:":"}),(0,n.jsx)(e.span,{style:{color:"#D5CED9"},children:" string) "}),(0,n.jsx)(e.span,{style:{color:"#C74DED"},children:"=>"}),(0,n.jsx)(e.span,{style:{color:"#D5CED9"},children:" {"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#C74DED"},children:" return"}),(0,n.jsx)(e.span,{style:{color:"#FFE66D"},children:" setSource"}),(0,n.jsx)(e.span,{style:{color:"#D5CED9"},children:"("}),(0,n.jsx)(e.span,{style:{color:"#00E8C6"},children:"source"}),(0,n.jsx)(e.span,{style:{color:"#EE5D43"},children:" +"}),(0,n.jsx)(e.span,{style:{color:"#00E8C6"},children:" syntax"}),(0,n.jsx)(e.span,{style:{color:"#D5CED9"},children:")"})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#D5CED9"},children:"}"})}),` `,(0,n.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#C74DED"},children:"return"}),(0,n.jsx)(e.span,{style:{color:"#D5CED9"},children:" ("})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#EE5D43"},children:" <>"})}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#EE5D43"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#00E8C6"},children:"Header"}),(0,n.jsx)(e.span,{style:{color:"#00E8C6"},children:" feedElement"}),(0,n.jsx)(e.span,{style:{color:"#EE5D43"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#D5CED9"},children:"{"}),(0,n.jsx)(e.span,{style:{color:"#00E8C6"},children:"feedElement"}),(0,n.jsx)(e.span,{style:{color:"#D5CED9"},children:"} "}),(0,n.jsx)(e.span,{style:{color:"#EE5D43"},children:"/>"})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#EE5D43"},children:" ..."})}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#D5CED9"},children:")"})})]})})})}),(0,n.jsx)(e.p,{children:"Now anytime you click on a button you should get the following Markdown Element."})]})}function h(l={}){let{wrapper:e}=l.components||{};return e?(0,n.jsx)(e,{...l,children:(0,n.jsx)(i,{...l})}):i(l)}return f(k);})(); ;return Component;

webdev blogs.

I built an Markdown editor using Next.js and TailwindCss 🔥

React Mastery: How to Write High Quality Code Like a Pro