Updated component and demo to fix a regression where changing language or content did not update the rendered/styled text

bvaughn · bvaughn · commit 6272ba8b663c · 2016-05-07T08:27:39.000-07:00
diff --git a/src/Highlight.example.css b/src/Highlight.example.css
@@ -2,3 +2,9 @@
   white-space: pre;
   font-family: monospace;
 }
+
+pre,
+.pre {
+  background: #222;
+  border: none;
+}
diff --git a/src/Highlight.example.js b/src/Highlight.example.js
@@ -55,7 +55,10 @@ export default class HighlightDemoDemo extends Component {
             onChange={event => this._debouncedSetState('content', event.target.value)} />
         </div>
         <label>Output</label>
-        <Highlight language={language}>
+        <Highlight
+          className={styles.pre}
+          language={language}
+        >
           {content}
         </Highlight>
       </div>
diff --git a/src/Highlight.js b/src/Highlight.js
@@ -9,21 +9,23 @@ export default class Highlight extends Component {
   }
 
   componentDidMount () {
-    highlight.initHighlightingOnLoad()
-    highlight.highlightBlock(findDOMNode(this))
+    highlight.highlightBlock(findDOMNode(this.refs.code))
   }
 
   componentDidUpdate () {
     highlight.initHighlighting.called = false
-    highlight.initHighlighting()
+    highlight.highlightBlock(findDOMNode(this.refs.code))
   }
 
   render () {
     const { children, language } = this.props
 
     return (
-      <pre>
-        <code className={language}>
+      <pre {...this.props}>
+        <code
+          className={language}
+          ref='code'
+        >
           {children}
         </code>
       </pre>
diff --git a/website/Application.js b/website/Application.js
@@ -25,7 +25,7 @@ export default class Application extends React.Component {
         </Highlight>
         <p>Choose a highlight.js theme and make sure it's included in your index file.</p>
         <Highlight language='html'>
-          <link rel='stylesheet' href='https://highlightjs.org/static/demo/styles/railscasts.css' />
+          {`<link rel='stylesheet' href='https://highlightjs.org/static/demo/styles/railscasts.css' />`}
         </Highlight>
         <p>And then use react-highlight.js to display your text like so:</p>
         <Highlight language='html'>
diff --git a/website/index.html b/website/index.html
@@ -3,7 +3,7 @@
   <head>
     <title>react-highlight.js</title>
     <meta charset="utf-8">
-    <link rel='stylesheet' href='https://highlightjs.org/static/demo/styles/tomorrow-night.css'/>
+    <link rel='stylesheet' href='https://highlightjs.org/static/demo/styles/railscasts.css'/>
     <link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css'/>
   </head>
   <body>
