react项目实现预览markdown，以及代码高亮

前言

不少的react项目中需要实现markdown预览以及代码高亮的功能，效果如下。


上面图片展示的内容是我在个人项目中实现的效果，用到了两个库react-markdown和react-syntax-highlighter,一个用于预览markdown文本，另外一个用于代码高亮展示。

一、react-syntax-highlighter的使用

我下载的版本是15.4.5。
下面是我自己在项目使用中封装的组件

// 文档 (https://flowercloud.net/aff.php?aff=11050) 
import React from 'react';
import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
import { vscDarkPlus, coyWithoutShadows, darcula } from 'react-syntax-highlighter/dist/esm/styles/prism';// 代码高亮主题风格

// vscDarkPlus vscode 暗色主题
// darcula  webstorm 暗色主题
// coyWithoutShadows 上面展示的效果

type tProps = {
  textContent: string;
  language: string;
  darkMode?: boolean;
}

const them = {
  dark: vscDarkPlus,
  light: coyWithoutShadows
};

const OmsSyntaxHighlight = (props: tProps) => {
  const { textContent, darkMode, language = 'txt' } = props;
  if (typeof darkMode === 'undefined') {
    them.light = darcula;
  }
  if (typeof darkMode === 'boolean') {
    them.light = coyWithoutShadows;
  }
  return (
    <SyntaxHighlighter
      showLineNumbers={true} // 是否展示左侧行数
      lineNumberStyle={{ color: '#ddd', fontSize: 10 }} // 左侧行数的样式
      style={darkMode ? them.dark : them.light}  // 主题风格
      language={language}  // 需要语言类型 如css, jsx , javascript 等
      PreTag='div'  
    >
      {String(textContent).replace(/\n$/, '')}
    </SyntaxHighlighter>
  );
};

export default OmsSyntaxHighlight;

import React from 'react';
import { OmsSyntaxHighlight } from 'xxxxx';

const textContent = 'console.log(1);'

const Demo = () => {
 return <OmsSyntaxHighlight textContent={textContent} language={javascript} darkMode />
}

可以根据需求实现二次封装达到想要的效果，比如在我的项目中我需要实现代码高亮的主题随我的项目主题改变实现亮暗主题的切换效果。


如果我没有传入darkMode这个参数,默认的就是webstorm的风格,官方提供了很多风格。感兴趣的话可以去这里查看

二、react-markdown的使用

// 文档 (https://flowercloud.net/aff.php?aff=11050) 
import React from 'react';
import ReactMarkdown from 'react-markdown';
import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
import { vscDarkPlus, coyWithoutShadows, darcula } from 'react-syntax-highlighter/dist/esm/styles/prism';

// darcula webstorm
// vscDarkPlus vscode暗色主题

type tProps = {
  textContent: string
  darkMode?: boolean; // markdown文本
}

const them = {
  dark: vscDarkPlus,
  light: coyWithoutShadows
};

const OmsViewMarkdown = (props: tProps) => {
  const { textContent, darkMode } = props;
  if (typeof darkMode === 'undefined') {
    them.light = darcula;
  }
  if (typeof darkMode === 'boolean') {
    them.light = coyWithoutShadows;
  }
  return (
    <ReactMarkdown
      components={{
        code({ node, inline, className, children, ...props }) {
          const match = /language-(\w+)/.exec(className || '');
          return !inline && match ? (
            <SyntaxHighlighter
              showLineNumbers={true}
              style={darkMode ? them.dark : them.light}
              language={match[1]}
              PreTag='div'
              {...props}
            >
              {String(children).replace(/\n$/, '')}
            </SyntaxHighlighter>
          ) : (
            <code className={className} {...props}>
              {children}
            </code>
          );
        }
      }}
    >
      {textContent}
    </ReactMarkdown>
  );
};

export default OmsViewMarkdown;

import React from 'react';
import { OmsViewMarkdown} from 'xxxxx';

const textContent = `
## 项目简介
本项目后端使用gin、gorm和ssh、sftp开发。旨在编写一个轻量，易用，多平台的运维项目。
前端使用react、typescript、vite构建。
现阶段目的是做一个阉割版的xshell并简单的实现ansible或者saltstack的部分功能。

### 目前已经实现的功能
1. 隧道, 类似ssh的-L和-R
2. cron任务和长进程的管理
3. ssh命令批量执行
4. 文件批量的上传 流式传输支持大文件
5. 基于sftp文件浏览器

### 查看后端代码请移步到 [oms](https://github.com/ssbeatty/oms)`;

const Demo = () => {
 return <OmsViewMarkdown textContent={textContent}  darkMode />
}

总结

以上就是两个库比较简单的使用方法，感兴趣的小伙伴可以在自己的项目中试一下。另外本文中的图片来自个人项目oms运维管理系统目前实现了文件浏览上传等功能。感兴趣的小伙伴可以看看👀github连接 gitee连接