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

• 前言
• 一、react-syntax-highlighter的使用
• 二、react-markdown的使用
• 总结

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


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

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

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 (
    
      {String(textContent).replace(/n$/, '')}
    
  );
};

export default OmsSyntaxHighlight;

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

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

const Demo = () => {
 return 
}

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


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

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 (
    
              {String(children).replace(/n$/, '')}
            
          ) : (
            
              {children}
            
          );
        }
      }}
    >
      {textContent}
    
  );
};

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 
}