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

⭐前言

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

⭐引入react-markdown

React-markdown 是一个开源的 React 库，用于将 Markdown 语法转换为 React 元素。它支持常见的 Markdown 语法，如标题、段落、列表、代码块、粗体、斜体等，并提供了很多自定义选项和插件，可以定制化渲染 Markdown 标记。使用 react-markdown 可以方便地在 React 应用中展示 Markdown 内容，并支持使用 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)

💖 文章内容布局

CSS布局是指使用CSS来实现网页元素的定位和排列。有多种CSS布局方式，以下是其中几种：

盒子模型布局
盒子模型布局是指使用CSS的display属性，将元素转化为块级元素或内联元素，然后通过设置宽度、高度、边距、填充等属性来调整元素在页面中的位置和大小。

浮动布局
浮动布局是指使用CSS的float属性，将元素浮动到页面的左侧或右侧，并与其它元素进行外部或内部包裹，实现布局和定位的效果。

表格布局
表格布局是指使用CSS的display属性，将元素转化为表格、表格行、表格单元格等元素，并通过设置表格宽度、单元格宽度、行高等属性来实现页面的布局和定位。

弹性盒子布局
弹性盒子布局是一种比较新的布局方式，它使用CSS的flex属性，将元素转化为弹性盒子，并通过设置弹性盒子的方向、对齐方式、伸缩性等属性来实现页面的布局和定位。

这里选择弹性盒子布局，左右分开。
结构
采用左右结构

• 左侧 标题
• 右侧 内容

state变量存储markdown和titleArray的内容，getArticleData是读取接口的文章列表数据，配置一个变量loading来标记是否加载数据，避免数据加载不渲染。
最外层文章函数式组件的实现如下：

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>
        }
    </>)
}

左侧标题的函数式组件，接受state参数

• titleArray 标题的内容数组
• content 文章的内容

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>
    </>)
}

state变量存储markdown内容
右侧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 为flex布局
article-container-left为标题的占位布局
article-container-right为文章的渲染内容
css 代码如下：

.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代码高亮

react-syntax-highlighter是一个基于React的代码高亮组件库，支持多种主题和语言，可以帮助开发者在项目中实现代码的高亮显示。
它支持的语言包括但不限于JavaScript、CSS、HTML、JSON、Markdown等，支持的主题也非常丰富，用户可以自定义主题风格。
使用react-syntax-highlighter组件很简单，只需要导入相应的组件和样式，然后在需要高亮显示代码的位置使用即可。
除了基本的代码高亮功能，react-syntax-highlighter还支持配置标记行、显示行号和行号样式等高级功能，可以满足不同场景下的需求。

npm方式安装react-syntax-highlighter

$ npm install react-syntax-highlighter

react-syntax-highlighter引入react的组件
代码配置如下：

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内容结束，如有不足或者错误欢迎指出！
💖 感谢你的阅读💖