Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Markdown to HTML Renderer</title> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.24.1/themes/prism.css"> | |
| <style> | |
| body { | |
| font-family: Arial, sans-serif; | |
| line-height: 1.6; | |
| max-width: 800px; | |
| margin: 20px auto; | |
| padding: 0 10px; | |
| } | |
| h1, h2, h3, h4, h5, h6 { | |
| color: #333; | |
| } | |
| p { | |
| margin-bottom: 1em; | |
| } | |
| code { | |
| background-color: #f4f4f4; | |
| padding: 2px 5px; | |
| border: 1px solid #ddd; | |
| border-radius: 3px; | |
| } | |
| pre { | |
| margin: 1em 0; | |
| overflow: auto; | |
| } | |
| code { | |
| padding: 0.5em; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.24.1/prism.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.24.1/components/prism-javascript.js"></script> | |
| <!-- Add other language plugins as needed --> | |
| <div id="output-container"></div> | |
| <script> | |
| // Markdown to HTML renderer with Prism syntax highlighting | |
| function renderMarkdown(markdownText) { | |
| // Headings, paragraphs, emphasis, blockquotes, lists, links, images, escaping characters | |
| markdownText = markdownText.replace(/# (.+)/g, '<h1>$1</h1>'); | |
| markdownText = markdownText.replace(/## (.+)/g, '<h2>$1</h2>'); | |
| markdownText = markdownText.replace(/### (.+)/g, '<h3>$1</h3>'); | |
| markdownText = markdownText.replace(/#### (.+)/g, '<h4>$1</h4>'); | |
| markdownText = markdownText.replace(/##### (.+)/g, '<h5>$1</h5>'); | |
| markdownText = markdownText.replace(/###### (.+)/g, '<h6>$1</h6>'); | |
| markdownText = markdownText.replace(/(.+)(?:\n|\r\n){2}/g, '<p>$1</p>'); | |
| markdownText = markdownText.replace(/(.+)(?:\n|\r\n)/g, '$1<br>'); | |
| markdownText = markdownText.replace(/\*(.+?)\*/g, '<em>$1</em>'); | |
| markdownText = markdownText.replace(/_(.+?)_/g, '<em>$1</em>'); | |
| markdownText = markdownText.replace(/>(.+)/g, '<blockquote>$1</blockquote>'); | |
| markdownText = markdownText.replace(/(?:\*|\d\.) (.+)/g, '<li>$1</li>'); | |
| markdownText = markdownText.replace(/(?:\*|\d\.) (.+)(?:\n|\r\n){2}/g, '<ul>$1</ul>'); | |
| markdownText = markdownText.replace(/`(.+?)`/g, '<code>$1</code>'); | |
| markdownText = markdownText.replace(/-{3,}/g, '<hr>'); | |
| markdownText = markdownText.replace(/\[([^\]]+)\]\(([^)]+)\)/g, '<a href="$2">$1</a>'); | |
| markdownText = markdownText.replace(/!\[([^\]]+)\]\(([^)]+)\)/g, '<img src="$2" alt="$1">'); | |
| markdownText = markdownText.replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>'); | |
| // Code Blocks with Syntax Highlighting | |
| markdownText = markdownText.replace(/```(\w+)?\s*([\s\S]*?)\s*```/g, (match, p1, p2) => { | |
| const language = p1 || 'javascript'; | |
| return `<pre class="language-${language}"><code>${p2}</code></pre>`; | |
| }); | |
| return markdownText; | |
| } | |
| // Example usage | |
| const markdownText = ` | |
| # Heading 1 | |
| ## Heading 2 | |
| ### Heading 3 | |
| Paragraph 1. | |
| Paragraph 2. | |
| *Emphasis* and _Emphasis_ | |
| > Blockquote | |
| - List item 1 | |
| - List item 2 | |
| \`Inline code\` | |
| \`\`\`javascript | |
| console.log('Hello, world!'); | |
| \`\`\` | |
| --- | |
| [Link](https://www.example.com) | |
|  | |
| `; | |
| const htmlOutput = renderMarkdown(markdownText); | |
| document.getElementById('output-container').innerHTML = renderMarkdown(markdownText);; | |
| </script> | |
| </body> | |
| </html> | |