style: modify component style.

Author: jaywcjlove

core/README.md

@@ -29,7 +29,7 @@ const Demo = () => {
         <div>这里是示例展示</div>
       </Preview>
       <Toolbar>Code Example</Toolbar>
-      <Code>
+      <Code tagName="pre">
         {code}
       </Code>
     </CodeLayout>
@@ -57,7 +57,7 @@ const Demo = () => {
         <div>这里是示例展示</div>
       </Preview>
       <Toolbar>Code Example</Toolbar>
-      <Code>
+      <Code tagName="pre">
         {code}
       </Code>
     </CodeLayout>
@@ -84,7 +84,7 @@ const Demo = () => (
       <div>示例内容</div>
     </Preview>
     <Toolbar>Code Example</Toolbar>
-    <Code>
+    <Code tagName="pre">
       {code}
     </Code>
   </CodeLayout>
@@ -110,7 +110,7 @@ const Demo = () => (
       <div>示例内容</div>
     </Preview>
     <Toolbar>Code Example</Toolbar>
-    <Code>
+    <Code tagName="pre">
       {code}
     </Code>
   </CodeLayout>
@@ -137,7 +137,7 @@ const Demo = () => {
         <div>示例内容</div>
       </Preview>
       <Toolbar extra={<div>按钮</div>}>Code Example</Toolbar>
-      <Code>
+      <Code tagName="pre">
         {code}
       </Code>
     </CodeLayout>
@@ -170,7 +170,7 @@ const Demo = ()=> {
           <div>示例内容</div>
         </Preview>
         <Toolbar visible={visible} collapse={!visible}>Code Example</Toolbar>
-        <Code>
+        <Code tagName="pre">
           {code}
         </Code>
       </CodeLayout>
@@ -248,7 +248,7 @@ const Demo = () => (
     <Toolbar text={code} visibleButton={false} extra={extra}>
       Code Example
     </Toolbar>
-    <Code>{code}</Code>
+    <Code tagName="pre">{code}</Code>
   </CodeLayout>
 );
 export default Demo;
@@ -266,7 +266,7 @@ import CodeLayout from "react-code-preview-layout"
   <CodeLayout.Toolbar text={code} visibleButton={false} extra={extra}>
     Code Example
   </CodeLayout.Toolbar>
-  <CodeLayout.Code>{code}</CodeLayout.Code>
+  <CodeLayout.Code tagName="pre">{code}</CodeLayout.Code>
 </CodeLayout>
 ```
 

core/src/styles.css

@@ -15,6 +15,7 @@
 }
 .w-rcpl.w-bordered > .w-rcpl-code:not(.w-hidden) {
   border-top: 1px dashed var(--color-border-muted);
+  border-radius: 0 0 6px 6px;
 }
 
 .w-rcpl {
@@ -35,6 +36,7 @@
   overflow: auto;
   border-top-left-radius: 0px;
   border-top-right-radius: 0px;
+  margin-bottom: 0 !important;
 }
 .w-rcpl-code > * {
   padding: 0 !important;