Fixed #148

Author: kenwheeler

src/components/code.js

@@ -2,13 +2,24 @@ import React, { Component, PropTypes } from "react";
 import { getStyles } from "../utils/base";
 import Radium from "radium";
 
+const format = (str) => {
+  return str.replace(/</g, "&lt;").replace(/>/g, "&gt;");
+};
+
 @Radium
 export default class Code extends Component {
+  createMarkup() {
+    return {
+      __html: format(this.props.children)
+    };
+  }
   render() {
     return (
-      <code className={this.props.className} style={[this.context.styles.components.code, getStyles.call(this), this.props.style]}>
-        {this.props.children}
-      </code>
+      <code
+        className={this.props.className}
+        style={[this.context.styles.components.code, getStyles.call(this), this.props.style]}
+        dangerouslySetInnerHTML={this.createMarkup()}
+      />
     );
   }
 }

src/components/markdown.js

@@ -5,6 +5,7 @@ import { isUndefined } from "lodash";
 
 import BlockQuote from "./block-quote";
 import CodePane from "./code-pane";
+import Code from "./code";
 import Heading from "./heading";
 import Image from "./image";
 import Link from "./link";
@@ -58,8 +59,7 @@ export const mdastConfigDefault = {
     h5: spectacleComponent(Heading, {size: 5}),
     h6: spectacleComponent(Heading, {size: 6}),
     img: Image,
-    // https://github.com/FormidableLabs/spectacle/issues/88
-    // inlineCode: Code,
+    inlineCode: Code,
     li: ListItem,
     p: Text,
     strong: spectacleComponent(S, {type: "bold"}),