feat: more styles for prism code block

Author: unix

package.json

@@ -11,8 +11,9 @@
     "export": "npm run now-build && next export"
   },
   "dependencies": {
-    "@zeit-ui/react": "^1.0.0-rc.9",
+    "@zeit-ui/react": "^1.0.0-rc.11",
     "@zeit-ui/react-icons": "^1.2.1",
+    "@zeit-ui/react-prism": "^1.0.0",
     "ms": "^2.1.2",
     "next": "^9.3.6",
     "react": "16.13.0",

pages/_app.jsx

@@ -1,13 +1,13 @@
 import Head from 'next/head'
 import BLOG from '../blog.config'
+import { PrismBaseline } from '@zeit-ui/react-prism'
+import { ZEITUIProvider, CSSBaseline } from '@zeit-ui/react'
 import React, { useCallback, useState, useEffect, useMemo } from 'react'
+import useDomClean from 'lib/use-dom-clean'
 import { getDNSPrefetchValue } from 'lib/data-transform'
 import ThemeConfigProvider from 'lib/components/theme-config-provider'
-import { ZEITUIProvider, useTheme, CSSBaseline } from '@zeit-ui/react'
-import useDomClean from 'lib/use-dom-clean'
 
 const Application = ({ Component, pageProps }) => {
-  const theme = useTheme()
   const [themeType, setThemeType] = useState('light')
   const domain = useMemo(() => getDNSPrefetchValue(BLOG.domain), [])
   const changeHandle = useCallback(isDark => {
@@ -46,52 +46,12 @@ const Application = ({ Component, pageProps }) => {
       <meta name="viewport" content="initial-scale=1, maximum-scale=5, minimum-scale=1, viewport-fit=cover" />
     </Head>
     <ZEITUIProvider theme={{ type: themeType }}>
-      <CSSBaseline>
+      <CSSBaseline />
+      <PrismBaseline />
       <ThemeConfigProvider onChange={changeHandle}>
         <Component {...pageProps} />
       </ThemeConfigProvider>
-      </CSSBaseline>
       <style global jsx>{`
-        .tag {
-          color: ${theme.palette.accents_5};
-        }
-        
-        .punctuation {
-          color: ${theme.palette.accents_5};
-        }
-        
-        .attr-name {
-          color: ${theme.palette.accents_6};
-        }
-        
-        .attr-value {
-          color: ${theme.palette.accents_4};
-        }
-        
-        .language-javascript {
-          color: ${theme.palette.accents_4};
-        }
-        
-        span[class*="class-name"] {
-          color: ${theme.palette.purple};
-        }
-        
-        span.token.string {
-          color: ${theme.palette.accents_5};
-        }
-        
-        span.keyword {
-          color: ${theme.palette.success}
-        }
-        
-        span.plain-text {
-          color: ${theme.palette.accents_3};
-        }
-        
-        body {
-          overflow-x: hidden;
-        }
-        
         @media only screen and (max-width: 767px) {
           html {
             font-size: 15px;

yarn.lock

@@ -1308,10 +1308,15 @@
   resolved "https://registry.yarnpkg.com/@zeit-ui/react-icons/-/react-icons-1.2.1.tgz#6e200adf6870aca0cd4a6e0d2ba5fb5196d53234"
   integrity sha512-K0r7ZmqCB6Tl/tCmrjKXYuoWL9iMxUQem1lzUP/QCEJI+o0v5B0MnrEMzxrlXDFZDN/0wPjna0jcecQTL80GAA==
 
-"@zeit-ui/react@^1.0.0-rc.9":
-  version "1.0.0-rc.9"
-  resolved "https://registry.yarnpkg.com/@zeit-ui/react/-/react-1.0.0-rc.9.tgz#be54410f99d05a7970ccded5403f565eeeee07cb"
-  integrity sha512-PRqlw5Ydhu88aV7/6vMPaFe7TCMnwlb4WPJ4BahNULRlnNrYOZ4DF4E50U3z7M8sE+OXFkywVz2jvJI3BZbd6Q==
+"@zeit-ui/react-prism@^1.0.0":
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/@zeit-ui/react-prism/-/react-prism-1.0.0.tgz#3438c648f71b7fc0d8a7c53a0cba90bc3dc2f784"
+  integrity sha512-gLGHCaVX7EM/dPl82GCVlLkpkA101cSK7gVnV0auQRHTiUq/Jeger87JbbQ+dJNSWH636sXiyErR0mwHpqHCUw==
+
+"@zeit-ui/react@^1.0.0-rc.11":
+  version "1.0.0-rc.11"
+  resolved "https://registry.yarnpkg.com/@zeit-ui/react/-/react-1.0.0-rc.11.tgz#de6854b596cb0b1192835207d39f0424de85854a"
+  integrity sha512-6HhnL9TGAbMfPqts7rlcMkLLQgSwyzxnk/xa2eQ64AcuLj765zmyUFahvDT4z1ZKtGgYphESmt1feMjixwd/7A==
   dependencies:
     styled-jsx "^3.2.5"