Markdown增强(echarts等插件)

前言

在markdown 语法中我们可以实现标题、表格、图片等功能的实现,但同样有一些定制化的表现形式难以在markdown中实现,最近就遇到一个需求要在markdown渲染器中展示图表,搜阅了很多文档并没有找到现成的实现方法,最终在react-mardown官方文档中受到启发并实现了这个需求。

react-markdown

react-markdown 是React生态中的一个三方库,主要功能是渲染markdown语法的文本为markdown的预览模式。 使用方法也比较简单:

tsx 复制代码
import React, { FC } from 'react';
import Markdown from 'react-markdown';
import styled from 'styled-components';
interface MDPropsType {}
/** */
export const MD: FC<MDPropsType> = (props) => {
	const markdown = `
# 前言
在markdown 语法中我们可以实现标题、表格、图片等功能的实现,但同样有一些定制化的表现形式难以在markdown中实现,最近就遇到一个需求要在markdown渲染器中展示图表,搜阅了很多文档并没有找到现成的实现方法,最终在[react-mardown官方文档](https://github.com/remarkjs/react-markdown)中受到启发并实现了这个需求。

## react-markdown
react-markdown 是React生态中的一个三方库,主要功能是渲染markdown语法的文本为markdown的预览模式。
使用方法也比较简单:
\`\`\`js
console.log("Hello, Word!")
\`\`\`
	`;
	return (
		<MDContain>
			<Markdown children={markdown}></Markdown>
		</MDContain>
	);
};
//style_components
const MDContain = styled.div`
	width: 100%;
	height: 100%;
`;

这里的显示结果是没有样式的,可以去引用三方的样式或者说是自己去写样式

在此处我采用的是引用github markdown的样式

这里可以看到代码块是没有样式和高亮的
react-mardown官方文档中有提到解决方案

当然,其他插件也可以使用:

按照官方文档的指引去完善代码

  1. npm i remark-gfm react-syntax-highlighter --save-dev
  2. 完善代码
tsx 复制代码
import React, { FC } from 'react';
import Markdown from 'react-markdown';
import styled from 'styled-components';
import remarkGfm from 'remark-gfm';
import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
import { atomDark } from 'react-syntax-highlighter/dist/esm/styles/prism';
interface MDPropsType {}
/** */
export const MD: FC<MDPropsType> = (props) => {
  const markdown = `
# 前言
在markdown 语法中我们可以实现标题、表格、图片等功能的实现,但同样有一些定制化的表现形式难以在markdown中实现,最近就遇到一个需求要在markdown渲染器中展示图表,搜阅了很多文档并没有找到现成的实现方法,最终在[react-mardown官方文档](https://github.com/remarkjs/react-markdown)中受到启发并实现了这个需求。

## react-markdown
react-markdown 是React生态中的一个三方库,主要功能是渲染markdown语法的文本为markdown的预览模式。
使用方法也比较简单:
\`\`\`js
console.log("Hello, Word!")
\`\`\`
	`;
  return (
    <MDContain>
      <Markdown
        children={markdown}
        remarkPlugins={[remarkGfm]}
        components={{
          code(props) {
          const { children, className, node, ...rest } = props;
          const match = /language-(\w+)/.exec(className || '');
          return match ? (
            <SyntaxHighlighter
               {...rest}
               PreTag='div'
               children={String(children).replace(/\n$/, '')}
               language={match[1]}
               style={atomDark}
             />
             ) : (
             <code {...rest} className={className}>
               {children}
             </code>
             );
           }
         }}></Markdown>
       </MDContain>
     );
};
//style_components
const MDContain = styled.div`
	width: 100%;
	height: 100%;
`;

结果是这个样子的

观察代码高亮的插件实现不难发现其中的原理

在components对象的的code方法上可以通过className去捕获对应的语,这里我们用```echarts来定义语言

而children就是代码块里面的内容,这里我们用json来保存图标数据

return 会返回如何渲染

那么我们可以写一个Echarts组件接收 option 内容去渲染图表

tsx 复制代码
import React, { FC, useEffect, useRef } from 'react';
import Markdown from 'react-markdown';
import styled from 'styled-components';
import remarkGfm from 'remark-gfm';
import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
import { atomDark } from 'react-syntax-highlighter/dist/esm/styles/prism';
import * as echarts from 'echarts';
interface MDPropsType {}
/** */
export const MD: FC<MDPropsType> = (props) => {
  const markdown = `
# 前言
在markdown 语法中我们可以实现标题、表格、图片等功能的实现,但同样有一些定制化的表现形式难以在markdown中实现,最近就遇到一个需求要在markdown渲染器中展示图表,搜阅了很多文档并没有找到现成的实现方法,最终在[react-mardown官方文档](https://github.com/remarkjs/react-markdown)中受到启发并实现了这个需求。

## react-markdown
react-markdown 是React生态中的一个三方库,主要功能是渲染markdown语法的文本为markdown的预览模式。
使用方法也比较简单:
\`\`\`js
console.log("Hello, Word!")
\`\`\`
\`\`\`echarts
{"xAxis":{"type":"category","data":["Mon","Tue","Wed","Thu","Fri","Sat","Sun"]},"yAxis":{"type":"value"},"series":[{"data":[120,200,150,80,70,110,130],"type":"bar"}]}
\`\`\`
  `;
  return (
    <MDContain>
      <Markdown
        children={markdown}
        remarkPlugins={[remarkGfm]}
        components={{
          code(props) {
            const { children, className, node, ...rest } = props;
            const match = /language-(\w+)/.exec(className || '');
            if (!match) {
              return (
                <code {...rest} className={className}>
                  {children}
                </code>
              );
            }
            if (match[1] === 'echarts') {
              return <ChartsRende option={JSON.parse(children)}></ChartsRende>;
            }
            return (
              <SyntaxHighlighter
                {...rest}
                PreTag='div'
                children={String(children).replace(/\n$/, '')}
                language={match[1]}
                style={atomDark}
              />
            );
          }
        }}></Markdown>
    </MDContain>
  );
};
//style_components
const MDContain = styled.div`
  width: 100%;
  height: 100%;
`;
const ChartsRende: React.FC<{ option: echarts.EChartsOption }> = ({ option }) => {
  const chartRef = useRef<echarts.ECharts>();
  const domRef = useRef<HTMLElement>();
  useEffect(() => {
    chartRef.current = echarts.init(domRef.current);
    chartRef.current.setOption(option);
  }, [option]);

  return <div ref={domRef} style={{ height: 300 }} className='chart_contain'></div>;
};

这样就得出了在markdown中显示的Echarts

相关推荐
Smile_Gently1 小时前
前端:最简单封装nmp插件(组件)过程。
前端·javascript·vue.js·elementui·vue
luckycoke8 小时前
小程序立体轮播
前端·css·小程序
一 乐8 小时前
高校体育场管理系统系统|体育场管理系统小程序设计与实现(源码+数据库+文档)
前端·javascript·数据库·spring boot·高校体育馆系统
懒羊羊我小弟8 小时前
常用Webpack Loader汇总介绍
前端·webpack·node.js
祈澈菇凉8 小时前
ES6模块的异步加载是如何实现的?
前端·javascript·es6
我爱学习_zwj9 小时前
4.从零开始学会Vue--{{组件通信}}
前端·javascript·vue.js·笔记·前端框架
顾比魁9 小时前
XSS盲打:当攻击者“盲狙”管理员
前端·网络安全·xss
黑客老李9 小时前
新手小白如何挖掘cnvd通用漏洞之存储xss漏洞(利用xss钓鱼)
java·运维·服务器·前端·xss
晚风予星9 小时前
简记|LogicFlow自定义BPMN元素节点
前端
Json____9 小时前
使用html css js 开发一个 教育机构前端静态网站模板
前端·css·html·js·前端学习·企业站·教育机构网站