Hugging Face's logo

Spaces:
slimshadow
/
markdown-preview
Running

App Files Community
slimshadow commited on
Commit
dbbb1e5
·
verified ·
1 Parent(s): 145784e

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +74 -18
index.html CHANGED
@@ -1,19 +1,75 @@
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
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Markdown Preview</title>
7
+
8
+ <!-- Link to Google Fonts to use Poppins -->
9
+ <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap" rel="stylesheet">
10
+
11
+ <!-- Styling for the page -->
12
+ <style>
13
+ body {
14
+ font-family: 'Poppins', sans-serif;
15
+ line-height: 1.6;
16
+ padding: 20px;
17
+ max-width: 800px;
18
+ margin: auto;
19
+ }
20
+ h1, h2, h3, h4, h5, h6 {
21
+ font-weight: 600;
22
+ }
23
+ p {
24
+ margin-bottom: 1em;
25
+ }
26
+ pre {
27
+ background-color: #f4f4f4;
28
+ padding: 10px;
29
+ border-radius: 5px;
30
+ overflow-x: auto;
31
+ }
32
+ code {
33
+ background-color: #f4f4f4;
34
+ padding: 2px 4px;
35
+ border-radius: 3px;
36
+ }
37
+ blockquote {
38
+ border-left: 5px solid #ccc;
39
+ padding-left: 10px;
40
+ color: #666;
41
+ margin-left: 0;
42
+ }
43
+ ul, ol {
44
+ margin-left: 20px;
45
+ }
46
+ a {
47
+ color: #007bff;
48
+ text-decoration: none;
49
+ }
50
+ </style>
51
+ </head>
52
+ <body>
53
+ <h1>Markdown Preview</h1>
54
+ <div id="markdown-content">
55
+ <!-- Markdown content will be rendered here -->
56
+ </div>
57
+
58
+ <!-- Include the Marked.js library -->
59
+ <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
60
+
61
+ <!-- Script to fetch and render Markdown file -->
62
+ <script>
63
+ async function loadMarkdown() {
64
+ const response = await fetch('example.md');
65
+ const markdown = await response.text();
66
+
67
+ // Render the markdown using marked.js
68
+ const htmlContent = marked(markdown);
69
+ document.getElementById('markdown-content').innerHTML = htmlContent;
70
+ }
71
+
72
+ loadMarkdown();
73
+ </script>
74
+ </body>
75
  </html>