docs: update source with title

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",

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';

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',

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 (
-      <Source
-        language={mdxLanguageMap[language || 'jsx'] || language}
-        metastring={metastring}
-        {...otherProps}
-      >
-        {codeString.trimRight()}
-      </Source>
+      <Box variant="syntaxhighlight.markdown">
+        <Source
+          language={mdxLanguageMap[language || 'jsx'] || language}
+          metastring={metastring}
+          {...otherProps}
+        >
+          {codeString.trimRight()}
+        </Source>
+      </Box>
     );
   },
   h1: props => <LinkHeading as="h1" {...props} />,

ui/components/src/SyntaxHighlighter/SyntaxHighlighter.tsx

@@ -106,7 +106,7 @@ export const SyntaxHighlighter: FC<SyntaxHighlighterProps> = ({
       : ({ className, style, tokens, getLineProps, getTokenProps }: any) => (
           <Fragment>
             {title && (
-              <Heading as="h2" variant="syntaxhighlight.title">
+              <Heading as="h3" variant="syntaxhighlight.title">
                 {title}
               </Heading>
             )}

ui/components/src/ThemeContext/theme.ts

@@ -475,15 +475,20 @@ export const theme: ControlsTheme = {
     pb: 1,
   },
   syntaxhighlight: {
+    markdown: {
+      my: 2,
+    },
     highlight: {
       pl: 1,
       backgroundColor: 'highlight',
       borderLeft: (t: Theme) => `4px solid ${t.colors?.primary}`,
     },
     normal: {},
     title: {
-      fontWeight: 'bold',
-      pl: 2,
+      width: 'inherit',
+      background: 'transparent',
+      p: 2,
+      fontSize: 2,
     },
   },
   tabs: {