Umi中使用Prismjs，自定义复制工具栏

用Prismjs是因为以前博客用的这个做的代码高亮，现在Java转的React开发，对于React这块使用还不太熟，主要是用于抛砖引玉，希望大家指点下Umi这块的使用。

1. 安装Prismjs

yarn add prismjs

2. 安装Clipboard（复制版）

Prismjs有复制板功能，但是显示的英文（copy级copied），看了下下面的源码，以及在掘金上找了相关的复制功能的资料，使用这个来写juejin.cn/post/684490…

yarn add clipboard

3.Umi下使用less引入相关css

建立index.less引入相关样式

@import url("https://cdn.bootcdn.net/ajax/libs/prism/9000.0.1/themes/prism.min.css");
@import url("https://cdn.bootcdn.net/ajax/libs/prism-themes/1.9.0/prism-a11y-dark.min.css");

这里使用了import的方式，本来想在umi中找到index.html中来加入cdn的，找了相关资料（放弃了，以后再优化），这里使用import会有问题，css会全局使用。, 在index.html跟这里面使用都不是一个好的方案。

4.建立组件引入Prismjs

import { useEffect } from "react";
import "./index.less"; // 引入开始less

import Prism from "prismjs";
// 自定义功能需要使用boolbar
import "prismjs/plugins/toolbar/prism-toolbar";
// 这里引入的是需要支持的语言js start
import "prismjs/components/prism-css";
import "prismjs/components/prism-javascript";
import "prismjs/components/prism-java";
import "prismjs/components/prism-markup";
import "prismjs/components/prism-typescript";
import "prismjs/components/prism-sass";
import "prismjs/components/prism-scss";
// 这里引入的是需要支持的语言js end

const copy_name = "点击复制";

/**
 * 重置复制按钮名称
 * @param element
 */
const resetText = (element: Element) => {
  setTimeout(function () {
    element.textContent = copy_name;
  }, 5000);
};

/**
 * 注册复制按钮
 * @param element
 * @param text
 */
const registerClipboard = (element: Element, text: string) => {
  const clip = new Clipboard(element, {
    text: function () {
      return text;
    },
  });
  clip.on("success", function () {
    element.textContent = "复制成功!";
    resetText(element);
  });
  clip.on("error", function () {
    element.textContent = "按Ctrl+C复制";
    resetText(element);
  });
};

/**
 * 文章内容组件
 * @param param0
 * @returns
 */
const Art: React.FC<> = () => {
  // 这里是模拟html 可以通过组件值传入
  const html = `<p><br></p><pre><code class="language-java">System.out.println("hello world")</code></pre><p><br></p>
    <p><br></p><pre><code class="language-java">System.out.println("hello world")</code></pre><p><br></p>
    <p><br></p><pre><code class="language-java">System.out.println("hello world")</code></pre><p><br></p>`; 
  
  // 使用Prismjs进行高亮
  useEffect(() => {
    Prism.highlightAll();
  }, []);

  return <div dangerouslySetInnerHTML={{ __html: html }}></div>;
};

export default Art;

组件使用就不说了，效果图如下