diff --git a/examples/stories/src/tutorial/getting-started/gatsby.mdx b/examples/stories/src/tutorial/getting-started/gatsby.mdx
index 53eb6f78c..fb7f2619e 100644
--- a/examples/stories/src/tutorial/getting-started/gatsby.mdx
+++ b/examples/stories/src/tutorial/getting-started/gatsby.mdx
@@ -31,8 +31,7 @@ Add gatsby and its dependencies:
yarn add gatsby react react-dom
```
-In `package.json`:
-```json
+```json:title=package.json
...
"scripts": {
"build": "gatsby build",
@@ -54,8 +53,7 @@ yarn add @component-controls/gatsby-theme-stories
### Configure theme
Create a `gatsby-config.js` file in your project's home directory:
-```js
-//gatsby-config.js:
+```js:title=gatsby-config.js
module.exports = {
plugins: [
{
@@ -79,8 +77,7 @@ In the `.config` folder, create a `buildtime.js` file.
In this file, enter the paths (e.g. .mdx and/or .tsx) we want to search for the documentation files:
-```js
-//.config/buildtime.js
+```js:title=.config/buildtime.js
module.exports = {
stories: [
'../src/docs/*.@(mdx|tsx)',
@@ -98,9 +95,7 @@ mkdir src && mkdir src/docs
### MDX documentation file
-In `src/docs/first-page.mdx`:
-
-```mdx
+```mdx:title=src/docs/first-page.mdx
---
title: First Page
---
@@ -119,9 +114,7 @@ Assuming you have a `Button` component, you can write stories(examples) for it.
(If you don't have a `Button` component, we built a simple one you can copy [here](https://github.com/atanasster/gatsby-controls-starter/blob/master/src/components/Button.tsx).)
-In `src/docs/first-story.mdx`:
-
-```mdx
+```mdx:title=src/docs/first-story.mdx
---
title: First Story
---
@@ -153,9 +146,8 @@ Assuming you have a `Button` component, you can write stories(examples) for it.
(If you don't have a `Button` component, we built a simple one you can copy [here](https://github.com/atanasster/gatsby-controls-starter/blob/master/src/components/Button.tsx).)
-In `src/docs/first-story.stories.tsx`:
-```jsx
+```jsx:title=src/docs/first-story.stories.tsx
import React from 'react';
import { Button } from '../components/Button';
@@ -175,8 +167,7 @@ more: [writing esm stories](/tutorial/esmodules-stories)
In `.config`, create a `runtime.js` file and change some of the site's meta information:
-```js
-//.config/runtime.js
+```js:title=.config/runtime.js
module.exports = {
siteTitle: `awLib`,
siteHeadline: `Awesome components only`,
@@ -195,7 +186,7 @@ If your project is public, you can automatically display a git link on all docum
Displaying the git link is simple. Just add the repository's information in `package.json`:
-```json
+```json:title=package.json
...
"repository": {
"type": "git",
diff --git a/examples/stories/src/tutorial/getting-started/nextjs.mdx b/examples/stories/src/tutorial/getting-started/nextjs.mdx
index 790d227f1..28534c15c 100644
--- a/examples/stories/src/tutorial/getting-started/nextjs.mdx
+++ b/examples/stories/src/tutorial/getting-started/nextjs.mdx
@@ -15,9 +15,8 @@ yarn add @component-controls/nextjs-plugin
the default options will configure `component-controls` to work with react apps, with `react-docgen` for prop-types and `react-docgen-typescript` for typescript props information
-in `next.config.js`:
-```js
+```js:title=next.config.js
const withStories = require('@component-controls/nextjs-plugin/build');
module.exports = withStories({ configPath: '.config', ....other options });
@@ -29,8 +28,8 @@ module.exports = withStories({ configPath: '.config', ....other options });
## Create routes
### Create home page
-in `pages/index.tsx`:
-```jsx
+
+```jsx:title=pages/index.tsx
import React, { FC } from 'react';
import { GetStaticProps } from 'next';
@@ -62,8 +61,7 @@ export default HomePage;
### Create document type pages
-in `pages/[doctype].tsx`:
-```jsx
+```jsx:title=pages/[doctype].tsx
import React, { FC } from 'react';
import { GetStaticProps, GetStaticPaths } from 'next';
import { DocType, defDocType } from '@component-controls/core';
@@ -100,8 +98,7 @@ export default DocHomeTemplate;
### Create document and story pages
-in `pages/[doctype]/[...docid].tsx`:
-```jsx
+```jsx:title=pages/[doctype]/[...docid].tsx
import React, { FC } from 'react';
import { GetStaticProps, GetStaticPaths } from 'next';
import { DocPage } from '@component-controls/app';
diff --git a/examples/stories/src/tutorial/getting-started/storybook.mdx b/examples/stories/src/tutorial/getting-started/storybook.mdx
index 887ae9f4e..5c08c100d 100644
--- a/examples/stories/src/tutorial/getting-started/storybook.mdx
+++ b/examples/stories/src/tutorial/getting-started/storybook.mdx
@@ -17,9 +17,8 @@ yarn add @component-controls/storybook --dev
The default options will configure `component-controls` to work with react apps, with `react-docgen` for prop-types and `react-docgen-typescript` for typescript props information
-In `main.js`:
-```js
+```js:title=main.js
module.exports = {
addons: ['@component-controls/storybook']
}
@@ -29,9 +28,8 @@ module.exports = {
Currently this is not recommended as the typescript support in `react-docgen` is a bit lagging.
-in `main.js`:
-```js
+```js:title=main.js
module.exports = {
addons: [{
name: '@component-controls/storybook',
@@ -46,9 +44,8 @@ module.exports = {
The following options will bypass the loaders installed by `addon-docs` and will rely only on the instrumenting loaders from `component-controls`
-in `main.js`:
-```js
+```js:title=main.js
module.exports = {
addons: [{
name: '@component-controls/storybook',
diff --git a/ui/components/src/Markdown/MarkdownComponents.tsx b/ui/components/src/Markdown/MarkdownComponents.tsx
index dadab8131..8c18c99d2 100644
--- a/ui/components/src/Markdown/MarkdownComponents.tsx
+++ b/ui/components/src/Markdown/MarkdownComponents.tsx
@@ -3,7 +3,7 @@
import { ComponentType } from 'react';
import { preToCodeBlock } from 'mdx-utils';
import { jsx } from 'theme-ui';
-import { Label, Button } from 'theme-ui';
+import { Label, Button, Box } from 'theme-ui';
import { Language } from 'prism-react-renderer';
import { SyntaxHighlighter } from '../SyntaxHighlighter';
import { Source } from '../Source';
@@ -82,13 +82,15 @@ export const markdownComponents: MarkdownComponentType = {
)
: undefined;
return (
-
+
+
+
);
},
h1: props => ,
diff --git a/ui/components/src/SyntaxHighlighter/SyntaxHighlighter.tsx b/ui/components/src/SyntaxHighlighter/SyntaxHighlighter.tsx
index 456075541..7c0d9fd81 100644
--- a/ui/components/src/SyntaxHighlighter/SyntaxHighlighter.tsx
+++ b/ui/components/src/SyntaxHighlighter/SyntaxHighlighter.tsx
@@ -106,7 +106,7 @@ export const SyntaxHighlighter: FC = ({
: ({ className, style, tokens, getLineProps, getTokenProps }: any) => (
{title && (
-
+
{title}
)}
diff --git a/ui/components/src/ThemeContext/theme.ts b/ui/components/src/ThemeContext/theme.ts
index db3d8de25..cd5682bde 100644
--- a/ui/components/src/ThemeContext/theme.ts
+++ b/ui/components/src/ThemeContext/theme.ts
@@ -475,6 +475,9 @@ export const theme: ControlsTheme = {
pb: 1,
},
syntaxhighlight: {
+ markdown: {
+ my: 2,
+ },
highlight: {
pl: 1,
backgroundColor: 'highlight',
@@ -482,8 +485,10 @@ export const theme: ControlsTheme = {
},
normal: {},
title: {
- fontWeight: 'bold',
- pl: 2,
+ width: 'inherit',
+ background: 'transparent',
+ p: 2,
+ fontSize: 2,
},
},
tabs: {