B类项目实训-markdown导航动态生成

最新推荐文章于 2024-06-04 10:03:50 发布

自闭怪

最新推荐文章于 2024-06-04 10:03:50 发布

阅读量640

点赞数

本文链接：https://blog.csdn.net/qq_44058111/article/details/115985545

版权

本文介绍了如何在前端使用ReactMarkdown库渲染Markdown文件，动态生成导航，并详细阐述了编辑Markdown、渲染逻辑、导航高亮的实现过程，包括监听hash和滚动事件来优化用户体验。项目已实现基本功能，待进一步优化。

摘要由CSDN通过智能技术生成

在前端编辑渲染markdown文件并动态生成导航。

渲染markdown

在这里使用react-markdown库中的ReactMarkdown渲染markdown。

react-markdown：https://github.com/remarkjs/react-markdown

首先在项目中引入ReactMarkdown组件，gfm用于渲染markdown中的表格以及删除线等组件。引入github-markdown-css作为markdown的前端样式（也可以自定义样式表）

remark-gfm：https://github.com/remarkjs/remark-gfm

import ReactMarkdown from 'react-markdown';
import gfm from 'remark-gfm';
import 'github-markdown-css/github-markdown.css'

<ReactMarkdown remarkPlugins={
   [gfm]} className='markdown-body'>
	{
   this.state.markdown}
</ReactMarkdown>

在ReactMarkdown中传入gfm作为remarkPlugins，设置类名为markdown-body以应用github-markdown-css，在组件中传入markdown内容。这里就在组件componentDidMount()方法中请求后端发送markdown数据。

在代码中直接保存markdown源文本时要做转义。

实时编辑只需要一个textarea就能做到。

将markdown内容作为组件state，将textarea的内容设为this.state.markdown，然后绑定onchange方法改变markdown的值，把spellcheck设为false关闭拼写检查。一个简单的markdown编辑器就做好了。

  handleChange = (e)=>{
   
    this.setState({
   
      markdown:e.target.value
    }

关注