diff --git a/examples/basic/src/components/Button.mdx b/examples/basic/src/components/Button.mdx
index f8b0278a2..2af38295b 100644
--- a/examples/basic/src/components/Button.mdx
+++ b/examples/basic/src/components/Button.mdx
@@ -29,4 +29,4 @@ Buttons make common actions more obvious and help users more easily perform them
-
diff --git a/examples/basic/src/hocs/withProps.mdx b/examples/basic/src/hocs/withProps.mdx
index cdd2c8477..405c9eeb1 100644
--- a/examples/basic/src/hocs/withProps.mdx
+++ b/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 }) => (
+ {greet} {name}
+ )
+)
+```
diff --git a/packages/docz-core/package.json b/packages/docz-core/package.json
index fd4f55731..d09bb896d 100644
--- a/packages/docz-core/package.json
+++ b/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",
diff --git a/packages/docz-core/src/types.d.ts b/packages/docz-core/src/types.d.ts
index 6681e2a3b..49b391a29 100644
--- a/packages/docz-core/src/types.d.ts
+++ b/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'
diff --git a/packages/docz-core/src/utils/plugin-hast.ts b/packages/docz-core/src/utils/plugin-hast.ts
index 38c13616c..b4f6644b0 100644
--- a/packages/docz-core/src/utils/plugin-hast.ts
+++ b/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 = `(
-
-
+
+ {\`${code}\`}
+
)`
node.value = node.value.replace(
diff --git a/packages/docz-theme-default/package.json b/packages/docz-theme-default/package.json
index 946fa0857..f02839abb 100644
--- a/packages/docz-theme-default/package.json
+++ b/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"
}
diff --git a/packages/docz-theme-default/src/components/Pre.tsx b/packages/docz-theme-default/src/components/Pre.tsx
new file mode 100644
index 000000000..19dfb7f72
--- /dev/null
+++ b/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 {
+ 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 (
+ (this.el = ref)} className={className}>
+ {children.props.children}
+
+ )
+ }
+
+ public componentDidMount(): void {
+ this.highlightCode()
+ }
+
+ public componentDidUpdate(): void {
+ this.highlightCode()
+ }
+
+ private highlightCode(): void {
+ prism.highlightElement(this.el)
+ }
+}
diff --git a/packages/docz-theme-default/src/components/Render.tsx b/packages/docz-theme-default/src/components/Render.tsx
index 3e3cb92fc..73443b230 100644
--- a/packages/docz-theme-default/src/components/Render.tsx
+++ b/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 {
diff --git a/packages/docz-theme-default/src/components/index.tsx b/packages/docz-theme-default/src/components/index.tsx
index 73caa7833..b362652c0 100644
--- a/packages/docz-theme-default/src/components/index.tsx
+++ b/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'
diff --git a/packages/docz-theme-default/src/modules/Doc/index.tsx b/packages/docz-theme-default/src/modules/Doc/index.tsx
index f1fc6b5f5..67700141b 100644
--- a/packages/docz-theme-default/src/modules/Doc/index.tsx
+++ b/packages/docz-theme-default/src/modules/Doc/index.tsx
@@ -20,6 +20,7 @@ export const Doc: SFC = ({ id, route, component: Component }) => (
table: components.Table,
render: components.Render,
tooltip: components.Tooltip,
+ pre: components.Pre,
}}
/>
diff --git a/yarn.lock b/yarn.lock
index 746dba944..765d82d94 100644
--- a/yarn.lock
+++ b/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"