diff --git a/addons/notes/README.md b/addons/notes/README.md
index 719b6a6b2f1c..f4f7b828a20a 100644
--- a/addons/notes/README.md
+++ b/addons/notes/README.md
@@ -3,7 +3,7 @@
[![Build Status on CircleCI](https://circleci.com/gh/storybooks/storybook.svg?style=shield)](https://circleci.com/gh/storybooks/storybook)
[![CodeFactor](https://www.codefactor.io/repository/github/storybooks/storybook/badge)](https://www.codefactor.io/repository/github/storybooks/storybook)
[![Known Vulnerabilities](https://snyk.io/test/github/storybooks/storybook/8f36abfd6697e58cd76df3526b52e4b9dc894847/badge.svg)](https://snyk.io/test/github/storybooks/storybook/8f36abfd6697e58cd76df3526b52e4b9dc894847)
-[![BCH compliance](https://bettercodehub.com/edge/badge/storybooks/storybook)](https://bettercodehub.com/results/storybooks/storybook) [![codecov](https://codecov.io/gh/storybooks/storybook/branch/master/graph/badge.svg)](https://codecov.io/gh/storybooks/storybook)
+[![BCH compliance](https://bettercodehub.com/edge/badge/storybooks/storybook)](https://bettercodehub.com/results/storybooks/storybook) [![codecov](https://codecov.io/gh/storybooks/storybook/branch/master/graph/badge.svg)](https://codecov.io/gh/storybooks/storybook)
[![Storybook Slack](https://now-examples-slackin-rrirkqohko.now.sh/badge.svg)](https://now-examples-slackin-rrirkqohko.now.sh/)
[![Backers on Open Collective](https://opencollective.com/storybook/backers/badge.svg)](#backers) [![Sponsors on Open Collective](https://opencollective.com/storybook/sponsors/badge.svg)](#sponsors)
@@ -58,6 +58,30 @@ storiesOf('Component', module)
.add('With Markdown', withNotes(someMarkdownText)(() => ));
```
+
+If you want to use Github flavored markdown inline, use `withMarkdownNotes`:
+
+```js
+import { storiesOf } from '@storybook/react';
+import { withMarkdownNotes } from '@storybook/addon-notes';
+import Component from './Component';
+
+storiesOf('Component', module)
+ .add('With Markdown', withMarkdownNotes(`
+# Hello World
+
+This is some code showing usage of the component and other inline documentation
+
+~~~js
+
+ hello world!
+
+
+~~~
+ `)(() => ));
+
+```
+
### Deprecated API
This API is slated for removal in 4.0
diff --git a/addons/notes/package.json b/addons/notes/package.json
index 33e0fec9efc6..2021c8897752 100644
--- a/addons/notes/package.json
+++ b/addons/notes/package.json
@@ -21,6 +21,7 @@
},
"dependencies": {
"babel-runtime": "^6.26.0",
+ "marked": "^0.3.12",
"prop-types": "^15.6.0",
"util-deprecate": "^1.0.2"
},
diff --git a/addons/notes/src/index.js b/addons/notes/src/index.js
index 1fd5d328fcb7..247210ab1e3f 100644
--- a/addons/notes/src/index.js
+++ b/addons/notes/src/index.js
@@ -1,7 +1,18 @@
import deprecate from 'util-deprecate';
import addons from '@storybook/addons';
+import marked from 'marked';
import { WithNotes as ReactWithNotes } from './react';
+export const withMarkdownNotes = text => {
+ const channel = addons.getChannel();
+
+ return getStory => context => {
+ // send the notes to the channel before the story is rendered
+ channel.emit('storybook/notes/add_notes', marked(text));
+ return getStory(context);
+ };
+};
+
export const withNotes = textOrOptions => {
const channel = addons.getChannel();
const options = typeof textOrOptions === 'string' ? { text: textOrOptions } : textOrOptions;
diff --git a/examples/official-storybook/stories/__snapshots__/addon-notes.stories.storyshot b/examples/official-storybook/stories/__snapshots__/addon-notes.stories.storyshot
index c63bb34386ea..326234325191 100644
--- a/examples/official-storybook/stories/__snapshots__/addon-notes.stories.storyshot
+++ b/examples/official-storybook/stories/__snapshots__/addon-notes.stories.storyshot
@@ -17,3 +17,9 @@ exports[`Storyshots Addons|Notes withNotes rendering imported markdown 1`] = `
Button with notes - check the notes panel for details
`;
+
+exports[`Storyshots Addons|Notes withNotes rendering inline, github-flavored markdown 1`] = `
+
+`;
diff --git a/examples/official-storybook/stories/addon-notes.stories.js b/examples/official-storybook/stories/addon-notes.stories.js
index ffed0b3cd2da..62dabca83797 100644
--- a/examples/official-storybook/stories/addon-notes.stories.js
+++ b/examples/official-storybook/stories/addon-notes.stories.js
@@ -2,7 +2,7 @@ import React from 'react';
import { storiesOf } from '@storybook/react';
// eslint-disable-next-line import/named
-import { withNotes, WithNotes } from '@storybook/addon-notes';
+import { withNotes, WithNotes, withMarkdownNotes } from '@storybook/addon-notes';
import { action } from '@storybook/addon-actions';
import BaseButton from '../components/BaseButton';
import markdownNotes from './notes/notes.md';
@@ -20,6 +20,27 @@ storiesOf('Addons|Notes', module)
))
)
+ .add(
+ 'withNotes rendering inline, github-flavored markdown',
+ withMarkdownNotes(`
+# Documentation
+
+This is inline github-flavored markdown!
+
+## Example Usage
+~~~js
+storiesOf('Addons|Notes', module)
+ .add(
+ 'withNotes rendering imported markdown',
+ withNotes(markdownNotes)(() => (
+
+ ))
+ )
+~~~
+ `)(() => (
+
+ ))
+ )
.add('using deprecated API', () => (
diff --git a/yarn.lock b/yarn.lock
index 3ce6bc6aac63..47523cbe22cc 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -9938,7 +9938,7 @@ markdown-table@^1.1.0:
version "1.1.1"
resolved "https://registry.yarnpkg.com/markdown-table/-/markdown-table-1.1.1.tgz#4b3dd3a133d1518b8ef0dbc709bf2a1b4824bc8c"
-marked@^0.3.9:
+marked@^0.3.12, marked@^0.3.9:
version "0.3.12"
resolved "https://registry.yarnpkg.com/marked/-/marked-0.3.12.tgz#7cf25ff2252632f3fe2406bde258e94eee927519"