working with header animations - marked/highlightjs fixes

client/js/components/Header.js

@@ -1,10 +1,16 @@
 import React from 'react';
+import {bubble} from '../../assets/js/bubble';
 
 export default class Header extends React.Component{
+  componentDidMount(){
+    bubble();
+  }
 
   render(){
     return(
-      <header class="Header" />
+      <header id="header" class="Header">
+        <canvas id="canvas" width="854" height="709"></canvas>
+      </header>
     )
   }
 }

client/js/components/Post.js

@@ -1,11 +1,13 @@
 import React from 'react';
 import marked from 'marked';
-import highlight from 'highlight.js';
+import hljs from 'highlight.js';
+
+const renderer = new marked.Renderer();
 
 marked.setOptions({
-    header: true,
+    langPrefix: 'hljs ',
     highlight: (code) => {
-        return highlight.highlightAuto(code).value;
+      return  hljs.highlightAuto(code).value;
     }
 });
 
@@ -13,7 +15,7 @@ export default class Post extends React.Component{
 
   render(){
     return(
-      <div class="Preview" dangerouslySetInnerHTML={{__html : marked(this.props.content)}}>
+      <div class="Preview" dangerouslySetInnerHTML={{__html : marked(this.props.content, {renderer : renderer})}}>
       </div>
     );
   }

client/js/components/Preview.js

@@ -13,7 +13,7 @@ export default class Preview extends React.Component{
           <div class="date">
             {posts[i].date}
           </div>
-          <h2 class="intro" >{posts[i].title.toString()}</h2>
+          <h1 class="intro" >{posts[i].title.toString()}</h1>
           <p>{posts[i].intro.toString()}</p>
           <p>
             <Link class="link" to={`/post/${posts[i].category}/${posts[i].filename}`}>