使用react-markdown的写代码块的时候,内容没有hljs*样式?

Viewed 3604

react-markdown在线编辑和思否的markdown,代码块都会有hljs*样式
图片描述

下面是我的代码

import React from 'react';
import ReactMarkdown from 'react-markdown';
import PropTypes from 'prop-types';
import {Input} from 'antd';
import './css/index.css';

class Markdown extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            content: ''
        };
        this.onInput = this.onInput.bind(this);
    }

    onInput(e) {
        const value = e.target.value;
        this.setState({content:value});
        this.props.onChangeCallBack(value);
    }

    componentWillReceiveProps(props) {
        this.setState({content: props.content});
    }

    render() {
        const {content} = this.state;
        return (
            <div className='markdown-component'>
                <Input.TextArea className='input-container' value={content} onChange={this.onInput} />
                <h3>预览</h3>
                <div className='markdown-preview-component'>
                    <ReactMarkdown
                        source={this.state.content}
                    />
                </div>
            </div>
        )
    }
}

export default Markdown;

Markdown.propTypes = {
    onChangeCallBack: PropTypes.func.isRequired,
    content: PropTypes.string
};

图片描述

但是我的代码中,使用react-markdown的代码块后,却不会根据代码的单词添加span和样式。
是我没开启什么功能还是需要再另写js去控制?

1 Answers