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

本文介绍了如何在前端使用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源文本时要做转义。

编辑markdown

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

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

  handleChange = (e)=>{
   
    this.setState({
   
      markdown:e.target.value
    }
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值