Highlight code

Author: Folyd

docs/guide/index.md

@@ -1 +1,19 @@
-# AIScript
+# AIScript
+
+```rust
+// Define a function that takes a prompt and returns a response
+fn generate_response(prompt: string) -> string {
+    // Call the AI model to generate a response
+    let response = ai.generate({
+        model: "gpt-4",
+        prompt: prompt,
+        max_tokens: 100
+    });
+    
+    return response;
+}
+
+// Example usage
+let result = generate_response("Tell me a joke");
+print(result);
+```

docs/public/rspress-dark-logo.png

@@ -11,6 +11,7 @@
     "preview": "rspress preview"
   },
   "dependencies": {
+    "react-syntax-highlighter": "^15.6.1"
   },
   "devDependencies": {
     "@biomejs/biome": "^1.9.4",

docs/public/rspress-icon.png

@@ -1,10 +1,27 @@
 import { BackgroundImage } from '../background-image';
 import { Hero } from '../hero';
+import CodeDemo from '../code-demo';
 import styles from './index.module.scss';
 
 import { useCallback } from 'react';
 import { useNavigate } from 'rspress/runtime';
 
+const demoCode = `// Define a function that takes a prompt and returns a response
+fn generate_response(prompt: string) -> string {
+    // Call the AI model to generate a response
+    let response = ai.generate({
+        model: "gpt-4",
+        prompt: prompt,
+        max_tokens: 100
+    });
+    
+    return response;
+}
+
+// Example usage
+let result = generate_response("Tell me a joke");
+print(result);`;
+
 const LandingPage = () => {
     const navigate = useNavigate();
     const onClickGetStarted = useCallback(() => {
@@ -16,12 +33,12 @@ const LandingPage = () => {
             <BackgroundImage />
             <Hero
                 showStars
-                // title="AIScript"
                 subTitle="The next generation language for human and AI."
                 getStartedButtonText='getStarted'
                 githubURL="https://github.com/aiscriptdev/aiscript"
                 onClickGetStarted={onClickGetStarted}
             />
+            <CodeDemo code={demoCode} filename='main.ai' />
         </div>
     );
 };

docs/public/rspress-light-logo.png

@@ -0,0 +1,45 @@
+.codeDemo {
+  margin: 2rem auto;
+  max-width: 800px;
+  padding: 1rem;
+}
+
+.filename {
+  font-family: 'Fira Code', monospace;
+  font-size: 0.9rem;
+  color: #d4d4d4;
+  background-color: #1e1e1e;
+  padding: 0.5rem 1rem;
+  border-top-left-radius: 8px;
+  border-top-right-radius: 8px;
+  border-bottom: 1px solid #333;
+  opacity: 0.8;
+}
+
+.codeContainer {
+  background-color: #1e1e1e;
+  border-radius: 8px;
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
+  overflow: auto;
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+
+  &:has(+ .filename) {
+    border-top-left-radius: 0;
+    border-top-right-radius: 0;
+  }
+}
+
+.pre {
+  margin: 0;
+  padding: 1.5rem;
+}
+
+.code {
+  font-family: 'Fira Code', monospace;
+  font-size: 0.9rem;
+  line-height: 1.5;
+  color: #d4d4d4;
+  display: block;
+  white-space: pre;
+}