Merge pull request #117 from gnarf/highlighters

Pass the langauge class in code for Prism highlights
storybookjs · Dec 4, 2016 · c50edfe · c50edfe
2 parents 24f9e45 + adba83e
commit c50edfe
Showing 1 changed file with 19 additions and 2 deletions.
diff --git a/src/components/markdown/code.js b/src/components/markdown/code.js
@@ -1,6 +1,21 @@
 import React from 'react';
 
 export class Code extends React.Component {
+
+  componentDidMount() {
+    this.highlight()
+  }
+
+  componentDidUpdate() {
+    this.highlight()
+  }
+
+  highlight() {
+    if (typeof Prism !== 'undefined') {
+      Prism.highlightAll()
+    }
+  }
+
   render() {
     const codeStyle = {
       fontFamily: 'Menlo, Monaco, "Courier New", monospace',
@@ -15,9 +30,11 @@ export class Code extends React.Component {
       overflowX: 'scroll',
     };
 
+    const className = this.props.language ? `language-${this.props.language}` : '';
+
     return (
-      <pre style={preStyle}>
-        <code style={codeStyle}>
+      <pre style={preStyle} className={className}>
+        <code style={codeStyle} className={className}>
           { this.props.code }
         </code>
       </pre>