Fixes markdown styling

README.md

@@ -444,7 +444,7 @@ The fill tag takes up all the space available to it. For example, if you have a
 ### Markdown Tag
 
 <a name="markdown"></a>
-#### Markdown
+#### Markdown (Base)
 
 The Markdown tag is used to add inline markdown to your slide. You can provide markdown source via the `source` prop, or as children. You can also provide a custom [mdast configuration](https://github.com/wooorm/mdast) via the `mdastConfig` prop.
 

src/components/markdown.js

@@ -1,6 +1,8 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
+import { getStyles } from '../utils/base';
 import marksy from 'marksy';
+import styled from 'react-emotion';
 
 import BlockQuote from './block-quote';
 import CodePane from './code-pane';
@@ -22,6 +24,8 @@ import TableBody from './table-body';
 import TableItem from './table-item';
 
 
+const Container = styled.div(props => props.styles);
+
 const _Heading = size => {
   const component = ({ children }) => <Heading size={size}>{children}</Heading>;
   component.propTypes = { children: PropTypes.node };
@@ -74,23 +78,34 @@ export default class Markdown extends Component {
     style: PropTypes.object
   };
 
+  static contextTypes = {
+    styles: PropTypes.object,
+    store: PropTypes.object,
+    typeface: PropTypes.object
+  };
+
   static defaultProps = {
     style: {},
   };
 
   render() {
     const { style, children, source } = this.props;
+    const styleComputed = [
+      getStyles.call(this),
+      style
+    ];
+
     if (source) {
       return (
-        <div style={style}>
+        <Container styles={styleComputed}>
           {compile(source).tree}
-        </div>
+        </Container>
       );
     }
     return (
-      <div style={style}>
+      <Container styles={styleComputed}>
         {compile(children).tree}
-      </div>
+      </Container>
     );
   }
 }