style: search models style

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

@@ -0,0 +1,77 @@
+import hljs from 'highlight.js';
+import { memo, useMemo } from 'react';
+import CopyButton from '../copy-button';
+import './styles/light.less';
+import { escapeHtml } from './utils';
+
+interface CodeViewerProps {
+  code: string;
+  lang: string;
+  autodetect?: boolean;
+  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]);
+
+  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>
+  );
+};
+
+export default memo(CodeViewer);

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

@@ -1,7 +1,7 @@
 import hljs from 'highlight.js';
-import 'highlight.js/styles/atom-one-dark.css';
 import { memo, useMemo } from 'react';
 import CopyButton from '../copy-button';
+import './styles/dark.less';
 import { escapeHtml } from './utils';
 
 interface CodeViewerProps {
@@ -56,7 +56,7 @@ const CodeViewer: React.FC<CodeViewerProps> = (props) => {
   }, [code, lang, autodetect, ignoreIllegals]);
 
   return (
-    <pre className="code-pre">
+    <pre className="code-pre dark">
       <code
         className={highlightedCode.className}
         dangerouslySetInnerHTML={{

src/components/highlight-code/index.tsx

@@ -1,16 +1,22 @@
 import CodeViewer from './code-viewer';
-import './style.less';
+import CodeViewerLight from './code-viewer-light';
+import './styles/index.less';
 
 const HighlightCode: React.FC<{
   code: string;
   lang?: string;
   copyable?: boolean;
+  theme?: 'light' | 'dark';
 }> = (props) => {
-  const { code, lang = 'bash', copyable = true } = props;
+  const { code, lang = 'bash', copyable = true, theme = 'dark' } = props;
 
   return (
     <div className="high-light-wrapper">
-      <CodeViewer lang={lang} code={code} copyable={copyable} />
+      {theme === 'dark' ? (
+        <CodeViewer lang={lang} code={code} copyable={copyable} />
+      ) : (
+        <CodeViewerLight lang={lang} code={code} copyable={copyable} />
+      )}
     </div>
   );
 };

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

@@ -0,0 +1,106 @@
+// @ts-ingore
+pre code.hljs {
+  display: block;
+  overflow-x: auto;
+  padding: 1em;
+}
+
+code.hljs {
+  padding: 3px 5px;
+}
+
+/*
+
+Atom One Dark by Daniel Gamage
+Original One Dark Syntax theme from https://github.com/atom/one-dark-syntax
+
+base:    #282c34
+mono-1:  #abb2bf
+mono-2:  #818896
+mono-3:  #5c6370
+hue-1:   #56b6c2
+hue-2:   #61aeee
+hue-3:   #c678dd
+hue-4:   #98c379
+hue-5:   #e06c75
+hue-5-2: #be5046
+hue-6:   #d19a66
+hue-6-2: #e6c07b
+
+*/
+.code-pre.dark {
+  .hljs {
+    color: #abb2bf;
+    background: #282c34;
+  }
+
+  .hljs-comment,
+  .hljs-quote {
+    color: #5c6370;
+    font-style: italic;
+  }
+
+  .hljs-doctag,
+  .hljs-keyword,
+  .hljs-formula {
+    color: #c678dd;
+  }
+
+  .hljs-section,
+  .hljs-name,
+  .hljs-selector-tag,
+  .hljs-deletion,
+  .hljs-subst {
+    color: #e06c75;
+  }
+
+  .hljs-literal {
+    color: #56b6c2;
+  }
+
+  .hljs-string,
+  .hljs-regexp,
+  .hljs-addition,
+  .hljs-attribute,
+  .hljs-meta .hljs-string {
+    color: #98c379;
+  }
+
+  .hljs-attr,
+  .hljs-variable,
+  .hljs-template-variable,
+  .hljs-type,
+  .hljs-selector-class,
+  .hljs-selector-attr,
+  .hljs-selector-pseudo,
+  .hljs-number {
+    color: #d19a66;
+  }
+
+  .hljs-symbol,
+  .hljs-bullet,
+  .hljs-link,
+  .hljs-meta,
+  .hljs-selector-id,
+  .hljs-title {
+    color: #61aeee;
+  }
+
+  .hljs-built_in,
+  .hljs-title.class_,
+  .hljs-class .hljs-title {
+    color: #e6c07b;
+  }
+
+  .hljs-emphasis {
+    font-style: italic;
+  }
+
+  .hljs-strong {
+    font-weight: bold;
+  }
+
+  .hljs-link {
+    text-decoration: underline;
+  }
+}

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

@@ -27,7 +27,6 @@
   .code-pre {
     padding-inline: 12px 32px;
     position: relative;
-    background-color: #282c34;
     border-radius: var(--border-radius-mini);
 
     .copy-button {
@@ -35,5 +34,13 @@
       top: 6px;
       right: 6px;
     }
+
+    &.dark {
+      background-color: #282c34;
+    }
+
+    &.light {
+      background-color: rgb(250, 250, 250);
+    }
   }
 }

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

@@ -0,0 +1,106 @@
+// @ts-ingore
+pre code.hljs {
+  display: block;
+  overflow-x: auto;
+  padding: 1em;
+}
+
+code.hljs {
+  padding: 3px 5px;
+}
+
+/*
+
+Atom One Light by Daniel Gamage
+Original One Light Syntax theme from https://github.com/atom/one-light-syntax
+
+base:    #fafafa
+mono-1:  #383a42
+mono-2:  #686b77
+mono-3:  #a0a1a7
+hue-1:   #0184bb
+hue-2:   #4078f2
+hue-3:   #a626a4
+hue-4:   #50a14f
+hue-5:   #e45649
+hue-5-2: #c91243
+hue-6:   #986801
+hue-6-2: #c18401
+
+*/
+.code-pre.light {
+  .hljs {
+    color: #383a42;
+    background: #fafafa;
+  }
+
+  .hljs-comment,
+  .hljs-quote {
+    color: #a0a1a7;
+    font-style: italic;
+  }
+
+  .hljs-doctag,
+  .hljs-keyword,
+  .hljs-formula {
+    color: #a626a4;
+  }
+
+  .hljs-section,
+  .hljs-name,
+  .hljs-selector-tag,
+  .hljs-deletion,
+  .hljs-subst {
+    color: #e45649;
+  }
+
+  .hljs-literal {
+    color: #0184bb;
+  }
+
+  .hljs-string,
+  .hljs-regexp,
+  .hljs-addition,
+  .hljs-attribute,
+  .hljs-meta .hljs-string {
+    color: #50a14f;
+  }
+
+  .hljs-attr,
+  .hljs-variable,
+  .hljs-template-variable,
+  .hljs-type,
+  .hljs-selector-class,
+  .hljs-selector-attr,
+  .hljs-selector-pseudo,
+  .hljs-number {
+    color: #986801;
+  }
+
+  .hljs-symbol,
+  .hljs-bullet,
+  .hljs-link,
+  .hljs-meta,
+  .hljs-selector-id,
+  .hljs-title {
+    color: #4078f2;
+  }
+
+  .hljs-built_in,
+  .hljs-title.class_,
+  .hljs-class .hljs-title {
+    color: #c18401;
+  }
+
+  .hljs-emphasis {
+    font-style: italic;
+  }
+
+  .hljs-strong {
+    font-weight: bold;
+  }
+
+  .hljs-link {
+    text-decoration: underline;
+  }
+}