Repository: styleguidist/react-styleguidist
Pull request #811 (2018-02-08 18:52:11)

[fix] Documentation typo


Patch:
diff --git a/docs/Components.md b/docs/Components.md
index 537b95a3..97b7fafc 100644
--- a/docs/Components.md
+++ b/docs/Components.md
@@ -27,7 +27,7 @@ But will ignore tests:
 
 If it doesn’t work for you, create a `styleguide.config.js` file in your project’s root folder and configure the patterns to fit your project structure.
 
-For example, if your component files look like `components/Button/Button.js`, but you rexport them in `components/Button/index.js` (like `export { default } from './Button'`) to simplify imports (`components/Button` instead of `components/Button/Button`), you need to skip `index.js`:
+For example, if your component files look like `components/Button/Button.js`, but you reexport them in `components/Button/index.js` (like `export { default } from './Button'`) to simplify imports (`components/Button` instead of `components/Button/Button`), you need to skip `index.js`:
 
 ```javascript
 module.exports = {
diff --git a/docs/Configuration.md b/docs/Configuration.md
index 589642b4..1933a4ed 100644
--- a/docs/Configuration.md
+++ b/docs/Configuration.md
@@ -14,7 +14,7 @@ By default, Styleguidist will look for `styleguide.config.js` file in your proje
 * [`configureServer`](#configureserver)
 * [`dangerouslyUpdateWebpackConfig`](#dangerouslyupdatewebpackconfig)
 * [`defaultExample`](#defaultexample)
-* [`editorConfig`](#editorConfig)
+* [`editorConfig`](#editorconfig)
 * [`getComponentPathLine`](#getcomponentpathline)
 * [`getExampleFilename`](#getexamplefilename)
 * [`handlers`](#handlers)
diff --git a/docs/Cookbook.md b/docs/Cookbook.md
index d54ef8e3..4572322d 100644
--- a/docs/Cookbook.md
+++ b/docs/Cookbook.md
@@ -7,6 +7,7 @@
 * [How to use `ref`s in examples?](#how-to-use-refs-in-examples)
 * [How to exclude some components from style guide?](#how-to-exclude-some-components-from-style-guide)
 * [How to hide some components in style guide but make them available in examples?](#how-to-hide-some-components-in-style-guide-but-make-them-available-in-examples)
+* [How to dynamically load other components in an example?](#how-to-dynamically-load-other-components-in-an-example)
 * [How to set global styles for user components?](#how-to-set-global-styles-for-user-components)
 * [How to add custom JavaScript and CSS or polyfills?](#how-to-add-custom-javascript-and-css-or-polyfills)
 * [How to use React Styleguidist with Preact?](#how-to-use-react-styleguidist-with-preact)
@@ -86,6 +87,33 @@ global.Button = Button
 
 The `Button` component will be available in every example without a need to `require` it.
 
+## How to dynamically load other components in an example?
+
+Although examples don't have direct access to webpack's `require.context` feature, you *can* use it in a separate helper file which you require in your example code. If you wanted to create an example to load and show all of your icon components, you could do this:
+
+```jsx
+// load-icons.js
+const iconsContext = require.context('./icons/', true, /js$/);
+const icons = Object.keys(iconsContext).reduce( (icons, file) => {
+	const Icon = iconsContext(file).default;
+	const label = file.slice(2, -3); // strip './' and '.js'
+	icons[label] = Icon;
+	return icons;
+}, {});
+
+export default icons;
+
+// IconGallery.md
+const icons = require('./load-icons').default;
+
+const iconElements = Object.keys(icons).map(iconName => {
+  const Icon = icons[iconName];
+  return <span key={iconName}>{iconName}: {<Icon />}</span>;
+});
+
+<div>{iconElements}</div>
+```
+
 ## How to set global styles for user components?
 
 Using the [jss-global](https://github.com/cssinjs/jss-global) API you can set global styles in your config:
diff --git a/loaders/styleguide-loader.js b/loaders/styleguide-loader.js
index 7ce57f36..4e7a24de 100644
--- a/loaders/styleguide-loader.js
+++ b/loaders/styleguide-loader.js
@@ -16,7 +16,6 @@ const slugger = require('./utils/slugger');
 // Config options that should be passed to the client
 const CLIENT_CONFIG_OPTIONS = [
 	'title',
-	'highlightTheme',
 	'showCode',
 	'showUsage',
 	'showSidebar',
diff --git a/package-lock.json b/package-lock.json
index 30c66f40..6b086759 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -165,6 +165,7 @@
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/acorn-jsx/-/acorn-jsx-3.0.1.tgz",
       "integrity": "sha1-r9+UiPsezvyDSPb7IvRk4ypYs2s=",
+      "dev": true,
       "requires": {
         "acorn": "3.3.0"
       },
@@ -172,22 +173,8 @@
         "acorn": {
           "version": "3.3.0",
           "resolved": "https://registry.npmjs.org/acorn/-/acorn-3.3.0.tgz",
-          "integrity": "sha1-ReN/s56No/JbruP/U2niu18iAXo="
-        }
-      }
-    },
-    "acorn-object-spread": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/acorn-object-spread/-/acorn-object-spread-1.0.0.tgz",
-      "integrity": "sha1-SOrQ9KjrFplaF6Dbn/xqyq2kumg=",
-      "requires": {
-        "acorn": "3.3.0"
-      },
-      "dependencies": {
-        "acorn": {
-          "version": "3.3.0",
-          "resolved": "https://registry.npmjs.org/acorn/-/acorn-3.3.0.tgz",
-          "integrity": "sha1-ReN/s56No/JbruP/U2niu18iAXo="
+          "integrity": "sha1-ReN/s56No/JbruP/U2niu18iAXo=",
+          "dev": true
         }
       }
     },
@@ -1691,44 +1678,76 @@
       }
     },
     "buble": {
-      "version": "0.16.0",
-      "resolved": "https://registry.npmjs.org/buble/-/buble-0.16.0.tgz",
-      "integrity": "sha512-Eb5vt1+IvXXPyYD1IIQIuaBwIuJOSWQ2kXzULlg5I83aLGF2qzcjRU2joYusnWFgAenvJ9xTOMvZvT0bb8BLbg==",
-      "requires": {
-        "acorn": "3.3.0",
-        "acorn-jsx": "3.0.1",
-        "acorn-object-spread": "1.0.0",
-        "chalk": "1.1.3",
-        "magic-string": "0.14.0",
+      "version": "0.19.2",
+      "resolved": "https://registry.npmjs.org/buble/-/buble-0.19.2.tgz",
+      "integrity": "sha512-gYgF19dqMdGb7fzs/Mkfd8/LxXEX4yfvhKm3CHlNAhyy9Na/mvdmiEwrzRf+XfEKW8yvSy4wp0NWBncTTaZR5w==",
+      "requires": {
+        "acorn": "5.4.1",
+        "acorn-dynamic-import": "3.0.0",
+        "acorn-jsx": "4.1.1",
+        "chalk": "2.3.1",
+        "magic-string": "0.22.4",
         "minimist": "1.2.0",
         "os-homedir": "1.0.2",
-        "vlq": "0.2.3"
+        "vlq": "1.0.0"
       },
       "dependencies": {
         "acorn": {
-          "version": "3.3.0",
-          "resolved": "https://registry.npmjs.org/acorn/-/acorn-3.3.0.tgz",
-          "integrity": "sha1-ReN/s56No/JbruP/U2niu18iAXo="
+          "version": "5.4.1",
+          "resolved": "https://registry.npmjs.org/acorn/-/acorn-5.4.1.tgz",
+          "integrity": "sha512-XLmq3H/BVvW6/GbxKryGxWORz1ebilSsUDlyC27bXhWGWAZWkGwS6FLHjOlwFXNFoWFQEO/Df4u0YYd0K3BQgQ=="
+        },
+        "acorn-dynamic-import": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/acorn-dynamic-import/-/acorn-dynamic-import-3.0.0.tgz",
+          "integrity": "sha512-zVWV8Z8lislJoOKKqdNMOB+s6+XV5WERty8MnKBeFgwA+19XJjJHs2RP5dzM57FftIs+jQnRToLiWazKr6sSWg==",
+          "requires": {
+            "acorn": "5.4.1"
+          }
+        },
+        "acorn-jsx": {
+          "version": "4.1.1",
+          "resolved": "https://registry.npmjs.org/acorn-jsx/-/acorn-jsx-4.1.1.tgz",
+          "integrity": "sha512-JY+iV6r+cO21KtntVvFkD+iqjtdpRUpGqKWgfkCdZq1R+kbreEl8EcdcJR4SmiIgsIQT33s6QzheQ9a275Q8xw==",
+          "requires": {
+            "acorn": "5.4.1"
+          }
+        },
+        "ansi-styles": {
+          "version": "3.2.0",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.0.tgz",
+          "integrity": "sha512-NnSOmMEYtVR2JVMIGTzynRkkaxtiq1xnFBcdQD/DnNCYPoEPsVJhM98BDyaoNOQIi7p4okdi3E27eN7GQbsUug==",
+          "requires": {
+            "color-convert": "1.9.0"
+          }
         },
         "chalk": {
-          "version": "1.1.3",
-          "resolved": "https://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz",
-          "integrity": "sha1-qBFcVeSnAv5NFQq9OHKCKn4J/Jg=",
+          "version": "2.3.1",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.3.1.tgz",
+          "integrity": "sha512-QUU4ofkDoMIVO7hcx1iPTISs88wsO8jA92RQIm4JAwZvFGGAV2hSAA1NX7oVj2Ej2Q6NDTcRDjPTFrMCRZoJ6g==",
           "requires": {
-            "ansi-styles": "2.2.1",
+            "ansi-styles": "3.2.0",
             "escape-string-regexp": "1.0.5",
-            "has-ansi": "2.0.0",
-            "strip-ansi": "3.0.1",
-            "supports-color": "2.0.0"
+            "supports-color": "5.2.0"
           }
         },
-        "magic-string": {
-          "version": "0.14.0",
-          "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.14.0.tgz",
-          "integrity": "sha1-VyJK7xcByu7Sc7F6OalW5ysXJGI=",
+        "has-flag": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
+          "integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0="
+        },
+        "supports-color": {
+          "version": "5.2.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.2.0.tgz",
+          "integrity": "sha512-F39vS48la4YvTZUPVeTqsjsFNrvcMwrV3RLZINsmHo+7djCvuUzSIeXOnZ5hmjef4bajL1dNccN+tg5XAliO5Q==",
           "requires": {
-            "vlq": "0.2.3"
+            "has-flag": "3.0.0"
           }
+        },
+        "vlq": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/vlq/-/vlq-1.0.0.tgz",
+          "integrity": "sha512-o3WmXySo+oI5thgqr7Qy8uBkT/v9Zr+sRyrh1lr8aWPUkgDWdWt4Nae2WKBrLsocgE8BuWWD0jLc+VW8LeU+2g=="
         }
       }
     },
@@ -7688,6 +7707,14 @@
       "resolved": "https://registry.npmjs.org/macaddress/-/macaddress-0.2.8.tgz",
       "integrity": "sha1-WQTcU3w57G2+/q6QIycTX6hRHxI="
     },
+    "magic-string": {
+      "version": "0.22.4",
+      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.22.4.tgz",
+      "integrity": "sha512-kxBL06p6iO2qPBHsqGK2b3cRwiRGpnmSuVWNhwHcMX7qJOUr1HvricYP1LZOCdkQBUp0jiWg2d6WJwR3vYgByw==",
+      "requires": {
+        "vlq": "0.2.3"
+      }
+    },
     "make-dir": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-1.0.0.tgz",
diff --git a/package.json b/package.json
index f041e16a..2f6c4265 100644
--- a/package.json
+++ b/package.json
@@ -31,7 +31,7 @@
   },
   "dependencies": {
     "ast-types": "^0.10.1",
-    "buble": "0.16.0",
+    "buble": "^0.19.2",
     "chalk": "^2.3.0",
     "classnames": "^2.2.5",
     "clean-webpack-plugin": "^0.1.17",
diff --git a/scripts/make-webpack-config.js b/scripts/make-webpack-config.js
index a5b54a2d..e387cfa9 100644
--- a/scripts/make-webpack-config.js
+++ b/scripts/make-webpack-config.js
@@ -31,7 +31,7 @@ module.exports = function(config, env) {
 		resolve: {
 			extensions: ['.js', '.jsx', '.json'],
 			alias: {
-				'rsg-codemirror-theme.css': `codemirror/theme/${config.highlightTheme}.css`,
+				'rsg-codemirror-theme.css': `codemirror/theme/${config.editorConfig.theme}.css`,
 			},
 		},
 		plugins: [
diff --git a/src/rsg-components/Code/Code.spec.js b/src/rsg-components/Code/Code.spec.js
index 25745a79..c204fad1 100644
--- a/src/rsg-components/Code/Code.spec.js
+++ b/src/rsg-components/Code/Code.spec.js
@@ -1,9 +1,22 @@
 import React from 'react';
 import { CodeRenderer } from './CodeRenderer';
 
-it('renderer should render code', () => {
-	const code = '<button>OK</button>';
-	const actual = shallow(<CodeRenderer classes={{}}>{code}</CodeRenderer>);
+describe('Code blocks', () => {
+	it('should render code', () => {
+		const code = '<button>OK</button>';
+		const actual = shallow(<CodeRenderer classes={{}}>{code}</CodeRenderer>);
 
-	expect(actual).toMatchSnapshot();
+		expect(actual).toMatchSnapshot();
+	});
+
+	it('should render code to be highlighted', () => {
+		const code = '<button>OK</button>';
+		const actual = render(
+			<CodeRenderer classes={{}} className="lang-html">
+				{code}
+			</CodeRenderer>
+		);
+
+		expect(actual).toMatchSnapshot();
+	});
 });
diff --git a/src/rsg-components/Code/CodeRenderer.js b/src/rsg-components/Code/CodeRenderer.js
index c40565ff..96fd008d 100644
--- a/src/rsg-components/Code/CodeRenderer.js
+++ b/src/rsg-components/Code/CodeRenderer.js
@@ -1,29 +1,31 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import cx from 'classnames';
 import Styled from 'rsg-components/Styled';
 
 const styles = ({ fontFamily }) => ({
 	code: {
-		display: 'inline',
 		fontFamily: fontFamily.monospace,
 		fontSize: 'inherit',
 		color: 'inherit',
 		background: 'transparent',
+		whiteSpace: 'inherit',
 	},
 });
 
 export function CodeRenderer({ classes, className, children }) {
-	return (
-		<span className={className}>
-			<code className={classes.code}>{children}</code>
-		</span>
-	);
-}
+	const classNames = cx(className, classes.code);
 
+	const isHighlighted = className && className.indexOf('lang-') !== -1;
+	if (isHighlighted) {
+		return <code className={classNames} dangerouslySetInnerHTML={{ __html: children }} />;
+	}
+	return <code className={classNames}>{children}</code>;
+}
 CodeRenderer.propTypes = {
 	classes: PropTypes.object.isRequired,
 	className: PropTypes.string,
-	children: PropTypes.node,
+	children: PropTypes.node.isRequired,
 };
 
 export default Styled(styles)(CodeRenderer);
diff --git a/src/rsg-components/Code/__snapshots__/Code.spec.js.snap b/src/rsg-components/Code/__snapshots__/Code.spec.js.snap
index 3a4764bb..007273ce 100644
--- a/src/rsg-components/Code/__snapshots__/Code.spec.js.snap
+++ b/src/rsg-components/Code/__snapshots__/Code.spec.js.snap
@@ -1,9 +1,19 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`renderer should render code 1`] = `
-<span>
-  <code>
-    &lt;button&gt;OK&lt;/button&gt;
-  </code>
-</span>
+exports[`Code blocks should render code 1`] = `
+<code
+  className=""
+>
+  &lt;button&gt;OK&lt;/button&gt;
+</code>
+`;
+
+exports[`Code blocks should render code to be highlighted 1`] = `
+<code
+  class="lang-html"
+>
+  <button>
+    OK
+  </button>
+</code>
 `;
diff --git a/src/rsg-components/Markdown/Markdown.js b/src/rsg-components/Markdown/Markdown.js
index de518601..64627b00 100644
--- a/src/rsg-components/Markdown/Markdown.js
+++ b/src/rsg-components/Markdown/Markdown.js
@@ -1,4 +1,3 @@
-import React from 'react';
 import PropTypes from 'prop-types';
 import { compiler } from 'markdown-to-jsx';
 import mapValues from 'lodash/mapValues';
@@ -10,25 +9,14 @@ import Para, { styles as paraStyles } from 'rsg-components/Para';
 import MarkdownHeading from 'rsg-components/Markdown/MarkdownHeading';
 import List from 'rsg-components/Markdown/List';
 import Blockquote from 'rsg-components/Markdown/Blockquote';
+import Pre from 'rsg-components/Markdown/Pre';
+import Code from 'rsg-components/Code';
 
 // We’re explicitly specifying Webpack loaders here so we could skip specifying them in Webpack configuration.
 // That way we could avoid clashes between our loaders and user loaders.
 // eslint-disable-next-line import/no-unresolved
 require('!!../../../loaders/style-loader!../../../loaders/css-loader!highlight.js/styles/tomorrow.css');
 
-// Code blocks with server-side syntax highlight
-function Code({ children, className }) {
-	const isHighlighted = className && className.indexOf('lang-') !== -1;
-	if (isHighlighted) {
-		return <code className={className} dangerouslySetInnerHTML={{ __html: children }} />;
-	}
-	return <code className={className}>{children}</code>;
-}
-Code.propTypes = {
-	children: PropTypes.node,
-	className: PropTypes.string,
-};
-
 // Custom CSS classes for each tag: <em> → <em className={s.em}> + custom components
 const getBaseOverrides = memoize(classes => {
 	const styleOverrides = mapValues(classes, value => ({
@@ -110,9 +98,9 @@ const getBaseOverrides = memoize(classes => {
 		},
 		code: {
 			component: Code,
-			props: {
-				className: classes.code,
-			},
+		},
+		pre: {
+			component: Pre,
 		},
 	};
 }, () => 'getBaseOverrides');
@@ -129,7 +117,7 @@ const getInlineOverrides = memoize(classes => {
 	};
 }, () => 'getInlineOverrides');
 
-const styles = ({ space, fontFamily, fontSize, color, borderRadius }) => ({
+const styles = ({ space, fontFamily, fontSize, color }) => ({
 	base: {
 		color: color.base,
 		fontFamily: fontFamily.base,
@@ -147,22 +135,6 @@ const styles = ({ space, fontFamily, fontSize, color, borderRadius }) => ({
 		borderColor: color.border,
 		borderStyle: 'solid',
 	},
-	code: {
-		fontFamily: fontFamily.monospace,
-		fontSize: 'inherit',
-		color: 'inherit',
-		background: 'transparent',
-		whiteSpace: 'inherit',
-	},
-	pre: {
-		composes: '$para',
-		backgroundColor: color.codeBackground,
-		border: [[1, color.border, 'solid']],
-		padding: [[space[1], space[2]]],
-		fontSize: fontSize.small,
-		borderRadius,
-		whiteSpace: 'pre',
-	},
 	table: {
 		composes: '$para',
 		borderCollapse: 'collapse',
diff --git a/src/rsg-components/Markdown/Pre/Pre.spec.js b/src/rsg-components/Markdown/Pre/Pre.spec.js
new file mode 100644
index 00000000..20167194
--- /dev/null
+++ b/src/rsg-components/Markdown/Pre/Pre.spec.js
@@ -0,0 +1,11 @@
+import React from 'react';
+
+import Pre from './index';
+
+describe('Markdown Pre', () => {
+	it('should render a pre', () => {
+		const actual = render(<Pre>This is pre-formatted text.</Pre>);
+
+		expect(actual).toMatchSnapshot();
+	});
+});
diff --git a/src/rsg-components/Markdown/Pre/PreRenderer.js b/src/rsg-components/Markdown/Pre/PreRenderer.js
new file mode 100644
index 00000000..07d3a726
--- /dev/null
+++ b/src/rsg-components/Markdown/Pre/PreRenderer.js
@@ -0,0 +1,30 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import Styled from 'rsg-components/Styled';
+
+const styles = ({ space, color, fontSize, fontFamily, borderRadius }) => ({
+	pre: {
+		fontFamily: fontFamily.base,
+		fontSize: fontSize.small,
+		lineHeight: 1.5,
+		color: color.base,
+		whiteSpace: 'pre',
+		backgroundColor: color.codeBackground,
+		padding: [[space[1], space[2]]],
+		border: [[1, color.border, 'solid']],
+		borderRadius,
+		marginTop: 0,
+		marginBottom: space[2],
+	},
+});
+
+export function PreRenderer({ classes, children }) {
+	return <pre className={classes.pre}>{children}</pre>;
+}
+PreRenderer.propTypes = {
+	classes: PropTypes.object.isRequired,
+	children: PropTypes.node.isRequired,
+};
+
+export default Styled(styles)(PreRenderer);
diff --git a/src/rsg-components/Markdown/Pre/__snapshots__/Pre.spec.js.snap b/src/rsg-components/Markdown/Pre/__snapshots__/Pre.spec.js.snap
new file mode 100644
index 00000000..16d321bc
--- /dev/null
+++ b/src/rsg-components/Markdown/Pre/__snapshots__/Pre.spec.js.snap
@@ -0,0 +1,9 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Markdown Pre should render a pre 1`] = `
+<pre
+  class="rsg--pre-0"
+>
+  This is pre-formatted text.
+</pre>
+`;
diff --git a/src/rsg-components/Markdown/Pre/index.js b/src/rsg-components/Markdown/Pre/index.js
new file mode 100644
index 00000000..77d77969
--- /dev/null
+++ b/src/rsg-components/Markdown/Pre/index.js
@@ -0,0 +1,1 @@
+export { default } from 'rsg-components/Markdown/Pre/PreRenderer';
diff --git a/src/rsg-components/Markdown/__snapshots__/Markdown.spec.js.snap b/src/rsg-components/Markdown/__snapshots__/Markdown.spec.js.snap
index 10ec0c4d..bb5327f7 100644
--- a/src/rsg-components/Markdown/__snapshots__/Markdown.spec.js.snap
+++ b/src/rsg-components/Markdown/__snapshots__/Markdown.spec.js.snap
@@ -2,7 +2,7 @@
 
 exports[`Markdown should render Markdown in a p tag even for one paragraph 1`] = `
 
-<p class="rsg--para-13">
+<p class="rsg--para-11">
   pizza
 </p>
 
@@ -10,9 +10,9 @@ exports[`Markdown should render Markdown in a p tag even for one paragraph 1`] =
 
 exports[`Markdown should render Markdown in span in inline mode 1`] = `
 
-<span class="rsg--text-23 rsg--inheritSize-24 rsg--baseColor-28">
+<span class="rsg--text-21 rsg--inheritSize-22 rsg--baseColor-26">
   Hello
-  <em class="rsg--text-23 rsg--inheritSize-24 rsg--baseColor-28 rsg--em-30">
+  <em class="rsg--text-21 rsg--inheritSize-22 rsg--baseColor-26 rsg--em-28">
     world
   </em>
   !
@@ -23,28 +23,28 @@ exports[`Markdown should render Markdown in span in inline mode 1`] = `
 exports[`Markdown should render Markdown with custom CSS classes 1`] = `
 
 <div>
-  <div class="rsg--spacing-15">
-    <h1 class="rsg--heading-16 rsg--heading1-17">
+  <div class="rsg--spacing-13">
+    <h1 class="rsg--heading-14 rsg--heading1-15">
       Header
     </h1>
   </div>
-  <p class="rsg--para-13">
+  <p class="rsg--para-11">
     Text with
-    <em class="rsg--text-23 rsg--inheritSize-24 rsg--baseColor-28 rsg--em-30">
+    <em class="rsg--text-21 rsg--inheritSize-22 rsg--baseColor-26 rsg--em-28">
       some
     </em>
-    <strong class="rsg--text-23 rsg--inheritSize-24 rsg--baseColor-28 rsg--strong-31">
+    <strong class="rsg--text-21 rsg--inheritSize-22 rsg--baseColor-26 rsg--strong-29">
       formatting
     </strong>
     and a
     <a href="/foo"
-       class="rsg--link-14"
+       class="rsg--link-12"
     >
       link
     </a>
     .
   </p>
-  <p class="rsg--para-13">
+  <p class="rsg--para-11">
     <img alt="Image"
          src="/bar.png"
     >
@@ -56,7 +56,7 @@ exports[`Markdown should render Markdown with custom CSS classes 1`] = `
 exports[`Markdown should render a blockquote 1`] = `
 
 <blockquote class="rsg--blockquote-36">
-  <p class="rsg--para-13">
+  <p class="rsg--para-11">
     This is a blockquote.
 And this is a second line.
   </p>
@@ -66,22 +66,22 @@ And this is a second line.
 
 exports[`Markdown should render check-lists correctly 1`] = `
 
-<ul class="rsg--list-33">
-  <li class="rsg--li-35">
+<ul class="rsg--list-31">
+  <li class="rsg--li-33">
     <input type="checkbox"
            class="rsg--input-2"
            readonly
     >
     list 1
   </li>
-  <li class="rsg--li-35">
+  <li class="rsg--li-33">
     <input type="checkbox"
            class="rsg--input-2"
            readonly
     >
     list 2
   </li>
-  <li class="rsg--li-35">
+  <li class="rsg--li-33">
     <input type="checkbox"
            class="rsg--input-2"
            checked
@@ -95,8 +95,8 @@ exports[`Markdown should render check-lists correctly 1`] = `
 
 exports[`Markdown should render code blocks without escaping 1`] = `
 
-<pre class="rsg--pre-5 rsg--para-1">
-  <code class="lang-html rsg--code-4">
+<pre class="rsg--pre-34">
+  <code class="lang-html rsg--code-35">
     <foo>
     </foo>
   </code>
@@ -107,33 +107,33 @@ exports[`Markdown should render code blocks without escaping 1`] = `
 exports[`Markdown should render headings correctly 1`] = `
 
 <div>
-  <div class="rsg--spacing-15">
-    <h1 class="rsg--heading-16 rsg--heading1-17">
+  <div class="rsg--spacing-13">
+    <h1 class="rsg--heading-14 rsg--heading1-15">
       one
     </h1>
   </div>
-  <div class="rsg--spacing-15">
-    <h2 class="rsg--heading-16 rsg--heading2-18">
+  <div class="rsg--spacing-13">
+    <h2 class="rsg--heading-14 rsg--heading2-16">
       two
     </h2>
   </div>
-  <div class="rsg--spacing-15">
-    <h3 class="rsg--heading-16 rsg--heading3-19">
+  <div class="rsg--spacing-13">
+    <h3 class="rsg--heading-14 rsg--heading3-17">
       three
     </h3>
   </div>
-  <div class="rsg--spacing-15">
-    <h4 class="rsg--heading-16 rsg--heading4-20">
+  <div class="rsg--spacing-13">
+    <h4 class="rsg--heading-14 rsg--heading4-18">
       four
     </h4>
   </div>
-  <div class="rsg--spacing-15">
-    <h5 class="rsg--heading-16 rsg--heading5-21">
+  <div class="rsg--spacing-13">
+    <h5 class="rsg--heading-14 rsg--heading5-19">
       five
     </h5>
   </div>
-  <div class="rsg--spacing-15">
-    <h6 class="rsg--heading-16 rsg--heading6-22">
+  <div class="rsg--spacing-13">
+    <h6 class="rsg--heading-14 rsg--heading6-20">
       six
     </h6>
   </div>
@@ -143,9 +143,9 @@ exports[`Markdown should render headings correctly 1`] = `
 
 exports[`Markdown should render inline code with escaping 1`] = `
 
-<p class="rsg--para-13">
+<p class="rsg--para-11">
   Foo
-  <code class="rsg--code-4">
+  <code class="rsg--code-35">
     &lt;bar&gt;
   </code>
   baz
@@ -155,10 +155,10 @@ exports[`Markdown should render inline code with escaping 1`] = `
 
 exports[`Markdown should render links 1`] = `
 
-<p class="rsg--para-13">
+<p class="rsg--para-11">
   a
   <a href="http://test.com"
-     class="rsg--link-14"
+     class="rsg--link-12"
   >
     link
   </a>
@@ -168,25 +168,25 @@ exports[`Markdown should render links 1`] = `
 
 exports[`Markdown should render mixed nested lists correctly 1`] = `
 
-<ul class="rsg--list-33">
-  <li class="rsg--li-35">
+<ul class="rsg--list-31">
+  <li class="rsg--li-33">
     list 1
   </li>
-  <li class="rsg--li-35">
+  <li class="rsg--li-33">
     list 2
-    <ol class="rsg--list-33 rsg--ordered-34">
-      <li class="rsg--li-35">
+    <ol class="rsg--list-31 rsg--ordered-32">
+      <li class="rsg--li-33">
         Sub-list
       </li>
-      <li class="rsg--li-35">
+      <li class="rsg--li-33">
         Sub-list
       </li>
-      <li class="rsg--li-35">
+      <li class="rsg--li-33">
         Sub-list
       </li>
     </ol>
   </li>
-  <li class="rsg--li-35">
+  <li class="rsg--li-33">
     list 3
   </li>
 </ul>
@@ -195,14 +195,14 @@ exports[`Markdown should render mixed nested lists correctly 1`] = `
 
 exports[`Markdown should render ordered lists correctly 1`] = `
 
-<ol class="rsg--list-33 rsg--ordered-34">
-  <li class="rsg--li-35">
+<ol class="rsg--list-31 rsg--ordered-32">
+  <li class="rsg--li-33">
     list
   </li>
-  <li class="rsg--li-35">
+  <li class="rsg--li-33">
     item
   </li>
-  <li class="rsg--li-35">
+  <li class="rsg--li-33">
     three
   </li>
 </ol>
@@ -211,14 +211,14 @@ exports[`Markdown should render ordered lists correctly 1`] = `
 
 exports[`Markdown should render unordered lists correctly 1`] = `
 
-<ul class="rsg--list-33">
-  <li class="rsg--li-35">
+<ul class="rsg--list-31">
+  <li class="rsg--li-33">
     list
   </li>
-  <li class="rsg--li-35">
+  <li class="rsg--li-33">
     item
   </li>
-  <li class="rsg--li-35">
+  <li class="rsg--li-33">
     three
   </li>
 </ul>
diff --git a/src/rsg-components/Name/NameRenderer.js b/src/rsg-components/Name/NameRenderer.js
index b2421852..aa746fbb 100644
--- a/src/rsg-components/Name/NameRenderer.js
+++ b/src/rsg-components/Name/NameRenderer.js
@@ -4,9 +4,8 @@ import Code from 'rsg-components/Code';
 import Styled from 'rsg-components/Styled';
 import cx from 'classnames';
 
-export const styles = ({ fontFamily, fontSize, color }) => ({
+export const styles = ({ fontSize, color }) => ({
 	name: {
-		fontFamily: fontFamily.monospace,
 		fontSize: fontSize.small,
 		color: color.name,
 	},
@@ -20,7 +19,11 @@ export function NameRenderer({ classes, children, deprecated }) {
 	const classNames = cx(classes.name, {
 		[classes.isDeprecated]: deprecated,
 	});
-	return <Code className={classNames}>{children}</Code>;
+	return (
+		<span className={classNames}>
+			<Code>{children}</Code>
+		</span>
+	);
 }
 
 NameRenderer.propTypes = {
diff --git a/src/rsg-components/Name/__snapshots__/Name.spec.js.snap b/src/rsg-components/Name/__snapshots__/Name.spec.js.snap
index 27e4f624..395a5e72 100644
--- a/src/rsg-components/Name/__snapshots__/Name.spec.js.snap
+++ b/src/rsg-components/Name/__snapshots__/Name.spec.js.snap
@@ -1,17 +1,21 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`renderer should render argument name 1`] = `
-<Styled(Code)
+<span
   className="name"
 >
-  Foo
-</Styled(Code)>
+  <Styled(Code)>
+    Foo
+  </Styled(Code)>
+</span>
 `;
 
 exports[`renderer should render deprecated argument name 1`] = `
-<Styled(Code)
+<span
   className="name isDeprecated"
 >
-  Foo
-</Styled(Code)>
+  <Styled(Code)>
+    Foo
+  </Styled(Code)>
+</span>
 `;
diff --git a/src/rsg-components/Type/Type.spec.js b/src/rsg-components/Type/Type.spec.js
index 087504f9..6bcb6e0f 100644
--- a/src/rsg-components/Type/Type.spec.js
+++ b/src/rsg-components/Type/Type.spec.js
@@ -1,8 +1,12 @@
 import React from 'react';
-import { TypeRenderer } from './TypeRenderer';
+import { TypeRenderer, styles } from './TypeRenderer';
+
+const props = {
+	classes: classes(styles),
+};
 
 it('renderer should render type', () => {
-	const actual = shallow(<TypeRenderer classes={{}}>Array</TypeRenderer>);
+	const actual = shallow(<TypeRenderer {...props}>Array</TypeRenderer>);
 
 	expect(actual).toMatchSnapshot();
 });
diff --git a/src/rsg-components/Type/TypeRenderer.js b/src/rsg-components/Type/TypeRenderer.js
index e3e9e02d..becb3956 100644
--- a/src/rsg-components/Type/TypeRenderer.js
+++ b/src/rsg-components/Type/TypeRenderer.js
@@ -3,16 +3,19 @@ import PropTypes from 'prop-types';
 import Code from 'rsg-components/Code';
 import Styled from 'rsg-components/Styled';
 
-const styles = ({ fontFamily, fontSize, color }) => ({
+export const styles = ({ fontSize, color }) => ({
 	type: {
-		fontFamily: fontFamily.monospace,
 		fontSize: fontSize.small,
 		color: color.type,
 	},
 });
 
 export function TypeRenderer({ classes, children }) {
-	return <Code className={classes.type}>{children}</Code>;
+	return (
+		<span className={classes.type}>
+			<Code>{children}</Code>
+		</span>
+	);
 }
 
 TypeRenderer.propTypes = {
diff --git a/src/rsg-components/Type/__snapshots__/Type.spec.js.snap b/src/rsg-components/Type/__snapshots__/Type.spec.js.snap
index 90015a6b..945be368 100644
--- a/src/rsg-components/Type/__snapshots__/Type.spec.js.snap
+++ b/src/rsg-components/Type/__snapshots__/Type.spec.js.snap
@@ -1,7 +1,11 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`renderer should render type 1`] = `
-<Styled(Code)>
-  Array
-</Styled(Code)>
+<span
+  className="type"
+>
+  <Styled(Code)>
+    Array
+  </Styled(Code)>
+</span>
 `;


Test patch:
diff --git a/scripts/__tests__/__snapshots__/make-webpack-config.spec.js.snap b/scripts/__tests__/__snapshots__/make-webpack-config.spec.js.snap
index 9ead1dc4..3a9b6ab1 100644
--- a/scripts/__tests__/__snapshots__/make-webpack-config.spec.js.snap
+++ b/scripts/__tests__/__snapshots__/make-webpack-config.spec.js.snap
@@ -66,7 +66,9 @@ Object {
   "plugins": Array [
     StyleguidistOptionsPlugin {
       "options": Object {
-        "highlightTheme": "hl-theme",
+        "editorConfig": Object {
+          "theme": "hl-theme",
+        },
         "require": Array [],
         "styleguideDir": "~/scripts/__tests__",
         "template": "template.html",
@@ -133,7 +135,9 @@ Object {
   "plugins": Array [
     StyleguidistOptionsPlugin {
       "options": Object {
-        "highlightTheme": "hl-theme",
+        "editorConfig": Object {
+          "theme": "hl-theme",
+        },
         "require": Array [],
         "styleguideDir": "~/scripts/__tests__",
         "template": "template.html",
@@ -217,3 +221,10 @@ Object {
   },
 }
 `;
+
+exports[`should use editorConfig theme over highlightTheme 1`] = `
+Object {
+  "rsg-codemirror-theme.css": "codemirror/theme/hl-theme.css",
+  "rsg-components": "~/lib/rsg-components",
+}
+`;
diff --git a/scripts/__tests__/make-webpack-config.spec.js b/scripts/__tests__/make-webpack-config.spec.js
index d9605f8f..2f41c056 100644
--- a/scripts/__tests__/make-webpack-config.spec.js
+++ b/scripts/__tests__/make-webpack-config.spec.js
@@ -4,7 +4,9 @@ import makeWebpackConfig from '../make-webpack-config';
 const styleguideConfig = {
 	styleguideDir: __dirname,
 	require: [],
-	highlightTheme: 'hl-theme',
+	editorConfig: {
+		theme: 'hl-theme',
+	},
 	title: 'Style Guide',
 	template: 'template.html',
 };
@@ -33,6 +35,14 @@ it('should prepend requires as webpack entries', () => {
 	expect(result.entry).toMatchSnapshot();
 });
 
+it('should use editorConfig theme over highlightTheme', () => {
+	const result = makeWebpackConfig(
+		{ ...styleguideConfig, highlightTheme: 'deprecated' },
+		'development'
+	);
+	expect(result.resolve.alias).toMatchSnapshot();
+});
+
 it('should enable verbose mode in CleanWebpackPlugin', () => {
 	const result = makeWebpackConfig({ ...styleguideConfig, verbose: true }, 'production');
 	expect(result.plugins.filter(x => x.constructor.name === 'CleanWebpackPlugin')).toMatchSnapshot();