tmp

resource/js/components/Page/PageBody.js

@@ -1,16 +1,78 @@
 import React from 'react';
+import marked from 'marked';
+import hljs from 'highlight.js';
 
 export default class PageBody extends React.Component {
-  render() {
+
+  constructor(props) {
+    super(props);
+
+    this.getMarkupHTML = this.getMarkupHTML.bind(this);
+  }
+
+  getMarkupHTML() {
     let body = this.props.pageBody;
     if (body === '') {
       body = this.props.page.revision.body;
     }
 
+
+    //var contentHtml = Crowi.unescape(contentText);
+    //// TODO 前処理系のプラグイン化
+    //contentHtml = this.preFormatMarkdown(contentHtml);
+    //contentHtml = this.expandImage(contentHtml);
+    //contentHtml = this.link(contentHtml);
+
+    //var $body = this.$revisionBody;
+    // Using async version of marked
+    //{}, function (err, content) {
+    //  if (err) {
+    //    throw err;
+    //  }
+    //  $body.html(content);
+    //});
+    //return body;
+    try {
+    marked.setOptions({
+      gfm: true,
+      highlight: (code, lang, callback) => {
+        let result, hl;
+        if (lang) {
+          try {
+            hl = hljs.highlight(lang, code);
+            result = hl.value;
+          } catch (e) {
+            result = code;
+          }
+        } else {
+          result = code;
+        }
+        return callback(null, result);
+      },
+      tables: true,
+      breaks: true,
+      pedantic: false,
+      sanitize: false,
+      smartLists: true,
+      smartypants: false,
+      langPrefix: 'lang-'
+    });
+    console.log('parsing', 'いくぜ');
+    const parsed = marked(body);
+    console.log('parsed', parsed);
+    } catch (e) { console.log(e); }
+
+    return { __html: parsed };
+  }
+
+  render() {
+    console.log('Render!');
+
     return (
-      <div>
-        {body}
-      </div>
+      <div
+        className="content"
+        dangerouslySetInnerHTML={this.getMarkupHTML()}
+        />
     );
   }
 }

resource/js/components/Search/SearchResultList.js

@@ -11,18 +11,15 @@ export default class SearchResultList extends React.Component {
   }
 
   getHighlightBody(body) {
-    console.log('getHighlightBody', this.props.searchingKeyword);
-    console.log('getHighlightBody', this.props.searchingKeyword.split(' '));
+    let returnBody = body;
+
     this.props.searchingKeyword.split(' ').forEach((keyword) => {
-      console.log(keyword);
-      const keywordExp = new RegExp('(' + keyword + ')', 'g');
-      console.log(keywordExp);
-      console.log(body.repalce(keywordExp, 'hoge hoge'));
-      //body = body.repalce(keywordExp, '<span style="highlighted">$1</span>');
+      const keywordExp = new RegExp('(' + keyword.replace(/[.*+?^${}()|[\]\\]/g, "\\$&") + ')', 'g');
+      returnBody = returnBody.replace(keyword, '<span style="highlighted">$&</span>');
     });
 
     //console.log(this.props.searchingKeyword, body);
-    return body;
+    return returnBody;
   }
 
   render() {