Change typography styles for links and code

pbteja1998 · pbteja1998 · commit edc879f72ed7 · 2021-02-19T19:28:04.000+05:30
diff --git a/src/components/ui/toggle/Toggle.tsx b/src/components/ui/toggle/Toggle.tsx
@@ -6,7 +6,6 @@ import { useEffect, useState } from 'react'
 export default function Toggle() {
   const { theme, setTheme } = useTheme()
   const [enabled, setEnabled] = useState(theme === 'light' ? false : true)
-  console.log(theme)
 
   useEffect(() => {
     if (enabled) {
diff --git a/src/styles/globals.css b/src/styles/globals.css
@@ -23,3 +23,30 @@
 p {
   @apply text-black;
 }
+
+/* Removes ` and ` for inline codes */
+code::before {
+  content: none !important;
+}
+
+code::after {
+  content: none !important;
+}
+
+/* For inline code */
+code {
+  font-size: 80% !important;
+}
+
+code {
+  @apply bg-gray-100 text-black;
+}
+
+/* For code blocks */
+pre > code {
+  font-size: 90% !important;
+}
+
+.prose > a {
+  @apply text-brand-600;
+}
diff --git a/tailwind.config.js b/tailwind.config.js
@@ -30,6 +30,18 @@ module.exports = {
         normal: colors.gray,
         lightSurface: 'hsl(210, 20%, 98%)',
       },
+      typography: (theme) => ({
+        DEFAULT: {
+          css: {
+            code: {
+              // For inline codes
+              // Ex: `Coderplex`
+              padding: '3px 5px',
+              borderRadius: 5,
+            },
+          },
+        },
+      }),
     },
   },
   variants: {},
