Markdown Editor

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

<!-- Markdown Editor - Simple -->
<div>
  <label class="block text-sm font-medium text-gray-700 mb-1">Description (Markdown)</label>
  <textarea rows="4" placeholder="Write your content here using **Markdown**..." class="w-full px-4 py-3 bg-white border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors font-mono text-sm resize-none"></textarea>
</div>

<!-- Markdown Editor - With Toolbar -->
<div class="mt-4">
  <label class="block text-sm font-medium text-gray-700 mb-1">Content</label>
  <div class="border border-gray-300 rounded-lg overflow-hidden focus-within:ring-2 focus-within:ring-blue-500 focus-within:border-blue-500">
    <div class="flex items-center gap-1 p-2 bg-gray-50 border-b border-gray-300">
      <button class="p-2 text-gray-600 hover:bg-gray-200 rounded transition-colors font-bold text-sm">B</button>
      <button class="p-2 text-gray-600 hover:bg-gray-200 rounded transition-colors italic text-sm">I</button>
      <button class="p-2 text-gray-600 hover:bg-gray-200 rounded transition-colors text-sm">H</button>
      <div class="w-px h-5 bg-gray-300 mx-1"></div>
      <button class="p-2 text-gray-600 hover:bg-gray-200 rounded transition-colors text-sm">🔗</button>
      <button class="p-2 text-gray-600 hover:bg-gray-200 rounded transition-colors text-sm">&lt;/&gt;</button>
    </div>
    <textarea rows="5" placeholder="# Heading&#10;&#10;Write your **markdown** content here..." class="w-full px-4 py-3 bg-white focus:outline-none font-mono text-sm resize-none"></textarea>
  </div>
  <p class="mt-2 text-xs text-gray-500">Supports Markdown formatting</p>
</div>

<!-- Markdown Editor - Dark -->
<div class="mt-4 p-4 bg-slate-900 rounded-xl">
  <label class="block text-sm font-medium text-gray-300 mb-1">README.md</label>
  <textarea rows="4" placeholder="# My Project&#10;&#10;Description here..." class="w-full px-4 py-3 bg-slate-800 border border-slate-700 rounded-lg text-gray-100 placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-blue-400 font-mono text-sm resize-none"></textarea>
</div>

1
2
3
4
5
6
7
8
9
10
11
12

# Markdown Editor

Markdown editing input area.

## Usage
```bash
npx devsnips add Tailwind/Components/Input/markdown-editor
```
Copy from `code.html`.

## File Structure
`code.html` · `preview.html` · `metadata.json` · `README.md`