diff --git a/src/components/InlineCodeSnippet.js b/src/components/InlineCodeSnippet.js new file mode 100644 index 000000000..d388003e9 --- /dev/null +++ b/src/components/InlineCodeSnippet.js @@ -0,0 +1,39 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import Highlight, { defaultProps } from 'prism-react-renderer'; +import github from 'prism-react-renderer/themes/github'; +import styles from './InlineCodeSnippet.module.scss'; +import cx from 'classnames'; + +const InlineCodeSnippet = ({ children, language }) => { + return ( + + {({ style, className, tokens, getLineProps, getTokenProps }) => ( +
+          {tokens.map((line, i) => (
+            
+ {line.map((token, key) => ( + + ))} +
+ ))} +
+ )} +
+ ); +}; + +InlineCodeSnippet.propTypes = { + children: PropTypes.node.isRequired, + language: PropTypes.string, +}; + +export default InlineCodeSnippet; diff --git a/src/components/InlineCodeSnippet.module.scss b/src/components/InlineCodeSnippet.module.scss new file mode 100644 index 000000000..e83fc291e --- /dev/null +++ b/src/components/InlineCodeSnippet.module.scss @@ -0,0 +1,3 @@ +.container { + margin: 0; +} diff --git a/src/templates/ReferenceTemplate.js b/src/templates/ReferenceTemplate.js index 0f0cc9ce9..a3525b1cb 100644 --- a/src/templates/ReferenceTemplate.js +++ b/src/templates/ReferenceTemplate.js @@ -1,6 +1,7 @@ import React, { useState } from 'react'; import { graphql } from 'gatsby'; import PropTypes from 'prop-types'; +import InlineCodeSnippet from '../components/InlineCodeSnippet'; import Container from '../components/Container'; import Layout from '../components/Layout'; import Sidebar from '../components/Sidebar'; @@ -28,6 +29,10 @@ const ReferenceTemplate = ({ data }) => { />

{component}

+
+

Usage

+ {`import { ${component} } from 'nr1'`} +