Hugging Face's logo

Spaces:
ArunKr
/
docs
Running

App Files Community
ArunKr commited on
Commit
3f3daa2
·
verified ·
1 Parent(s): a556c1a

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +98 -18
index.html CHANGED
@@ -1,19 +1,99 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
19
  </html>
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <title>Markdown Editor & Publisher</title>
6
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
+ <!-- Simple styling -->
8
+ <style>
9
+ body { margin: 0; font-family: sans-serif; display: flex; flex-direction: column; height: 100vh; }
10
+ header { background: #333; color: #fff; padding: 0.5em 1em; display: flex; align-items: center; }
11
+ header h1 { margin: 0; font-size: 1.2em; flex: 1; }
12
+ header button { padding: 0.5em 1em; font-size: 1em; cursor: pointer; }
13
+ main { flex: 1; display: flex; overflow: hidden; }
14
+ textarea { width: 50%; border: none; padding: 1em; font-family: monospace; font-size: 1em; resize: none; outline: none; }
15
+ #preview { width: 50%; padding: 1em; overflow-y: auto; border-left: 1px solid #ccc; }
16
+ /* Basic Markdown styling */
17
+ #preview h1 { border-bottom: 2px solid #eee; padding-bottom: 0.3em; }
18
+ #preview pre { background: #f4f4f4; padding: 1em; overflow-x: auto; }
19
+ #preview code { background: #f4f4f4; padding: 0.2em 0.4em; }
20
+ #preview blockquote { border-left: 4px solid #ccc; padding-left: 1em; color: #666; }
21
+ </style>
22
+ </head>
23
+ <body>
24
+
25
+ <header>
26
+ <h1>Markdown Editor & Publisher</h1>
27
+ <button id="publishBtn">Publish → Download HTML</button>
28
+ </header>
29
+
30
+ <main>
31
+ <textarea id="editor" placeholder="Type your Markdown here..."></textarea>
32
+ <div id="preview"></div>
33
+ </main>
34
+
35
+ <!-- Marked.js from CDN for Markdown parsing -->
36
+ <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
37
+ <script>
38
+ const editor = document.getElementById('editor');
39
+ const preview = document.getElementById('preview');
40
+ const publishBtn = document.getElementById('publishBtn');
41
+
42
+ // Render Markdown to HTML
43
+ function updatePreview() {
44
+ const md = editor.value;
45
+ preview.innerHTML = marked.parse(md, { breaks: true });
46
+ }
47
+
48
+ // Download rendered content as standalone HTML
49
+ function publish() {
50
+ const content = preview.innerHTML;
51
+ const fullHtml = `
52
+ <!DOCTYPE html>
53
+ <html lang="en">
54
+ <head>
55
+ <meta charset="UTF-8">
56
+ <title>Published Document</title>
57
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
58
+ <style>
59
+ body { font-family: sans-serif; padding: 2em; max-width: 800px; margin: auto; line-height: 1.6; }
60
+ h1, h2, h3, h4 { margin-top: 1.4em; }
61
+ pre { background: #f4f4f4; padding: 1em; overflow-x: auto; }
62
+ code { background: #f4f4f4; padding: 0.2em 0.4em; }
63
+ blockquote { border-left: 4px solid #ccc; padding-left: 1em; color: #666; margin: 1em 0; }
64
+ </style>
65
+ </head>
66
+ <body>
67
+ ${content}
68
+ </body>
69
+ </html>`;
70
+
71
+ const blob = new Blob([fullHtml], { type: 'text/html' });
72
+ const url = URL.createObjectURL(blob);
73
+ const a = document.createElement('a');
74
+ a.href = url;
75
+ a.download = 'document.html';
76
+ a.click();
77
+ URL.revokeObjectURL(url);
78
+ }
79
+
80
+ // Event listeners
81
+ editor.addEventListener('input', updatePreview);
82
+ publishBtn.addEventListener('click', publish);
83
+
84
+ // Initialize with a sample
85
+ editor.value = `# Welcome
86
+
87
+ Type *Markdown* on the left and see **HTML** on the right.
88
+
89
+ - Live preview
90
+ - Download as HTML
91
+
92
+ \`\`\`js
93
+ console.log('Hello, world!');
94
+ \`\`\`
95
+ `;
96
+ updatePreview();
97
+ </script>
98
+ </body>
99
  </html>