next.js博客搭建_react-markdown渲染内容（第三步）

⭐前言

大家好，我是yma16，本期给大家分享next项目中使用react-markdown渲染内容。
该系列的往期文章
博客搭建_初始化next项目
博客搭建_登录注册

⭐引入react-markdown

npm 安装

$ npm install react-markdown

yarn 安装

$ yarn add react-markdown

这里我选择npm

使用markdown渲染

示例渲染 hellow csdn

import React from 'react'
import ReactMarkdown from 'react-markdown'
import ReactDom from 'react-dom'

ReactDom.render(<ReactMarkdown># Hello, *CSDN* ,I am yma16!</ReactMarkdown>, document.body)

文章内容布局

结构
采用左右结构

• 左侧 标题
• 右侧 内容

最外层组件

import React, { useState, useEffect } from 'react';
import {getArticleList} from "../../service/article/article"
import MdContent from './markdown/MdContent'
import MdTitle from './title/MdTitle'

export default  function Article(){
    const [state, setState]:any = useState({
        content:'',
        titleArray:[]
    });
    const [loading,setLoading]=useState(true)

    const getArticleData=async ()=>{
        try{
            const res=await getArticleList({})
            console.log('res article',res)
            const {data}=res
            if(data.code){
                const content=data.article&&data.article[0]
                const titleArray=data['title']||[]
                setState({
                     ...state,
                    titleArray:titleArray,
                    content:content,
                })
                setLoading(false)
                console.log('state 远程数据',state)
            }
        }catch (e) {
            setLoading(true)
            console.error(e)
        }
    }
    useEffect(()=>{getArticleData()},[])
    // 左右结构
    return ( <>
        {
            loading? '加载中':
                <div className={'article-container'}>
                <div className={'article-container-left'}>
                    <MdTitle titleArray={state.titleArray} loading={loading}></MdTitle>
                </div>
                <div className={'article-container-right'}>
                    <MdContent content={state.content} loading={loading}></MdContent>
                </div>
            </div>
        }
    </>)
}

左侧标题

import React ,{useState,useEffect}from 'react';

function renderTitle(state) {
    if(!state.titleArray||state.titleArray.length===0){
        return <></>
    }
    else if(state.titleArray.length){

        return  state.titleArray.map((name,index)=> {
            return <li key={index}>{name}</li>
        })
    }

}
export default function MdTitle(props){
    const [state,setState]=useState({
        titleArray:[]
    })
    useEffect(()=>{
        setState({
            ...state,
            titleArray:[...props.titleArray]
        })
    },[])

    return (<>
        <div>
            {
                renderTitle(state)
            }
        </div>
    </>)
}

右侧markdown

import ReactMarkdown from 'react-markdown'
import React, { useEffect, useState } from "react";

export default function MdContent(props){
    const [state,setState]=useState({
        content:''
    })
    useEffect(()=>{
        console.log('articleContent',props.content)
        setState({
            ...state,
            content:props.content
        })
    },[])
    return (
        <>
            <ReactMarkdown>{state.content}</ReactMarkdown>
        </>
    )
}

样式

.article-container{
    display: flex;
    overflow: hidden;
}


.article-container-left{
    margin: 20px;
    width:300px;
    max-height: 900px;
}


.article-container-right{
    margin: 20px;
    max-width:1200px;
    max-height: 900px;
    overflow-y: auto;
}

效果：

react-syntax-highlighter代码高亮

引入hljs

$ npm install react-syntax-highlighter

高亮代码配置：

import React, { useEffect, useState } from "react";
import ReactMarkdown from 'react-markdown'
// @ts-ignore
import {Prism as SyntaxHighlighter} from 'react-syntax-highlighter'
// @ts-ignore
import {dark} from 'react-syntax-highlighter/dist/esm/styles/prism'
export default function MdContent(props){
    const [state,setState]=useState({
        content:''
    })
    useEffect(()=>{
        setState({
            ...state,
            content:props.content
        })
    },[props.content])

    return (
        <>
            <ReactMarkdown
                children={state.content}
                components={{
                    code({node, inline, className, children, ...props}) {
                        const match = /language-(\w+)/.exec(className || '')
                        return !inline && match ? (
                            <SyntaxHighlighter
                                {...props}
                                children={String(children).replace(/\n$/, '')}
                                style={dark}
                                language={match[1]}
                                PreTag="div"
                            >
                            </SyntaxHighlighter>
                        ) : (
                            <code {...props} className={className}>
                                {children}
                            </code>
                        )
                    }
                }}
            >
            </ReactMarkdown>
        </>
    )
}

⭐结束

本文分享react渲染markdown内容结束
感谢你的阅读