feat: Add code highlight.

package.json

@@ -17,10 +17,12 @@
     "@uiw/copy-to-clipboard": "1.0.11",
     "react": "17.0.2",
     "react-color": "2.19.3",
-    "react-dom": "17.0.2"
+    "react-dom": "17.0.2",
+    "prismjs": "1.23.0"
   },
   "devDependencies": {
     "@kkt/less-modules": "6.9.0",
+    "@types/prismjs": "1.16.5",
     "@types/react": "17.0.3",
     "@types/react-color": "3.0.4",
     "@types/react-dom": "17.0.3",

src/app/App.tsx

@@ -27,12 +27,12 @@ export default function App() {
           </div>
         </div>
         <div className={styles.code}>
-          <Code lang="SwiftUI" code={`Color(red: ${color.r / 100}, green: ${color.g / 100}, blue: ${color.b / 100}).opacity(${color.a})`} />
-          <Code lang="Swift for iOS" code={`UIColor(red: ${color.r / 100}, green: ${color.g / 100}, blue: ${color.b / 100}, alpha: ${color.a})`} />
-          <Code lang="Swift for macOS" code={`NSColor(red: ${color.r / 100}, green: ${color.g / 100}, blue: ${color.b / 100}, alpha: ${color.a})`} />
-          <Code lang="Objective-C for iOS" code={`[UIColor colorWithRed: ${color.r / 100} green: ${color.g / 100} blue: ${color.b / 100} alpha: ${color.a}];`} />
-          <Code lang="Objective-C for macOS" code={`[NSColor colorWithCalibratedRed: ${color.r / 100} green: ${color.g / 100} blue: ${color.b / 100} alpha: ${color.a}];`} />
-          <Code lang="Xamarin (C#)" code={`new UIColor(red: ${color.r / 100}f, green: ${color.g / 100}f, blue: ${color.b / 100}f, alpha: ${color.a}f)`} />
+          <Code lang="swift" title="SwiftUI" code={`Color(red: ${color.r / 100}, green: ${color.g / 100}, blue: ${color.b / 100}).opacity(${color.a})`} />
+          <Code lang="swift" title="Swift for iOS" code={`UIColor(red: ${color.r / 100}, green: ${color.g / 100}, blue: ${color.b / 100}, alpha: ${color.a})`} />
+          <Code lang="swift" title="Swift for macOS" code={`NSColor(red: ${color.r / 100}, green: ${color.g / 100}, blue: ${color.b / 100}, alpha: ${color.a})`} />
+          <Code lang="objectivec" title="Objective-C for iOS" code={`[UIColor colorWithRed: ${color.r / 100} green: ${color.g / 100} blue: ${color.b / 100} alpha: ${color.a}];`} />
+          <Code lang="objectivec" title="Objective-C for macOS" code={`[NSColor colorWithCalibratedRed: ${color.r / 100} green: ${color.g / 100} blue: ${color.b / 100} alpha: ${color.a}];`} />
+          <Code lang="csharp" title="Xamarin (C#)" code={`new UIColor(red: ${color.r / 100}f, green: ${color.g / 100}f, blue: ${color.b / 100}f, alpha: ${color.a}f)`} />
         </div>
       </div>
     </div>

src/app/Code.module.css

@@ -10,9 +10,13 @@
 }
 
 .code {
-  padding: 10px;
-  border-radius: 4px;
   background-color: #eaeaea;
+  word-break: break-all;
+  white-space: initial;
+  padding: 14px;
+  padding: 8px;
+  margin: 0;
+  border-radius: 3px;
 }
 
 .tool {

src/app/Code.tsx

@@ -1,15 +1,23 @@
 import copyTextToClipboard from '@uiw/copy-to-clipboard';
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
+import Prism from 'prismjs';
+import 'prismjs/components/prism-csharp';
+import 'prismjs/components/prism-swift';
+import 'prismjs/components/prism-c';
+import 'prismjs/components/prism-objectivec';
 import styles from './Code.module.css';
+import './prism.css';
 
 type CodeProps = {
+  title: string;
   lang: string;
   code: string;
 }
 
 export default function Code(props: CodeProps) {
-  const { lang, code } = props || {}
+  const { title, lang, code } = props || {}
   const [isCopy, setIsCopy] = useState(false)
+  const [html, setHtml] = useState('')
   function copyHandle() {
     setIsCopy(true)
     copyTextToClipboard(code || '', (isCopy) => {
@@ -19,15 +27,26 @@ export default function Code(props: CodeProps) {
       }, 1000)
     });
   }
+  useEffect(() => {
+    let html = ''
+    if (lang == 'swift') {
+      html = Prism.highlight(code, Prism.languages.swift, 'swift');
+    } else if (lang == 'csharp') {
+      html = Prism.highlight(code, Prism.languages.csharp, 'csharp');
+    } else if (lang == 'objectivec') {
+      html = Prism.highlight(code, Prism.languages.objectivec, 'objectivec');
+    }
+    setHtml(html)
+  }, [code])
   return (
     <div className={styles.warpper}>
       <div className={styles.tool}>
-        <div className={styles.title}>{lang}</div>
+        <div className={styles.title}>{title}</div>
         <div className={`${styles.copy} ${isCopy ? styles.copied: ''}`} onClick={copyHandle}>Copy</div>
       </div>
-      <div className={styles.code}>
-        {code}
-      </div>
+      <pre className={styles.code}>
+        <code className={`language-${lang}`} dangerouslySetInnerHTML={{ __html: html}} />
+      </pre>
     </div>
   )
 }

src/app/prism.css

@@ -0,0 +1,30 @@
+.function {
+  color: #D64A85;
+  font-weight: bold;
+}
+
+.number {
+  color: #0041ff;
+}
+
+.keyword {
+  color: #0036d4;
+  font-weight: bold;
+}
+
+.class-name {
+  font-weight: bold;
+}
+
+.punctuation {
+  color: #adadad;
+}
+
+.named-parameter {
+  color: #D64A85;
+}
+
+code[class*="language-"],
+pre[class*="language-"] {
+	color: #2b2982;
+}