chore: images create

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

@@ -9,6 +9,7 @@ interface CodeViewerProps {
   ignoreIllegals?: boolean;
   copyable?: boolean;
   height?: string | number;
+  style?: React.CSSProperties;
 }
 const DarkViewer: React.FC<CodeViewerProps> = (props) => {
   const {
@@ -22,6 +23,7 @@ const DarkViewer: React.FC<CodeViewerProps> = (props) => {
 
   return (
     <CodeViewer
+      style={props.style}
       height={height}
       code={code}
       lang={lang}

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

@@ -9,6 +9,7 @@ interface CodeViewerProps {
   ignoreIllegals?: boolean;
   copyable?: boolean;
   height?: string | number;
+  style?: React.CSSProperties;
 }
 const LightViewer: React.FC<CodeViewerProps> = (props) => {
   const {
@@ -17,11 +18,13 @@ const LightViewer: React.FC<CodeViewerProps> = (props) => {
     autodetect,
     ignoreIllegals,
     copyable,
+    style,
     height = 'auto'
   } = props || {};
 
   return (
     <CodeViewer
+      style={style}
       height={height}
       code={code}
       lang={lang}

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

@@ -12,6 +12,7 @@ interface CodeViewerProps {
   copyable?: boolean;
   height?: string | number;
   theme?: 'light' | 'dark';
+  style?: React.CSSProperties;
 }
 const CodeViewer: React.FC<CodeViewerProps> = (props) => {
   const {
@@ -20,7 +21,8 @@ const CodeViewer: React.FC<CodeViewerProps> = (props) => {
     autodetect = true,
     ignoreIllegals = true,
     copyable = true,
-    height = 'auto'
+    height = 'auto',
+    style
   } = props || {};
 
   const highlightedCode = useMemo(() => {
@@ -69,7 +71,8 @@ const CodeViewer: React.FC<CodeViewerProps> = (props) => {
         }
       )}
       style={{
-        height: height
+        height: height,
+        ...style
       }}
     >
       <code

src/components/highlight-code/index.tsx

@@ -9,8 +9,10 @@ const HighlightCode: React.FC<{
   copyable?: boolean;
   theme?: 'light' | 'dark';
   height?: string | number;
+  style?: React.CSSProperties;
 }> = (props) => {
   const {
+    style,
     code,
     lang = 'bash',
     copyable = true,
@@ -26,9 +28,11 @@ const HighlightCode: React.FC<{
           code={code}
           copyable={copyable}
           height={height}
+          style={style}
         />
       ) : (
         <CodeViewerLight
+          style={style}
           lang={lang}
           code={code}
           copyable={copyable}