[storybook] Fix code markdown in withInfo() text

Issue: storybookjs/storybook#1662 Fix: storybookjs/storybook#1501
iCHEF · Oct 13, 2017 · e624c42 · e624c42
1 parent f287a49
commit e624c42
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 1 deletion.
diff --git a/packages/storybook/.storybook/Code.js b/packages/storybook/.storybook/Code.js
@@ -0,0 +1,17 @@
+import React from 'react';
+
+/**
+ * - Workaround -
+ * Fix inline code markdown(`) in withInfo()'s text.
+ *
+ * @issue https://github.com/storybooks/storybook/issues/1662
+ */
+function Code({ children }) {
+    return (
+        <code style={{ backgroundColor: 'rgba(0, 0, 0, .05)' }}>
+            {children}
+        </code>
+    );
+}
+
+export default Code;
diff --git a/packages/storybook/.storybook/config.js b/packages/storybook/.storybook/config.js
@@ -1,7 +1,9 @@
 import { configure, setAddon } from '@storybook/react';
 import { setOptions } from '@storybook/addon-options';
 import infoAddon, { setDefaults } from '@storybook/addon-info';
+
 import propsTableAddon from './propsTable-addon';
+import Code from './Code';
 
 // -------------------------------------
 //   Addons
@@ -15,7 +17,14 @@ setOptions({
 
 setDefaults({
     inline: true,
-    propTables: false
+    propTables: false,
+
+    /**
+     * Fix <Code> styling
+     *
+     * #FIXME: wait for storybooks/storybook#1501
+     */
+    marksyConf: { code: Code }
 });
 setAddon(infoAddon);
 setAddon(propsTableAddon);