feat: markdownrender support simple code

content/plus/markdownrender/index-en-US.md

@@ -102,6 +102,7 @@ Basic element tag support that can be overridden `a blockquote br code em h1 h2
 ### Add custom components
 
 By passing in custom components to `components` Props, you can write JSX directly in Markdown, and the component will be rendered to the final page, supporting JS events.
+The default Markdown components can be obtained from `MarkdownRender.defaultComponents` and can be used for secondary packaging.
 
 <Notice type="primary" title="Note">
    <div>Try to ensure that the JSX code in the rendered Markdown is trustworthy to prevent XSS. </div>
@@ -126,8 +127,8 @@ function Demo() {
 <MyButton onClick={()=>alert("MyButton is clicked")}>MyButton click me</MyButton>
 
 Just write JSX directly in Markdown
-        `} 
-        components={components} />
+        `}
+        components={{...MarkdownRender.defaultComponents,...components}} />
 }
 
 

content/plus/markdownrender/index.md

@@ -142,6 +142,7 @@ function Demo() {
 ### 添加自定义组件
 
 通过传入自定义组件到 `components` Props，能够实现在 Markdown 中直接书写 JSX，组件会被渲染到最终页面上，支持 JS 事件。
+默认的 Markdown 组件可从 `MarkdownRender.defaultComponents` 中获取，可以用于二次封装。
 
 <Notice type="primary" title="注意事项">
   <div>注意尽量确保被渲染的 Markdown 内 JSX 代码可信，防止 XSS。</div>
@@ -165,7 +166,7 @@ function Demo() {
 
 直接在 Markdown 中书写 JSX 即可
         `}
-        components={components}
+        components={{...MarkdownRender.defaultComponents,...components}}
         />
 }
 

packages/semi-foundation/markdownRender/markdownRender.scss

@@ -4,6 +4,11 @@ $module: #{$prefix}-markdownRender;
 
 .#{$module} {
 
+    &-simple-code{
+        background: $color-markdownRender_simpleCode-bg;
+        color:$color-markdownRender_simpleCode-text;
+    }
+
     ul, li {
         color: $color-markdownRender_component_list
     }

packages/semi-foundation/markdownRender/variables.scss

@@ -10,6 +10,7 @@ $spacing-markdownRender_component_image_alt-marginTop: 8px;
 $spacing-markdownRender_component_header-marginTop: 16px;
 $spacing-markdownRender_component_header-marginBottom: 16px;
 
-
+$color-markdownRender_simpleCode-bg: var(--semi-color-fill-0);
+$color-markdownRender_simpleCode-text: var(--semi-color-text-1);
 $color-markdownRender_component_list: var(--semi-color-text-0);
 $color-markdownRender_component_image_alt: var(--semi-color-tertiary);

packages/semi-ui/markdownRender/components/code.tsx

@@ -2,10 +2,19 @@ import * as React from 'react';
 import { PropsWithChildren } from 'react';
 import CodeHighlight from "../../codeHighlight";
 import { nth } from 'lodash';
+import { cssClasses } from "@douyinfe/semi-foundation/markdownRender/constants";
 
 const pre = (props: PropsWithChildren<{ className: string }>) => {
-    return <CodeHighlight code={props.children as string}
-        language={nth(props.className?.split("-") ?? "javascript", -1)} lineNumber={true}/>;
+    const language = nth(props.className?.split("-"), -1);
+    if (language) {
+        return <CodeHighlight code={props.children as string}
+            language={language} lineNumber={true}/>;
+    } else {
+        return <span className={`${cssClasses.PREFIX}-simple-code`}>
+            {props.children}
+        </span>;
+    }
+
 };
 
 export default pre;

packages/semi-ui/markdownRender/index.tsx

@@ -65,6 +65,8 @@ class MarkdownRender extends BaseComponent<MarkdownRenderProps, MarkdownRenderSt
             <ComponentConstructor components={{ ...SemiMarkdownComponents, ...this.props.components }} />
         </div>;
     }
+
+    static defaultComponents = SemiMarkdownComponents;
 }