⭐前言
大家好，我是yma16，本期给大家分享next项目中使用react-markdown渲染内容。
该系列的往期文章
⭐引入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内容结束，如有不足或者错误欢迎指出！
💖 感谢你的阅读💖
