Add codeblock, add styles

apps/temp-docs/components/CodeBlock/CodeBlock.tsx

@@ -7,6 +7,7 @@ import js from 'react-syntax-highlighter/dist/cjs/languages/hljs/javascript'
 import py from 'react-syntax-highlighter/dist/cjs/languages/hljs/python'
 import sql from 'react-syntax-highlighter/dist/cjs/languages/hljs/sql'
 import { useState } from 'react'
+import { useTheme } from '../Providers'
 
 interface Props {
   lang: 'js' | 'sql' | 'py'
@@ -16,8 +17,10 @@ interface Props {
   children?: string
   size?: 'small' | 'medium' | 'large'
 }
-
 function CodeBlock(props: Props) {
+  const { isDarkMode } = useTheme()
+  const monokaiTheme = monokaiCustomTheme(isDarkMode)
+
   const [copied, setCopied] = useState(false)
 
   const handleCopy = () => {
@@ -42,26 +45,31 @@ function CodeBlock(props: Props) {
   // const large = props.size === 'large' ? true : false
   const large = false
 
+  // don't show line numbers if bash == lang
+  const showLineNumbers = lang !== 'bash'
+
   return (
     <div className="relative">
       <SyntaxHighlighter
         language={lang}
-        style={monokaiCustomTheme}
-        className={'code-block border-scale-600 rounded-lg border'}
+        style={monokaiTheme}
+        className={`code-block  rounded-lg border p-4 ${!showLineNumbers && 'pl-6'}`}
         customStyle={{
-          padding: 0,
           fontSize: large ? 18 : 12,
-          lineHeight: large ? 1.2 : 1.2,
-          borderTop: '1px solid #393939',
-          background: '#181818',
+          lineHeight: large ? 1.4 : 1.2,
+          // borderTop: '1px solid #393939',
+          //background: isDarkMode ? 'bg-scale-700' : 'bg-scale-300',
+          //background: isDarkMode ? '#444' : '#F1F3F5',
+          // we really should support proper light mode, not just show dark in both modes
+          background: isDarkMode ? '#444' : '#F1F3F5',
         }}
-        showLineNumbers={lang === 'cli' ? false : true}
+        showLineNumbers={showLineNumbers}
         lineNumberContainerStyle={{
           paddingTop: '128px',
         }}
         lineNumberStyle={{
           minWidth: '44px',
-          background: '#1e1e1e',
+          background: isDarkMode ? '#444' : '#F1F3F5',
           paddingLeft: '4px',
           paddingRight: '4px',
           marginRight: '12px',
@@ -75,7 +83,7 @@ function CodeBlock(props: Props) {
         {props.children?.trimEnd()}
       </SyntaxHighlighter>
       {!props.hideCopy && props.children ? (
-        <div className="dark absolute right-2 top-2">
+        <div className={`${isDarkMode ?? 'dark'} absolute right-2 top-2`}>
           <CopyToClipboard text={props.children}>
             <Button
               type="default"

apps/temp-docs/components/CodeBlock/CodeBlock.utils.js

@@ -1,116 +1,117 @@
-const monokaiCustomTheme = {
-  hljs: {
-    display: 'block',
-    overflowX: 'auto',
-    padding: '0.5em',
-    background: '#272822',
-    color: '#ddd',
-  },
-  'hljs-tag': {
-    color: '#569cd6',
-  },
-  'hljs-keyword': {
-    color: '#569cd6',
-    fontWeight: 'normal',
-  },
-  'hljs-selector-tag': {
-    color: '#569cd6',
-    fontWeight: 'normal',
-  },
-  'hljs-literal': {
-    color: '#569cd6',
-    fontWeight: 'normal',
-  },
-  'hljs-strong': {
-    color: '#569cd6',
-  },
-  'hljs-name': {
-    color: '#569cd6',
-  },
-  'hljs-code': {
-    color: '#66d9ef',
-  },
-  'hljs-class .hljs-title': {
-    color: 'gray',
-  },
-  'hljs-attribute': {
-    color: '#bf79db',
-  },
-  'hljs-symbol': {
-    color: '#bf79db',
-  },
-  'hljs-regexp': {
-    color: '#bf79db',
-  },
-  'hljs-link': {
-    color: '#bf79db',
-  },
-  'hljs-string': {
-    color: '#3ECF8E',
-  },
-  'hljs-bullet': {
-    color: '#3ECF8E',
-  },
-  'hljs-subst': {
-    color: '#3ECF8E',
-  },
-  'hljs-title': {
-    color: '#3ECF8E',
-    fontWeight: 'normal',
-  },
-  'hljs-section': {
-    color: '#3ECF8E',
-    fontWeight: 'normal',
-  },
-  'hljs-emphasis': {
-    color: '#3ECF8E',
-  },
-  'hljs-type': {
-    color: '#3ECF8E',
-    fontWeight: 'normal',
-  },
-  'hljs-built_in': {
-    color: '#3ECF8E',
-  },
-  'hljs-builtin-name': {
-    color: '#3ECF8E',
-  },
-  'hljs-selector-attr': {
-    color: '#3ECF8E',
-  },
-  'hljs-selector-pseudo': {
-    color: '#3ECF8E',
-  },
-  'hljs-addition': {
-    color: '#3ECF8E',
-  },
-  'hljs-variable': {
-    color: '#3ECF8E',
-  },
-  'hljs-template-tag': {
-    color: '#3ECF8E',
-  },
-  'hljs-template-variable': {
-    color: '#3ECF8E',
-  },
-  'hljs-comment': {
-    color: '#75715e',
-  },
-  'hljs-quote': {
-    color: '#75715e',
-  },
-  'hljs-deletion': {
-    color: '#75715e',
-  },
-  'hljs-meta': {
-    color: '#75715e',
-  },
-  'hljs-doctag': {
-    fontWeight: 'normal',
-  },
-  'hljs-selector-id': {
-    fontWeight: 'normal',
-  },
+const monokaiCustomTheme = (isDarkMode) => {
+  return {
+    hljs: {
+      display: 'block',
+      overflowX: 'auto',
+      background: '#272822',
+      color: '#ddd',
+    },
+    'hljs-tag': {
+      color: '#569cd6',
+    },
+    'hljs-keyword': {
+      color: '#569cd6',
+      fontWeight: 'normal',
+    },
+    'hljs-selector-tag': {
+      color: '#569cd6',
+      fontWeight: 'normal',
+    },
+    'hljs-literal': {
+      color: '#569cd6',
+      fontWeight: 'normal',
+    },
+    'hljs-strong': {
+      color: '#569cd6',
+    },
+    'hljs-name': {
+      color: '#569cd6',
+    },
+    'hljs-code': {
+      color: '#66d9ef',
+    },
+    'hljs-class .hljs-title': {
+      color: 'gray',
+    },
+    'hljs-attribute': {
+      color: '#bf79db',
+    },
+    'hljs-symbol': {
+      color: '#bf79db',
+    },
+    'hljs-regexp': {
+      color: '#bf79db',
+    },
+    'hljs-link': {
+      color: '#bf79db',
+    },
+    'hljs-string': {
+      color: '#3ECF8E',
+    },
+    'hljs-bullet': {
+      color: '#3ECF8E',
+    },
+    'hljs-subst': {
+      color: '#3ECF8E',
+    },
+    'hljs-title': {
+      color: '#3ECF8E',
+      fontWeight: 'normal',
+    },
+    'hljs-section': {
+      color: '#3ECF8E',
+      fontWeight: 'normal',
+    },
+    'hljs-emphasis': {
+      color: '#3ECF8E',
+    },
+    'hljs-type': {
+      color: '#3ECF8E',
+      fontWeight: 'normal',
+    },
+    'hljs-built_in': {
+      color: '#3ECF8E',
+    },
+    'hljs-builtin-name': {
+      color: '#3ECF8E',
+    },
+    'hljs-selector-attr': {
+      color: '#3ECF8E',
+    },
+    'hljs-selector-pseudo': {
+      color: '#3ECF8E',
+    },
+    'hljs-addition': {
+      color: '#3ECF8E',
+    },
+    'hljs-variable': {
+      color: '#3ECF8E',
+    },
+    'hljs-template-tag': {
+      color: '#3ECF8E',
+    },
+    'hljs-template-variable': {
+      color: '#3ECF8E',
+    },
+    'hljs-comment': {
+      color: isDarkMode ? '#999' : '#888',
+    },
+    'hljs-quote': {
+      color: '#75715e',
+    },
+    'hljs-deletion': {
+      color: '#75715e',
+    },
+    'hljs-meta': {
+      color: '#75715e',
+    },
+    'hljs-doctag': {
+      fontWeight: 'normal',
+    },
+    'hljs-selector-id': {
+      fontWeight: 'normal',
+    },
+  }
 }
 
 export default monokaiCustomTheme

apps/temp-docs/components/index.tsx

@@ -16,7 +16,7 @@ const components = {
   // TabsPanel: (props: any) => {
   //   return <Tabs.Panel {...props} />
   // },
-  // code: (props: any) => <CodeBlock {...props} />,
+  code: (props: any) => <CodeBlock {...props} />,
 }
 
 export default components

apps/temp-docs/pages/_app.tsx

@@ -3,6 +3,7 @@ import type { AppProps } from 'next/app'
 import { ThemeProvider } from '../components/Providers'
 import { SearchProvider } from '~/components/Search'
 import '../styles/main.scss'
+import '../styles/prism-okaidia.scss'
 
 function MyApp({ Component, pageProps }: AppProps) {
   return (

apps/temp-docs/styles/main.scss

@@ -572,3 +572,8 @@ article h1 {
 .small:not(.prose *):not(.overwrite) {
   @apply text-scale-900 text-xs;
 }
+
+code[class*='language-'],
+pre[class*='language-'] {
+  text-shadow: none !important;
+}

apps/temp-docs/styles/prism-okaidia.scss

@@ -0,0 +1,123 @@
+/**
+ * okaidia theme for JavaScript, CSS and HTML
+ * Loosely based on Monokai textmate theme by http://www.monokai.nl/
+ * @author ocodia
+ */
+
+code[class*='language-'],
+pre[class*='language-'] {
+  color: #555;
+  text-shadow: 0 1px rgba(0, 0, 0, 0.3);
+  font-family: Consolas, Monaco, 'Andale Mono', monospace;
+  direction: ltr;
+  text-align: left;
+  white-space: pre;
+  word-spacing: normal;
+  word-break: normal;
+  line-height: 1.5;
+
+  -moz-tab-size: 4;
+  -o-tab-size: 4;
+  tab-size: 4;
+
+  -webkit-hyphens: none;
+  -moz-hyphens: none;
+  -ms-hyphens: none;
+  hyphens: none;
+
+  .dark & {
+    color: #f8f8f2;
+  }
+}
+
+/* Code blocks */
+pre[class*='language-'] {
+  padding: 1em;
+  margin: 0.5em 0;
+  overflow: auto;
+  border-radius: 0.3em;
+}
+
+:not(pre) > code[class*='language-'],
+pre[class*='language-'] {
+  background: #272822;
+}
+
+/* Inline code */
+:not(pre) > code[class*='language-'] {
+  padding: 0.1em;
+  border-radius: 0.3em;
+}
+
+.token.comment,
+.token.prolog,
+.token.doctype,
+.token.cdata {
+  color: slategray;
+}
+
+.token.punctuation {
+  color: #f8f8f2;
+}
+
+.namespace {
+  opacity: 0.7;
+}
+
+.token.property,
+.token.tag,
+.token.constant,
+.token.symbol,
+.token.deleted {
+  color: #f92672;
+}
+
+.token.boolean,
+.token.number {
+  color: #ae81ff;
+}
+
+.token.selector,
+.token.attr-name,
+.token.string,
+.token.char,
+.token.builtin,
+.token.inserted {
+  color: #a6e22e;
+}
+
+.token.operator,
+.token.entity,
+.token.url,
+.language-css .token.string,
+.style .token.string,
+.token.variable {
+  color: #f8f8f2;
+}
+
+.token.atrule,
+.token.attr-value,
+.token.function {
+  color: #e6db74;
+}
+
+.token.keyword {
+  color: #66d9ef;
+}
+
+.token.regex,
+.token.important {
+  color: #fd971f;
+}
+
+.token.important,
+.token.bold {
+  font-weight: bold;
+}
+.token.italic {
+  font-style: italic;
+}
+
+.token.entity {
+  cursor: help;
+}