feat: add support for highlight code sections

examples/basic/src/components/Button.mdx

@@ -29,4 +29,4 @@ Buttons make common actions more obvious and help users more easily perform them
   <Button scale="small">Click me</Button>
   <Button scale="normal">Click me</Button>
   <Button scale="big">Click me</Button>
-</Playground
+</Playground>

examples/basic/src/hocs/withProps.mdx

@@ -6,3 +6,18 @@ export const meta = doc('withProp')
 # withProps
 
 This section talk about withProps hoc
+
+```jsx
+import React from 'react'
+import { withProps } from '@lib/withProps'
+
+const mapProps = () => ({
+  greet: 'Hi'
+})
+
+export const Greeter = withProps(mapProps)(
+  ({ greet, name }) => (
+    <div>{greet} {name}</div>
+  )
+)
+```

packages/docz-core/package.json

@@ -47,7 +47,6 @@
     "koa-static": "^4.0.2",
     "load-cfg": "^0.0.1",
     "lodash.get": "^4.4.2",
-    "node-prismjs": "^0.1.1",
     "prettier": "^1.12.0",
     "react-hot-loader": "4.1.2",
     "remark-parse": "^5.0.0",

packages/docz-core/src/types.d.ts

@@ -8,7 +8,6 @@ declare module 'unist-util-visit'
 declare module 'unist-util-find'
 declare module 'unist-util-remove'
 declare module 'hast-util-to-string'
-declare module 'node-prismjs'
 declare module 'remark-parse'
 declare module 'to-vfile'
 declare module 'art-template'

packages/docz-core/src/utils/plugin-hast.ts

@@ -1,5 +1,4 @@
 import visit from 'unist-util-visit'
-import prism from 'node-prismjs'
 import nodeToString from 'hast-util-to-string'
 
 import { format } from '../utils/format'
@@ -18,12 +17,11 @@ const addCodeProp = (node: any) => {
 
   if (isPlayground(name)) {
     const code = format(nodeToString(node)).slice(1, Infinity)
-    const html = prism.highlight(code, prism.languages.jsx)
 
     const codeComponent = `(
-      <pre className="react-prism language-jsx">
-        <code dangerouslySetInnerHTML={{ __html: \`${html}\` }} />
-      </pre>
+      <components.pre className="react-prism language-jsx">
+        <code>{\`${code}\`}</code>
+      </components.pre>
     )`
 
     node.value = node.value.replace(

packages/docz-theme-default/package.json

@@ -16,11 +16,13 @@
     "build": "libundler build --ts -e all --c --sm"
   },
   "dependencies": {
+    "classnames": "^2.2.5",
     "docz": "^0.0.1",
     "emotion": "^9.1.2",
     "emotion-normalize": "^7.0.1",
     "history": "^4.7.2",
     "polished": "^1.9.2",
+    "prismjs": "^1.14.0",
     "react": "^16.3.2",
     "react-dom": "^16.3.2",
     "react-emotion": "^9.1.2",
@@ -38,6 +40,8 @@
     "@babel/plugin-proposal-class-properties": "^7.0.0-beta.44",
     "@babel/preset-env": "^7.0.0-beta.44",
     "@babel/preset-react": "^7.0.0-beta.44",
+    "@types/classnames": "^2.2.3",
+    "@types/prismjs": "^1.9.0",
     "@types/react-router-dom": "^4.2.6",
     "babel-plugin-emotion": "^9.1.0"
   }

packages/docz-theme-default/src/components/Pre.tsx

@@ -0,0 +1,47 @@
+import 'prismjs/components/prism-jsx'
+
+import React, { PureComponent } from 'react'
+import cx from 'classnames'
+import prism from 'prismjs'
+import styled from 'react-emotion'
+
+import * as colors from '../styles/colors'
+
+const PreStyled = styled('pre')`
+  border: 1px solid ${colors.border};
+`
+
+interface PreProps {
+  className: string
+  children: any
+}
+
+export class Pre extends PureComponent<PreProps> {
+  private el: any
+
+  public render(): JSX.Element {
+    const { children } = this.props
+    const childrenProps = children.props.props
+    const childrenClassName = childrenProps && childrenProps.className
+
+    const className = cx('react-prism', this.props.className, childrenClassName)
+
+    return (
+      <PreStyled innerRef={ref => (this.el = ref)} className={className}>
+        <code>{children.props.children}</code>
+      </PreStyled>
+    )
+  }
+
+  public componentDidMount(): void {
+    this.highlightCode()
+  }
+
+  public componentDidUpdate(): void {
+    this.highlightCode()
+  }
+
+  private highlightCode(): void {
+    prism.highlightElement(this.el)
+  }
+}

packages/docz-theme-default/src/components/Render.tsx

@@ -6,16 +6,14 @@ import styled from 'react-emotion'
 import * as colors from '../styles/colors'
 
 const ComponentWrapper = styled('div')`
-  position: relative;
   padding: 2rem;
-  background: white;
+  background: transparent;
   border: 1px solid ${colors.border};
+  border-bottom: 0;
   border-radius: 3px 3px 0 0;
 `
 
 const CodeWrapper = styled('div')`
-  border: 1px solid ${colors.border};
-  border-top: 0;
   border-radius: 0 0 3px 3px;
 
   pre {

packages/docz-theme-default/src/components/index.tsx

@@ -1,4 +1,5 @@
 export { Container } from './Container'
+export { Pre } from './Pre'
 export { H1 } from './H1'
 export { H2 } from './H2'
 export { H3 } from './H3'

packages/docz-theme-default/src/modules/Doc/index.tsx

@@ -20,6 +20,7 @@ export const Doc: SFC<DocObj> = ({ id, route, component: Component }) => (
             table: components.Table,
             render: components.Render,
             tooltip: components.Tooltip,
+            pre: components.Pre,
           }}
         />
       </Container>

yarn.lock

@@ -1329,6 +1329,10 @@
     "@types/events" "*"
     "@types/node" "*"
 
+"@types/classnames@^2.2.3":
+  version "2.2.3"
+  resolved "https://registry.npmjs.org/@types/classnames/-/classnames-2.2.3.tgz#3f0ff6873da793870e20a260cada55982f38a9e5"
+
 "@types/clean-css@*":
   version "3.4.30"
   resolved "https://registry.npmjs.org/@types/clean-css/-/clean-css-3.4.30.tgz#0052c136f5248002428e3638b37de4a39818641d"
@@ -1430,6 +1434,10 @@
   version "1.12.1"
   resolved "https://registry.npmjs.org/@types/prettier/-/prettier-1.12.1.tgz#d8aa9c353adc3e8c1c6e51e7acb642315fd79d2d"
 
+"@types/prismjs@^1.9.0":
+  version "1.9.0"
+  resolved "https://registry.npmjs.org/@types/prismjs/-/prismjs-1.9.0.tgz#38af9491e2f105079a443703ee675fb27371ec94"
+
 "@types/react-dom@^16.0.5":
   version "16.0.5"
   resolved "https://registry.npmjs.org/@types/react-dom/-/react-dom-16.0.5.tgz#a757457662e3819409229e8f86795ff37b371f96"
@@ -2383,6 +2391,10 @@ class-utils@^0.3.5:
     isobject "^3.0.0"
     static-extend "^0.1.1"
 
+classnames@^2.2.5:
+  version "2.2.5"
+  resolved "https://registry.npmjs.org/classnames/-/classnames-2.2.5.tgz#fb3801d453467649ef3603c7d61a02bd129bde6d"
+
 clean-css@4.1.x:
   version "4.1.11"
   resolved "https://registry.npmjs.org/clean-css/-/clean-css-4.1.11.tgz#2ecdf145aba38f54740f26cefd0ff3e03e125d6a"
@@ -2403,9 +2415,9 @@ cli-width@^2.0.0:
   version "2.2.0"
   resolved "https://registry.npmjs.org/cli-width/-/cli-width-2.2.0.tgz#ff19ede8a9a5e579324147b0c11f0fbcbabed639"
 
-clipboard@^1.5.5:
-  version "1.7.1"
-  resolved "https://registry.npmjs.org/clipboard/-/clipboard-1.7.1.tgz#360d6d6946e99a7a1fef395e42ba92b5e9b5a16b"
+clipboard@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.npmjs.org/clipboard/-/clipboard-2.0.1.tgz#a12481e1c13d8a50f5f036b0560fe5d16d74e46a"
   dependencies:
     good-listener "^1.2.2"
     select "^1.1.2"
@@ -5864,12 +5876,6 @@ node-pre-gyp@^0.9.0:
     semver "^5.3.0"
     tar "^4"
 
-node-prismjs@^0.1.1:
-  version "0.1.1"
-  resolved "https://registry.npmjs.org/node-prismjs/-/node-prismjs-0.1.1.tgz#e9dac3304981501e328acdbc74361830b3da1eb3"
-  dependencies:
-    prismjs "~1.6.0"
-
 node-status-codes@^1.0.0:
   version "1.0.0"
   resolved "https://registry.npmjs.org/node-status-codes/-/node-status-codes-1.0.0.tgz#5ae5541d024645d32a58fcddc9ceecea7ae3ac2f"
@@ -6398,11 +6404,11 @@ pretty-time@^1.0.0:
     is-number "^5.0.0"
     nanoseconds "^1.0.0"
 
-prismjs@~1.6.0:
-  version "1.6.0"
-  resolved "https://registry.npmjs.org/prismjs/-/prismjs-1.6.0.tgz#118d95fb7a66dba2272e343b345f5236659db365"
+prismjs@^1.14.0:
+  version "1.14.0"
+  resolved "https://registry.npmjs.org/prismjs/-/prismjs-1.14.0.tgz#bbccfdb8be5d850d26453933cb50122ca0362ae0"
   optionalDependencies:
-    clipboard "^1.5.5"
+    clipboard "^2.0.0"
 
 private@^0.1.6, private@~0.1.5:
   version "0.1.8"