hightlight.js 高亮 return 返回的语句失效问题解决

1. 先上结论，要注册xml才能解决

import xml from 'highlight.js/lib/languages/xml';
highlight.registerLanguage('xml', xml);

2. 原始代码，return后面的语句没有高亮

import React, { useState } from 'react';
import highlight from 'highlight.js/lib/core';
import javascript from 'highlight.js/lib/languages/javascript';
import 'highlight.js/styles/atom-one-dark.min.css';

highlight.registerLanguage('javascript', javascript);

export const CodeDrawer = (props: any, ref) => {
  const [content, setContent] = useState('');

  useEffect(()=>{
	setContent(
        highlight.highlight('return <div>111</div>', { language: 'javascript' }).value
      );
  },[])

  return (
  	<pre dangerouslySetInnerHTML={{ __html: content }}></pre>
  );
};

3. 效果图（div没有高亮）

4. 找了很久原来是xml没有注册，要额外注册xml

import xml from 'highlight.js/lib/languages/xml';
highlight.registerLanguage('xml', xml);

5. 效果图（div有高亮）