style: model file list

src/components/highlight-code/code-viewer-dark.tsx

@@ -0,0 +1,27 @@
+import { memo } from 'react';
+import CodeViewer from './code-viewer';
+import './styles/dark.less';
+
+interface CodeViewerProps {
+  code: string;
+  lang: string;
+  autodetect?: boolean;
+  ignoreIllegals?: boolean;
+  copyable?: boolean;
+}
+const DarkViewer: React.FC<CodeViewerProps> = (props) => {
+  const { code, lang, autodetect, ignoreIllegals, copyable } = props || {};
+
+  return (
+    <CodeViewer
+      code={code}
+      lang={lang}
+      theme="dark"
+      autodetect={autodetect}
+      ignoreIllegals={ignoreIllegals}
+      copyable={copyable}
+    ></CodeViewer>
+  );
+};
+
+export default memo(DarkViewer);

src/components/highlight-code/code-viewer-light.tsx

@@ -1,8 +1,6 @@
-import hljs from 'highlight.js';
-import { memo, useMemo } from 'react';
-import CopyButton from '../copy-button';
+import { memo } from 'react';
+import CodeViewer from './code-viewer';
 import './styles/light.less';
-import { escapeHtml } from './utils';
 
 interface CodeViewerProps {
   code: string;
@@ -11,67 +9,19 @@ interface CodeViewerProps {
   ignoreIllegals?: boolean;
   copyable?: boolean;
 }
-const CodeViewer: React.FC<CodeViewerProps> = (props) => {
-  const {
-    code,
-    lang,
-    autodetect = true,
-    ignoreIllegals = true,
-    copyable = true
-  } = props || {};
-
-  const highlightedCode = useMemo(() => {
-    const autodetectLang = autodetect && !lang;
-    const cannotDetectLanguage = !autodetectLang && !hljs.getLanguage(lang);
-    let className = '';
-
-    if (!cannotDetectLanguage) {
-      className = `hljs ${lang}`;
-    }
-
-    // No idea what language to use, return raw code
-    if (cannotDetectLanguage) {
-      console.warn(`The language "${lang}" you specified could not be found.`);
-      return {
-        value: escapeHtml(code),
-        className: className
-      };
-    }
-
-    if (autodetectLang) {
-      const result = hljs.highlightAuto(code);
-      return {
-        value: result.value,
-        className: className
-      };
-    }
-    const result = hljs.highlight(code, {
-      language: lang,
-      ignoreIllegals: ignoreIllegals
-    });
-    return {
-      value: result.value,
-      className: className
-    };
-  }, [code, lang, autodetect, ignoreIllegals]);
+const LightViewer: React.FC<CodeViewerProps> = (props) => {
+  const { code, lang, autodetect, ignoreIllegals, copyable } = props || {};
 
   return (
-    <pre className="code-pre light">
-      <code
-        className={highlightedCode.className}
-        dangerouslySetInnerHTML={{
-          __html: highlightedCode.value
-        }}
-      ></code>
-      {copyable && (
-        <CopyButton
-          text={code}
-          size="small"
-          style={{ color: '#abb2bf' }}
-        ></CopyButton>
-      )}
-    </pre>
+    <CodeViewer
+      code={code}
+      lang={lang}
+      theme="light"
+      autodetect={autodetect}
+      ignoreIllegals={ignoreIllegals}
+      copyable={copyable}
+    ></CodeViewer>
   );
 };
 
-export default memo(CodeViewer);
+export default memo(LightViewer);

src/components/highlight-code/code-viewer.tsx

@@ -1,7 +1,7 @@
+import classNames from 'classnames';
 import hljs from 'highlight.js';
 import { memo, useMemo } from 'react';
 import CopyButton from '../copy-button';
-import './styles/dark.less';
 import { escapeHtml } from './utils';
 
 interface CodeViewerProps {
@@ -10,6 +10,7 @@ interface CodeViewerProps {
   autodetect?: boolean;
   ignoreIllegals?: boolean;
   copyable?: boolean;
+  theme?: 'light' | 'dark';
 }
 const CodeViewer: React.FC<CodeViewerProps> = (props) => {
   const {
@@ -56,7 +57,13 @@ const CodeViewer: React.FC<CodeViewerProps> = (props) => {
   }, [code, lang, autodetect, ignoreIllegals]);
 
   return (
-    <pre className="code-pre dark">
+    <pre
+      className={classNames('code-pre', {
+        dark: props.theme === 'dark',
+        light: props.theme === 'light',
+        copyable: copyable
+      })}
+    >
       <code
         className={highlightedCode.className}
         dangerouslySetInnerHTML={{

src/components/highlight-code/index.tsx

@@ -1,4 +1,4 @@
-import CodeViewer from './code-viewer';
+import CodeViewerDark from './code-viewer-dark';
 import CodeViewerLight from './code-viewer-light';
 import './styles/index.less';
 
@@ -13,7 +13,7 @@ const HighlightCode: React.FC<{
   return (
     <div className="high-light-wrapper">
       {theme === 'dark' ? (
-        <CodeViewer lang={lang} code={code} copyable={copyable} />
+        <CodeViewerDark lang={lang} code={code} copyable={copyable} />
       ) : (
         <CodeViewerLight lang={lang} code={code} copyable={copyable} />
       )}

src/components/highlight-code/styles/index.less

@@ -25,10 +25,14 @@
   }
 
   .code-pre {
-    padding-inline: 12px 32px;
+    padding-inline: 12px 12px;
     position: relative;
     border-radius: var(--border-radius-mini);
 
+    &.copyable {
+      padding-inline: 12px 32px;
+    }
+
     .copy-button {
       position: absolute;
       top: 6px;