如何在网站中为指定代码段实现打字机加载效果？

问题分析 #

你当前的代码未正确加载目标C#代码，且打字速度设置过慢（1毫秒几乎瞬间完成），同时未保留代码的换行、缩进格式，导致展示效果不符合预期。

解决方案 #

以下是调整后的代码，可实现逐字打出指定C#代码并完整保留格式的效果：

'use client';
import { Code, Box } from '@chakra-ui/react';
import Typewriter from "typewriter-effect";

// 用模板字符串存储目标C#代码，直接保留原始格式
const targetCSharpCode = `using System;

class Program
{
    static void Main()
    {
        Console.WriteLine("Hello, World!");
    }
}`;

export default function AnimatedCodeBlock() {
    return (
        <Box p={4} bg="gray.800" borderRadius="md" minH="180px">
            <Code 
                color="white" 
                fontFamily="monospace"
                whiteSpace="pre-wrap"
            >
                <Typewriter
                    options={{
                        delay: 30,
                        autoStart: true,
                        loop: false,
                        deleteSpeed: Infinity,
                        strings: [targetCSharpCode]
                    }}
                />
            </Code>
        </Box>
    );
}

关键调整说明 #

• 格式保留：使用ES6模板字符串包裹C#代码，直接保留原始的换行、缩进结构，无需手动转义字符。
• 速度优化：将delay从1改为30，让打字节奏更贴近真实输入效果。
• 样式适配：外层Box组件设置深色背景和内边距，配合Code组件的whiteSpace: "pre-wrap"属性，确保代码格式正确渲染。
• 行为控制：关闭loop避免重复打字，设置deleteSpeed: Infinity防止已打出的代码被删除。

内容的提问来源于stack exchange，提问作者Slown4128