Add code highlight.

Author: jaywcjlove

src/components/PreviewMarkdown/css.less

@@ -0,0 +1,18 @@
+
+.hljs {
+  .selector-tag {
+    color: #22863a; 
+  }
+  .selector-class {
+    color: #6f42c1;
+  }
+  .selector-pseudo {
+    font-weight: bold;
+  }
+  .attribute {
+    color: #005cc5;
+  }
+  .number {
+    color: #005cc5;
+  }
+}

src/components/PreviewMarkdown/default.less

@@ -13,17 +13,18 @@ pre code {
 pre {
   margin-bottom: 18px;
   max-height: 35em;
+  font-size: 85%;
+  line-height: 1.45;
   position: relative;
   overflow: auto;
-  background-color: #F0F0F0;
+  background-color: #f6f8fa;
   border-radius: 3px;
 }
 del {
   color: #888;
 }
 pre code {
   background: none;
-  font-size: 1em;
   overflow-wrap: normal;
   white-space: inherit;
 }

src/components/PreviewMarkdown/hljs.less

@@ -0,0 +1,34 @@
+
+.hljs {
+  .comment {
+    color: #6a737d;
+  }
+  .keyword {
+    color: #d73a49;
+  }
+  .attr {
+    color: #032f62;
+  }
+  .string {
+    color: #032f62;
+  }
+  .class {
+    .keyword {
+      color: #d73a49;
+    }
+    .title {
+      color: #6f42c1;
+    }
+    .title {
+      color: #6f42c1;
+    }
+  }
+  .tag {
+    .name {
+      color: #22863a;
+    }
+    .attr {
+      color: #6f42c1;
+    }
+  }
+}

src/components/PreviewMarkdown/index.less

@@ -19,6 +19,8 @@
     &-markdown {
       padding: 20px;
       @import "./default.less";
+      @import "./hljs.less";
+      @import "./css.less";
     }
   }
 }

src/components/PreviewMarkdown/index.tsx

@@ -1,9 +1,15 @@
 import classnames from 'classnames'
+import hljs from 'highlight.js';
 import React from 'react';
 import ReactMarkdown, { MarkdownAbstractSyntaxTree } from 'react-markdown';
 import { IProps } from '../../common/props';
 import './index.less';
 
+hljs.configure({
+  classPrefix: '', // don't append class prefix
+  tabReplace: '  ', // 2 spaces
+});
+
 export interface IPreviewMarkdown extends IProps {
   visble: boolean;
   value?: string;
@@ -20,21 +26,39 @@ export default class PreviewMarkdown extends React.Component<IPreviewMarkdown, I
     prefixCls: 'md-editor',
     visble: true,
   }
+  public node!: HTMLDivElement;
   constructor(props: IPreviewMarkdown) {
     super(props);
     this.state = {
       value: props.value,
     }
   }
 
+  public componentDidMount() {
+    this.highlight();
+  }
+
+  public highlight() {
+    const code = this.node.getElementsByTagName('code') as unknown as HTMLElement[];
+    for (const value of code) {
+      const tag = value.parentNode as HTMLElement;
+      if (tag && tag.tagName === 'PRE') {
+        hljs.highlightBlock(value);
+      }
+    }
+  }
+
   public updateSource(value: string) {
-    this.setState({ value });
+    this.setState({ value }, () => {
+      this.highlight();
+    });
   }
 
   public render() {
     const { prefixCls, visble, value, ...elementProps } = this.props;
     return (
       <div
+        ref={(node: HTMLDivElement) => this.node = node}
         className={classnames(`${prefixCls}-preview`, {
           [`${prefixCls}-visble`]: visble
         })}

src/index.less

@@ -5,6 +5,7 @@
     box-shadow: 0 0 0 1px rgba(16, 22, 26, 0.1), 0 0 0 rgba(16, 22, 26, 0), 0 1px 1px rgba(16, 22, 26, 0.2);
     border-radius: 3px;
     position: relative;
+    background-color: #fff;
     &-content {
       position: relative;
     }

website/App.less

@@ -1,3 +1,7 @@
+body {
+  background: #343a40;
+}
+
 .warpper {
   color: #333;
 }
@@ -9,7 +13,9 @@
 }
 
 .doc {
-  padding: 20px 0 0 0;
+  width: 980px;
+  padding: 20px 10px 0 10px;
+  margin: 0 auto;
 }
 
 .logo {
@@ -19,4 +25,4 @@
     margin: 0 auto;
     display: block;
   }
-}
+}

website/App.tsx

@@ -27,7 +27,7 @@ export default class App extends React.Component {
           />
         </div>
         <ReactMarkdown source={DocumentStrSource} className={styles.doc} />
-        <Footer name="Kenny Wong" href="" year={2019}/>
+        <Footer name="Kenny Wong" href="https://github.com/uiwjs/react-markdown-editor" github="https://github.com/uiwjs/react-markdown-editor" year={2019}/>
       </div>
     );
   }

website/Logo.tsx

@@ -1,6 +1,11 @@
+
 .footer {
-    text-align: center;
-    padding: 15px 0 100px 0;
-    font-size: 12px;
-    line-height: 20px;
+  text-align: center;
+  padding: 15px 0 100px 0;
+  font-size: 12px;
+  line-height: 20px;
+  color: #fff;
+  a {
+    color: #03A9F4;
+  }
 }