-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
57 lines (49 loc) · 1.86 KB
/
index.html
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
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
<!DOCTYPE html>
<html lang="en" data-theme="dark">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Markdown Editor Example</title>
<link rel="stylesheet" href="markdown-text-editor.css">
<script src="https://unpkg.com/@tailwindcss/browser@4"></script>
</head>
<body class="p-4 lg:p-12 ">
<form method="post" class="flex flex-col gap-4">
<textarea class="editor h-48" rows="5">
# Markdown Editor
## Introduction
Markdown is a lightweight markup language with plain-text formatting syntax. It is often used for writing documentation and creating content for web pages.
### Features of Markdown:
- Easy to learn and use
- Can be converted to HTML
- Supports basic text formatting
## Code Example
Here’s an example of a simple Python function:
```python
def greet(name):
return f"Hello, {name}!"
```
</textarea>
<button type="button" class="btn-violet-500 btn-sm self-end">Get Markdown</button>
</form>
<div class="border-t mt-5 space-y-3">
<strong class="font-medium text-zinc-800 mt-3 block">Output</strong>
<div class="output"></div>
</div>
<script src="markdown-text-editor.js"></script>
<script>
const options = {
placeholder: 'Start writing...',
toolbar: ['heading', 'bold', 'italic', 'strikethrough', 'ul', 'ol', 'checklist', 'blockquote', 'link', 'image', 'preview'],
}
document.querySelectorAll(".editor").forEach(element => {
const editor = new MarkdownEditor(element, options);
});
document.querySelector(".btn").addEventListener("click", function(e){
const output = document.querySelector(".editor").value;
console.log(output);
document.querySelector(".output").innerHTML = `<pre>${output}</pre>`;
});
</script>
</body>
</html>