feat(highlight): add highlight

Author: to0simple

devui/button/demo/button-demo.tsx

@@ -2,12 +2,14 @@ import { defineComponent } from 'vue'
 import CodeBox from '../../shared/devui-codebox/devui-codebox'
 import ButtonPrimary from './primary/primary'
 import ButtonCommon from './common/common'
+import PrimaryCode from './primary/primary.tsx?raw'
+import CommonCode from './common/common.tsx?raw'
 
 export default defineComponent({
   name: 'd-button-demo',
   setup() {
-    const primarySource: any[] = [];
-    const commonSource: any[] = [];
+    const primarySource: any[] = [{title: 'TSX', language: 'TSX', code: PrimaryCode}];
+    const commonSource: any[] = [{title: 'TSX', language: 'TSX', code: CommonCode}];
     return () => {
       return <div class="demo-container">
       <div class="demo-example">

devui/shared/devui-codebox/devui-codebox.tsx

@@ -86,7 +86,7 @@ export default defineComponent({
                             { !_copied.value ? <CopyIcon></CopyIcon> : <CopiedIcon></CopiedIcon>}
                           </span>
                         </div>
-                        <DevuiHighlight></DevuiHighlight>
+                        <DevuiHighlight code={item.code.default || item.code} language={item.language}></DevuiHighlight>
                       </div>
                     </DevuiTab>
                   )

devui/shared/devui-highlight/devui-highlight.tsx

@@ -3,10 +3,17 @@ import { defineComponent } from 'vue'
 export default defineComponent({
   name: 'd-highlight',
   props: {
+    code: String,
+    language: String
   },
   setup(props, ctx) {
     return () => {
-      return <div>devui-highlight</div>
+      return (
+        <pre class={`language-${props.language}`}>
+          {/* 暂做处理避免tsx语法被解析为html标签 */}
+          <code innerHTML={props.code?.replace(/(<)/g, '&lt;')}></code>
+        </pre>
+      )
     }
   }
 })