Merge pull request #8 from opstrace/replaceable-theme

Add ability to style codeblocks and inline code with a custom theme

.stylelintrc.json

@@ -0,0 +1,3 @@
+{
+  "extends": "stylelint-config-standard"
+}

package.json

@@ -63,43 +63,43 @@
     "prism-react-renderer": "1.2.1",
     "react-click-away-listener": "2.0.3",
     "react-copy-to-clipboard": "^5.0.3",
-    "react-instantsearch-dom": "^6.12.0",
-    "react-markdown": "^6.0.2",
+    "react-instantsearch-dom": "^6.12.1",
+    "react-markdown": "^6.0.3",
     "react-scroll": "^1.8.3",
     "rehype-autolink-headings": "^5.1.0",
     "rehype-slug": "^4.0.1",
     "remark-external-links": "^8.0.0",
-    "remark-gfm": "^1.0.0"
+    "remark-gfm": "^2.0.0"
   },
   "devDependencies": {
-    "@babel/preset-env": "^7.14.8",
+    "@babel/preset-env": "^7.15.0",
     "@babel/preset-react": "^7.14.5",
     "@commitlint/cli": "^13.1.0",
     "@commitlint/config-conventional": "^13.1.0",
     "@mdx-js/runtime": "^1.6.22",
     "@rollup/plugin-babel": "^5.3.0",
-    "@rollup/plugin-commonjs": "^19.0.2",
+    "@rollup/plugin-commonjs": "^20.0.0",
     "@rollup/plugin-json": "^4.1.0",
     "@rollup/plugin-node-resolve": "^13.0.4",
     "@testing-library/jest-dom": "^5.14.1",
     "@testing-library/react": "^12.0.0",
     "@testing-library/user-event": "^13.2.1",
-    "eslint": "^7.31.0",
+    "eslint": "^7.32.0",
     "eslint-config-prettier": "^8.3.0",
     "eslint-plugin-jest": "^24.4.0",
     "eslint-plugin-mdx": "^1.14.1",
     "eslint-plugin-react": "^7.24.0",
     "husky": "^7.0.1",
     "jest": "^27.0.6",
-    "lint-staged": "^11.1.1",
+    "lint-staged": "^11.1.2",
     "next": "^11.0.0",
     "nock": "^13.1.1",
     "node-fetch": "^2.6.1",
     "pinst": "^2.1.6",
     "prettier": "^2.3.2",
     "react": "*",
     "react-dom": "*",
-    "rollup": "^2.54.0",
+    "rollup": "^2.56.0",
     "stylelint": "^13.13.1",
     "stylelint-config-standard": "^22.0.0",
     "watch": "^1.0.2"

src/components/CodeBlock.jsx

@@ -31,14 +31,14 @@ const doneIcon = (
   </svg>
 )
 
-export default function CodeBlock({ className = '', children }) {
+export default function CodeBlock({ children, className = '', theme = github }) {
   const [copied, setCopied] = useState(copyIcon)
   const language = className.replace(/language-/, '')
   return (
     <div className="relative">
       <Highlight
         {...defaultProps}
-        theme={github}
+        theme={theme}
         code={children.trim()}
         language={language}
       >

src/components/InlineCode.jsx

@@ -1,14 +1,15 @@
 import React from 'react'
 import github from 'prism-react-renderer/themes/github'
 
-export default function InlineCode({ className, children }) {
+export default function InlineCode({ className, children, theme = github }) {
+  console.log(theme)
   return (
     <code
       className={className}
       style={{
-        color: github.plain.color,
+        color: theme.plain.color,
         // stylelint-disable-next-line value-keyword-case
-        backgroundColor: github.plain.backgroundColor,
+        backgroundColor: theme.plain.backgroundColor,
         padding: '0.2em 0.4em',
         borderRadius: '6px',
         margin: 0,

src/index.jsx

@@ -1,3 +1,4 @@
+/* eslint-disable react/display-name */
 import React from 'react'
 import { MDXRemote } from 'next-mdx-remote'
 import { State, Observe } from 'mdx-observable'
@@ -7,14 +8,13 @@ import InlineCode from './components/InlineCode.jsx'
 import Tabs, { Tab } from './components/Tabs.jsx'
 import Interpolate from './components/Interpolate.jsx'
 
-export default function Documentation({ source }) {
+export default function Documentation({ source, theme }) {
   const components = {
     Tabs: Tabs,
     Tab: Tab,
     Interpolate,
     State,
     Observe,
-    // eslint-disable-next-line react/display-name
     Element: ({ name, ...props }) => {
       return (
         <Element
@@ -24,11 +24,10 @@ export default function Documentation({ source }) {
         />
       )
     },
-    // eslint-disable-next-line react/display-name
     pre: (props) => <div {...props} />,
-    code: CodeBlock,
-    inlineCode: InlineCode
+    code: (props) => <CodeBlock {...props} theme={theme} />,
+    inlineCode: (props) => <InlineCode {...props} theme={theme} />
   }
 
-  return <MDXRemote {...source} components={components} />
+  return <MDXRemote {...source} components={components} theme={theme} />
 }