single parser

src/components/content.js

@@ -3,6 +3,7 @@ import Section from './section';
 import PureRenderMixin from 'react-pure-render/mixin';
 import GithubSlugger from 'github-slugger';
 import { transformURL } from '../../custom';
+import remark from 'remark';
 let slugger = new GithubSlugger();
 let slug = title => { slugger.reset(); return slugger.slug(title); };
 
@@ -76,11 +77,13 @@ var Content = React.createClass({
   },
   render() {
     let { ast, language, leftClassname, rightClassname } = this.props;
+    let parser = remark();
     return (<div className='clearfix'>
       {chunkifyAST(ast, language).map((chunk, i) => <Section
         leftClassname={leftClassname}
         rightClassname={rightClassname}
         chunk={chunk}
+        parser={parser}
         key={i} />)}
     </div>);
   }

src/components/section.js

@@ -1,15 +1,14 @@
 import React from 'react';
-import remark from 'remark';
 import remarkHTML from 'remark-html';
 import remarkHighlight from '../highlight';
 import PureRenderMixin from 'react-pure-render/mixin';
 import { postHighlight } from '../../custom';
 
-function renderHighlighted(nodes) {
+function renderHighlighted(nodes, parser) {
   return {
-    __html: postHighlight(remark()
+    __html: postHighlight(parser
       .use(remarkHTML)
-      .stringify(remark().use(remarkHighlight).run({
+      .stringify(parser.use(remarkHighlight).run({
         type: 'root',
         children: nodes
       })))
@@ -21,7 +20,8 @@ var Section = React.createClass({
   propTypes: {
     chunk: React.PropTypes.object.isRequired,
     leftClassname: React.PropTypes.string.isRequired,
-    rightClassname: React.PropTypes.string.isRequired
+    rightClassname: React.PropTypes.string.isRequired,
+    parser: React.PropTypes.object.isRequired
   },
   render() {
     let { chunk, leftClassname, rightClassname } = this.props;
@@ -31,10 +31,10 @@ var Section = React.createClass({
       className={`keyline-top section contain clearfix ${preview ? 'preview' : ''}`}>
       <div
         className={leftClassname}
-        dangerouslySetInnerHTML={renderHighlighted(left)} />
+        dangerouslySetInnerHTML={renderHighlighted(left, this.props.parser)} />
       {right.length > 0 && <div
         className={rightClassname}
-        dangerouslySetInnerHTML={renderHighlighted(right)} />}
+        dangerouslySetInnerHTML={renderHighlighted(right, this.props.parser)} />}
     </div>);
   }
 });