Add custom anchor component

components/mdx/Anchor.tsx

@@ -0,0 +1,26 @@
+import { AnchorHTMLAttributes } from 'react';
+import cn from 'classnames';
+import { FiExternalLink } from 'react-icons/fi';
+
+interface Props extends AnchorHTMLAttributes<HTMLAnchorElement> {}
+
+const Anchor = ({ children, ...rest }: Props) => {
+  return (
+    <>
+      <a
+        {...rest}
+        className={cn(
+          'mx-[2px] text-teal-500 relative',
+          'before:left-0 before:top-[1px] before:block before:absolute',
+          'before:w-full before:h-full before:transition-all before:shadow-underline',
+          'hover:before:shadow-throughline',
+          'dark:text-teal-600'
+        )}
+      >
+        {children}
+      </a>
+    </>
+  );
+};
+
+export default Anchor;

pages/_app.tsx

@@ -5,6 +5,12 @@ import { ThemeProvider } from 'next-themes';
 import 'styles/prism-one-light.css';
 import 'styles/prism-one-dark.css';
 import 'styles/rua.css';
+import { MDXProvider } from '@mdx-js/react';
+import Anchor from 'components/mdx/Anchor';
+
+const components = {
+  a: Anchor,
+};
 
 function MyApp({ Component, pageProps }: AppPropsWithLayout) {
   const getLayout = Component.getLayout ?? ((page) => page);
@@ -26,7 +32,9 @@ function MyApp({ Component, pageProps }: AppPropsWithLayout) {
         enableSystem
         defaultTheme="system"
       >
-        {getLayout(<Component {...pageProps} />)}
+        <MDXProvider components={components}>
+          {getLayout(<Component {...pageProps} />)}
+        </MDXProvider>
       </ThemeProvider>
     </>
   );