站点设计风格排版测试

代码块

代码块测试

import React, { useState } from 'react'

// 类型定义
  interface Todo {    id: number    text: string    completed: boolean  }
// 组件
const TodoList: React.FC = () => {
  const [todos, setTodos] = useState<Todo[]>([])  const [todos, setTodos] = useState<{ id: number, text: string, completed: boolean }[]>([])
  const [input, setInput] = useState('')

  const addTodo = () => {
    if (input.trim()) {
      setTodos([...todos, { id: Date.now(), text: input, completed: false }])
      setInput('')
    }
  }

  return <Components />
}

export default TodoList

使用方法

Diff add: console.log('hello') !code ++
Diff remove: console.log('hello') !code --
Highlight: {1-3} 表示高亮 1-3行

自定义 MDC 组件

你一个小时没回我的消息，在我孜孜不倦地骚扰下你终于舍得回我了“在做爱”，这其中一定有什么含义，我想了很久，“在做爱”这简简单单的三个字肯定是三句话，分别是我在忙、做你女朋友、我爱你，想到这里我不禁流下了眼泪，我这么长时间的喜欢没有白费，不知道你现在忙干嘛，但我很想你。

今天把你的备注改成了「对方正在输入...」，这样我就知道你不是不想回我，刚又给你发了消息，看到你在思考怎么回我，我就知道你和我一样，心里有我。

昨天给你发了99条约你一起植树的消息，今天你终于肯回我了，你说“你先去植发吧，死秃子。” 我一下子就哭了，原来努力真的有用，你已经开始关心我了，你也是挺喜欢我的吧。

今天他终于约我出去吃饭了，好开心，到了火锅店我发现，他正和另一个女孩子坐一起，他想得真周到，叫上其他人不会容易冷场，我走过去发现他们好像已经吃完了，他说你别吃了去买一下单，他真贴心，知道我最近减肥不能吃太多。我更爱他了！

今早你又拉黑了我的，我很难过，还好我还有小号可以继续舔你，你没想到吧，你总得意的觉得自己有很多舔狗，不少我一个，但其实都只是我一个人而已。

横向滚动