Modify inline-code style

Author: ikoamu

styles/globals.css

@@ -27,13 +27,6 @@ td {
   border-style: dashed;
 }
 
-code.inline-code,
-code.inline-verbatim {
-  border-radius: 5px;
-  border: 1px solid #bcbec0;
-  padding: 2px;
-}
-
 pre.src-block[class] {
   font-size: 12px;
 }

util/processOrg.tsx

@@ -198,6 +198,21 @@ export const ProcessedOrg = (props: ProcessedOrgProps) => {
             p: ({ children }) => {
               return <p lang="en">{children as ReactNode}</p>
             },
+            code: ({ className, children }) => {
+              if (className === 'inline-code') {
+                return <chakra.code
+                  px={1}
+                  py={0.5}
+                  rounded="sm"
+                  fontSize="xs"
+                  color="gray.800"
+                  bgColor="gray.300"
+                >
+                  {children as any}
+                </chakra.code>
+              }
+              return children;
+            },
           },
         })
         .use(rehypePrism as any, { ignoreMissing: true }),