Switching to Prism

kenwheeler · kenwheeler · commit 09c3170dfda8 · 2015-11-23T17:55:21.000-05:00
diff --git a/index.html b/index.html
@@ -4,11 +4,14 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width initial-scale=1 user-scalable=no" />
     <title>Spectacle</title>
-    <link href="http://fonts.googleapis.com/css?family=Lobster+Two:400,700" rel="stylesheet" type="text/css">
-    <link href="http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,700" rel="stylesheet" type="text/css">
+    <link href="https://fonts.googleapis.com/css?family=Lobster+Two:400,700" rel="stylesheet" type="text/css">
+    <link href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,700" rel="stylesheet" type="text/css">
+    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/prism/1.3.0/themes/prism-tomorrow.css">
 </head>
 <body>
     <div id="root"></div>
+    <script src="https://cdn.jsdelivr.net/prism/1.3.0/prism.js" type="text/javascript"></script>
+    <script src="https://cdn.jsdelivr.net/prism/1.3.0/components/prism-jsx.min.js" type="text/javascript"></script>
     <script src="./dist/bundle.js"></script>
 </body>
 </html>
diff --git a/index.js b/index.js
@@ -11,7 +11,7 @@ import preloader from "./src/utils/preloader";
 import Interactive from "./assets/interactive";
 
 require("normalize.css");
-require("./themes/default/index.css");
+require("./src/themes/default/index.css");
 require("highlight.js/styles/monokai_sublime.css");
 
 const images = {
@@ -25,8 +25,8 @@ preloader([images.city, images.kat, images.markdown]);
 
 render(
   <Spectacle
-    theme={require("./themes/default/index")}
-    print={require("./themes/default/print")}
+    theme={require("./src/themes/default/index")}
+    print={require("./src/themes/default/print")}
   >
     <Deck transition={["zoom", "slide"]} transitionDuration={500}>
       <Slide transition={["zoom"]} bgColor="primary">
@@ -52,7 +52,7 @@ render(
       </Slide>
       <Slide transition={["zoom", "fade"]} bgColor="primary" notes="<ul><li>talk about that</li><li>and that</li></ul>">
         <CodePane
-          lang="javascript"
+          lang="jsx"
           source={require("raw!./assets/deck.example")}
           margin="20px auto"
         />
diff --git a/package.json b/package.json
@@ -12,7 +12,6 @@
   "author": "",
   "license": "MIT",
   "dependencies": {
-    "highlight.js": "8.9.1",
     "history": "1.13.1",
     "lodash": "3.10.1",
     "mdast": "^2.1.0",
diff --git a/src/components/code-pane.js b/src/components/code-pane.js
@@ -1,26 +1,29 @@
 import React, { Component, PropTypes } from "react";
-import highlight from "highlight.js";
 import { getStyles } from "../utils/base";
 import Radium from "radium";
 import isUndefined from "lodash/lang/isundefined";
 
+const format = (str) => {
+    return str.replace(/</g,'&lt;').replace(/>/g,'&gt;') ;
+};
+
 @Radium
 export default class CodePane extends Component {
   createMarkup() {
     const { source, children, lang } = this.props;
-    // Allow code to come from source or from children, for markdown support
-    const language = highlight.getLanguage(lang);
     const code = (isUndefined(source) || source === "") ? children : source;
-    const markup = highlight.highlightAuto(code, language ? language.aliases : undefined);
     return {
-      __html: markup.value
+      __html: format(code)
     };
   }
+  componentDidMount() {
+    return window.Prism && window.Prism.highlightAll();
+  }
   render() {
     return (
       <pre style={[this.context.styles.components.codePane.pre, getStyles.call(this), this.props.style]}>
         <code
-          className="hljs"
+          className={`language-${this.props.lang}`}
           style={this.context.styles.components.codePane.code}
           dangerouslySetInnerHTML={this.createMarkup()}
         />
@@ -41,6 +44,6 @@ CodePane.propTypes = {
 };
 
 CodePane.defaultProps = {
-  lang: "",
+  lang: "markup",
   source: ""
 };
diff --git a/src/themes/default/index.css b/src/themes/default/index.css
diff --git a/src/themes/default/index.js b/src/themes/default/index.js
@@ -133,15 +133,14 @@ export default {
     codePane: {
       pre: {
         margin: "auto",
-        fontSize: "1rem",
+        fontSize: "0.8rem",
         fontWeight: "normal",
         fontFamily: fonts.tertiary,
         minWidth: "100%",
         maxWidth: 800
       },
       code: {
         textAlign: "left",
-        padding: 20,
         fontWeight: "normal"
       }
     },
diff --git a/src/themes/default/print.js b/src/themes/default/print.js
@@ -61,7 +61,7 @@ export default {
       pre: {
         maxWidth: 800,
         margin: "auto",
-        fontSize: "1rem",
+        fontSize: "0.8rem",
         fontWeight: "normal",
         fontFamily: fonts.tertiary
       },
