打字光标

ds-markdown 支持在打字动画过程中显示光标，增强视觉效果。

基本用法

import DsMarkdown from 'ds-markdown';
 
function App() {
  return (
    <DsMarkdown showCursor>
      这段文字会显示默认的光标效果。
    </DsMarkdown>
  );
}

内置光标样式

ds-markdown 提供了四种内置光标样式：

竖线光标（默认）

<DsMarkdown showCursor cursor="line">
  内容...
</DsMarkdown>

实心块光标

<DsMarkdown showCursor cursor="block">
  内容...
</DsMarkdown>

下划线光标

<DsMarkdown showCursor cursor="underline">
  内容...
</DsMarkdown>

圆点光标

<DsMarkdown showCursor cursor="circle">
  内容...
</DsMarkdown>

自定义光标

你也可以传入自定义的 React 元素作为光标：

<DsMarkdown 
  showCursor 
  cursor={<span style={{ color: 'red', fontSize: '20px' }}>|</span>}
>
  内容...
</DsMarkdown>

在代码块中使用

光标会自动适配代码块，显示在代码内容的末尾：

<DsMarkdown showCursor cursor="block">
  \`\`\`javascript
  function hello() {
    console.log('Hello');
  }
  \`\`\`
</DsMarkdown>

完整示例

import DsMarkdown from 'ds-markdown';
 
function App() {
  return (
    <div>
      <h2>竖线光标</h2>
      <DsMarkdown showCursor cursor="line">
        # 标题
        这是使用竖线光标的示例。
      </DsMarkdown>
 
      <h2>实心块光标</h2>
      <DsMarkdown showCursor cursor="block">
        # 标题
        这是使用实心块光标的示例。
      </DsMarkdown>
 
      <h2>自定义光标</h2>
      <DsMarkdown 
        showCursor 
        cursor={<span style={{ color: '#0070f3' }}>▊</span>}
      >
        # 标题
        这是使用自定义光标的示例。
      </DsMarkdown>
    </div>
  );
}

基础用法核心特性