diff --git a/src/components/high-light/index.scss b/src/components/high-light/index.scss
new file mode 100644
index 0000000..fc4a514
--- /dev/null
+++ b/src/components/high-light/index.scss
@@ -0,0 +1,4 @@
+.highlight {
+  font-weight: bold;
+  background-color: unset;
+}
diff --git a/src/components/high-light/index.tsx b/src/components/high-light/index.tsx
index 4863566..15e2c83 100644
--- a/src/components/high-light/index.tsx
+++ b/src/components/high-light/index.tsx
@@ -1,11 +1,19 @@
-import React from 'react';
+import React, { memo } from 'react';
 
-export default function Highlight({
+import classnames from 'classnames';
+
+import './index.scss';
+
+function Highlight({
   children,
-  keys
+  keys,
+  color = '#FFDA00',
+  className
 }: {
   children: React.ReactNode;
   keys: string[];
+  color?: string;
+  className?: string;
 }) {
   const string = React.Children.toArray(children).join('');
   const reg = new RegExp(keys.join('|'), 'g');
@@ -14,7 +22,7 @@ export default function Highlight({
     index % 2 === 0 ? (
       x
     ) : (
-      <mark key={index} className="highlight">
+      <mark key={index} className={classnames('highlight', className)} style={{ color }}>
         {x[0] === '@' ? x.slice(1) : x}
       </mark>
     )
@@ -22,3 +30,5 @@ export default function Highlight({
 
   return <>{elements}</>;
 }
+
+export default memo(Highlight);