feat: add background props.

Author: jaywcjlove

core/README.md

@@ -71,6 +71,25 @@ const Demo = () => (
 export default Demo;
 ```
 
+## Preview Background Color
+
+```jsx  mdx:preview
+import React from "react"
+import CodeLayout from "react-code-preview-layout"
+const code = `import React from "react";\nimport { Button } from "uiw";\nconst Demo = ()=>{\n  return<div><Button>按钮</Button></div>\n};\nexport default Demo;`
+const Demo = () => (
+  <CodeLayout
+    code={<code>{code}</code>}
+    text={code}
+    bordered={false}
+    background="#009688b0"
+  >
+    <div>示例内容</div>
+  </CodeLayout>
+);
+export default Demo;
+```
+
 ## 自定义操作按钮
 
 ```jsx mdx:preview?title=自定义操作按钮
@@ -183,9 +202,11 @@ interface CodeLayoutProps extends React.DetailedHTMLProps<React.HTMLAttributes<H
   toolbar?: React.ReactNode;
   /** 额外内容，展示 toolbar 右侧内容 */
   toolbarExtra?: React.ReactNode;
-  disableTollbar?: boolean;
+  disableToolbar?: boolean;
   disableCode?: boolean;
   disablePreview?: boolean;
+  /** 禁用方格背景 */
+  disableCheckered?: boolean;
   /**
    * 是否需要边框
    * @default true

core/src/index.tsx

@@ -5,10 +5,10 @@ import './styles.css';
 
 export interface CodeLayoutProps extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement> {
   prefixCls?: string;
-  /** 原始 代码块 渲染**/
+  /** 原始 代码块 渲染 **/
   code?: React.ReactNode;
   text?: string;
-  /** 标题部分，也可以放置按钮 **/
+  /** Title section, you can also place buttons **/
   toolbar?: React.ReactNode;
   /** 额外内容，展示 toolbar 右侧内容 */
   toolbarExtra?: React.ReactNode;
@@ -17,6 +17,8 @@ export interface CodeLayoutProps extends React.DetailedHTMLProps<React.HTMLAttri
   disablePreview?: boolean;
   /** 禁用方格背景 */
   disableCheckered?: boolean;
+  /** Configure the preview background color. */
+  background?: string;
   /**
    * 是否需要边框
    * @default true
@@ -43,6 +45,7 @@ const CodeLayout = forwardRef<HTMLDivElement, CodeLayoutProps>((props, ref) => {
     disableCode = false,
     disableToolbar = false,
     text = '',
+    background = '',
     copied = true,
     toolbarExtra,
     code,
@@ -55,9 +58,19 @@ const CodeLayout = forwardRef<HTMLDivElement, CodeLayoutProps>((props, ref) => {
     .join(' ')
     .trim();
 
+  const style: React.CSSProperties = !background
+    ? {}
+    : {
+        backgroundColor: background,
+        backgroundImage: 'none',
+      };
   return (
     <div ref={ref} {...other} className={cls}>
-      {!disablePreview && <div className={`${prefixCls}-preview`}>{children}</div>}
+      {!disablePreview && (
+        <div className={`${prefixCls}-preview`} style={style}>
+          {children}
+        </div>
+      )}
       {!disableToolbar && (
         <div className={`${prefixCls}-toolbar`}>
           <div className={`${prefixCls}-title`}>{toolbar}</div>

core/src/styles.css

@@ -21,6 +21,9 @@
   border-radius: 5px;
   background-color: var(--color-canvas-subtle);
 }
+.w-rcpl-preview {
+  border-radius: 5px 5px 0 0;
+}
 .w-rcpl-code.w-hidden {
   height: 0;
   padding: 0;