Cursor Style Example

ds-markdown supports displaying a cursor during typing animation to enhance visual effects.

Live Demo

⌨️ Cursor Style Demo

Demonstrates various cursor types: line, block, underline, circle, and custom cursor

Show Cursor

Cursor Type:

Basic Usage

import DsMarkdown from 'ds-markdown';
 
function App() {
  return (
    <DsMarkdown showCursor>
      This text will show the default cursor effect.
    </DsMarkdown>
  );
}

Built-in Cursor Styles

ds-markdown provides four built-in cursor styles:

Line Cursor (default)

<DsMarkdown showCursor cursor="line">
  Content...
</DsMarkdown>

Block Cursor

<DsMarkdown showCursor cursor="block">
  Content...
</DsMarkdown>

Underline Cursor

<DsMarkdown showCursor cursor="underline">
  Content...
</DsMarkdown>

Circle Cursor

<DsMarkdown showCursor cursor="circle">
  Content...
</DsMarkdown>

Custom Cursor

You can also pass a custom React element as the cursor:

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

Custom Cursor Examples

// Use special character
<DsMarkdown 
  showCursor 
  cursor={<span style={{ color: '#0070f3' }}>▊</span>}
>
  Content...
</DsMarkdown>
 
// Use emoji
<DsMarkdown 
  showCursor 
  cursor={<span style={{ fontSize: '1.2em' }}>❯</span>}
>
  Content...
</DsMarkdown>
 
// Custom cursor with animation
<DsMarkdown 
  showCursor 
  cursor={
    <span style={{ 
      color: '#6366f1',
      animation: 'blink 1s infinite'
    }}>
      |
    </span>
  }
>
  Content...
</DsMarkdown>

Usage in Code Blocks

The cursor will automatically adapt to code blocks, displaying at the end of the code content:

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

Complete Example

import DsMarkdown from 'ds-markdown';
 
function App() {
  return (
    <div>
      <h2>Line Cursor</h2>
      <DsMarkdown showCursor cursor="line">
        # Title
        This is an example using line cursor.
      </DsMarkdown>
 
      <h2>Block Cursor</h2>
      <DsMarkdown showCursor cursor="block">
        # Title
        This is an example using block cursor.
      </DsMarkdown>
 
      <h2>Custom Cursor</h2>
      <DsMarkdown 
        showCursor 
        cursor={<span style={{ color: '#0070f3' }}>▊</span>}
      >
        # Title
        This is an example using custom cursor.
      </DsMarkdown>
    </div>
  );
}

Property Description

Property	Type	Description	Default
`showCursor`	`boolean`	Whether to show cursor	`false`
`cursor`	`'line' \| 'block' \| 'underline' \| 'circle' \| React.ReactNode`	Cursor style or custom element	`'line'`

Typing Animation Custom Theme