React博客项目系列1 编写markdown文章,代码高亮,显示文章与目录

在掘金发完来csdn发,一两吃了属于是,以下是正文。

最近在学React,想着做个博客项目练练手,学到了很多东西,在此记录一下。

下载依赖

// markdown编辑器
yarn add for-editor
// 用于显示markdown文章
yarn add react-markdown
// 用于显示目录,不过显示有bug,可以先不下载看后面
yarn add markdown-navbar
// 划线、表、任务列表和直接url等的语法扩展
yarn add remark-gfm   
// 解析标签,支持html语法
yarn add rehype-raw   
// markdown内容样式,也可以自己写
yarn add github-markdown-css
// 用于高亮代码块
yarn add react-syntax-highlighter

编写markdown文章

for-editor

import Editor from 'for-editor'
import { useState } from 'react'
const EditArticle = () => {
  // 编辑器配置,可以根据自己需要决定是否显示
  const toolbar = {
    h1: true, // h1
    h2: true, // h2
    h3: true, // h3
    h4: true, // h4
    img: true, // 图片
    link: true, // 链接
    code: true, // 代码块
    preview: true, // 预览
    expand: true, // 全屏
    /* v0.0.9 */
    undo: true, // 撤销
    redo: true, // 重做
    save: true, // 保存
    /* v0.2.3 */
    subfield: true, // 单双栏模式
  }
  // 文章内容
  const [value, setValue] = useState('')
  const handleChange = (val) => {
    setValue(val)
  }
  return (
    <div className='editor-box container has-nav'>    
      <div className='main'>
        <Editor className="editor" toolbar={toolbar} value={value} onChange={handleChange} preview={true} subfield={true} />
      </div>
    </div >
  )
}
export default EditArticle

效果:
React博客项目系列1 编写markdown文章,代码高亮,显示文章与目录_第1张图片

显示markdown文章及代码高亮

react-markdown

react-syntax-highlighter

在这里预览代码高亮效果

github-markdown.css

import { useState, useEffect } from 'react'
// 文章显示
import ReactMarkdown from 'react-markdown'
// 划线、表、任务列表和直接url等的语法扩展
import remarkGfm from 'remark-gfm'
// 解析标签,支持html语法
import rehypeRaw from 'rehype-raw'
// 代码高亮
import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter'
// 高亮的主题
import { coldarkDark } from 'react-syntax-highlighter/dist/esm/styles/prism'
// 这里我想方便修改样式,所以没有yarn add github-markdown-css而是直接把这个样式文件放在文件夹里了
import '@/styles/githubMarkdown.css'
const ArticleDetail = () => {
  // 这是通过接口拿到的文章
  const [articleMsg, setArticleMsg] = useState({})
  return (
    <div className='article-detail has-nav flex'>
      <div className='left-box flex-sub'>
        <div className='article-box bg-white'>
          <div className='article-body'>
            <ReactMarkdown
              // 使用github-markdown-css样式的话className必须是markdown-body
              className='markdown-body'
              // 插件及选项,singleTilde: false表示单波浪线也可以作为擦除线,但我设置true或false都没变化
              remarkPlugins={[remarkGfm, { singleTilde: false }]}
              rehypePlugins={[rehypeRaw]}
              components={{
                // 代码高亮
                code ({ node, inline, className, children, ...props }) {
                  const match = /language-(\w+)/.exec(className || '')
                  return !inline && match ? (
                    <SyntaxHighlighter
                      children={String(children).replace(/\n$/, '')}
                      style={coldarkDark}
                      language={match[1]}
                      PreTag="div"
                      showLineNumbers={true}
                      {...props}
                    />
                  ) : (
                    <code className={className} {...props} children={children} />
                  )
                }
              }}
            >{articleMsg.body}</ReactMarkdown>
          </div>
        </div>
      </div>
    </div>
  )
}
export default ArticleDetail

效果:

React博客项目系列1 编写markdown文章,代码高亮,显示文章与目录_第2张图片

样式换成掘金的康康:

React博客项目系列1 编写markdown文章,代码高亮,显示文章与目录_第3张图片

显示目录

markdown-navbar

markdown-navbar很好用,但是有时标题显示会有问题:

React博客项目系列1 编写markdown文章,代码高亮,显示文章与目录_第4张图片

bug修复

bug修复

React博客项目系列1 编写markdown文章,代码高亮,显示文章与目录_第5张图片

我的做法是把文件直接拷贝到项目里改完后再引入

import { useState, useEffect } from 'react'
// 有bug所以把文件拷贝在本地自己修改了
import MarkdownNavbar from '@/components/markdownNavbar'
const ArticleDetail = () => {
  // 这是通过接口拿到的文章
  const [articleMsg, setArticleMsg] = useState({})
  return (
    <div className='article-detail has-nav flex'>
      <div className='article-content basis-xs xs-hide flex'>
        <div className='markdown-nav content-sticky bg-white ellipsis'>
          <div className='sidebar-title'><span>目录</span></div>
          <MarkdownNavbar
            className="md-navbar"
            source={articleMsg.body}
            headingTopOffset={80}
            ordered={false} />
        </div>
      </div>
    </div>
   </div>
  )
}
export default ArticleDetail

修复后:

React博客项目系列1 编写markdown文章,代码高亮,显示文章与目录_第6张图片

你可能感兴趣的:(react,react.js,javascript,前端)