react+express个人博客（一）.主页及编辑器实现

源码：github:

https://github.com/xiaofengz/react-blog

xiaofengz/react-blog

首页效果：

image

markdown：

image

EditorMarkdown.js （编辑器组件）

1. 使用ReactMarkDown:github(http://github.com/rexxars/react-markdown)
2. 可选CodeMirror 一个支持语法高亮、自动缩进、智能提示等功能的编辑器

import React, {Component} from 'react';
// import CodeMirror from 'COMPONENTS/CodeMirror';
import { Input } from 'antd';
import ReactMarkdown from 'react-markdown';
import CodeBlock from "COMPONENTS/CodeBlock"
const { TextArea } = Input;
class EditorMarkdown extends Component {
constructor (props) {
super(props)
this.state = {
           value:''
       }
   }
componentDidMount () {
   }
updateCode(e) {
this.setState({
           value: e.target.value,
       });
console.log(e.keyCode)
if (e.keyCode == 9) {
alert('tab！')
       }
   }
checkTab (e) {
if (e.keyCode == 9) {
e.preventDefault();
this.setState({
               value:this.state.value + '    '
           })
       }
console.log('value',e.target.value)
   }
render() {

return 

               

               {/*  */}
               
               
               
   

   }
}

export default EditorMarkdown;

• CodeBlock (使用highlight实现 代码高亮)

https://github.com/isagalaev/highlight.js

import React, {PureComponent} from 'react';
const hljs = window.hljs

class CodeBlock extends PureComponent {
constructor(props) {
super(props)
this.setRef = this.setRef.bind(this)
 }

componentDidMount() {
this.highlightCode()
 }
setRef(el) {
this.codeEl = el
 }
componentDidUpdate() {
this.highlightCode()
 }

highlightCode() {
hljs.highlightBlock(this.codeEl)
 }

render() {
return (
       
         {this.props.value}
       
     
   )
 }
}

export default CodeBlock;