+ ---
+title: Welcome to Markdown Viewer
+description: A GitHub-style Markdown renderer with live preview, math, diagrams, and export support.
+author: ThisIs-Developer
+tags: ["markdown", "preview", "mermaid", "latex", "open-source"]
+---
+
+# Welcome to Markdown Viewer
+
+## āØ Key Features
+- **Live Preview** with GitHub styling
+- **Smart Import/Export** (MD, HTML, PDF)
+- **Mermaid Diagrams** for visual documentation
+- **LaTeX Math Support** for scientific notation
+- **Emoji Support** š š š
+
+## š» Code with Syntax Highlighting
+```javascript
+ function renderMarkdown() {
+ const markdown = markdownEditor.value;
+ const html = marked.parse(markdown);
+ const sanitizedHtml = DOMPurify.sanitize(html);
+ markdownPreview.innerHTML = sanitizedHtml;
+
+ // Syntax highlighting is handled automatically
+ // during the parsing phase by the marked renderer.
+ // Themes are applied instantly via CSS variables.
+ }
+```
+
+## š§® Mathematical Expressions
+Write complex formulas with LaTeX syntax:
+
+Inline equation: $$E = mc^2$$
+
+Display equations:
+$$\frac{\partial f}{\partial x} = \lim_{h \to 0} \frac{f(x+h) - f(x)}{h}$$
+
+$$\sum_{i=1}^{n} i^2 = \frac{n(n+1)(2n+1)}{6}$$
+
+## š Mermaid Diagrams
+Create powerful visualizations directly in markdown:
+
+```mermaid
+flowchart LR
+ A[Start] --> B{Is it working?}
+ B -->|Yes| C[Great!]
+ B -->|No| D[Debug]
+ C --> E[Deploy]
+ D --> B
+```
+
+### Sequence Diagram Example
+```mermaid
+sequenceDiagram
+ User->>Editor: Type markdown
+ Editor->>Preview: Render content
+ User->>Editor: Make changes
+ Editor->>Preview: Update rendering
+ User->>Export: Save as PDF
+```
+
+## š Task Management
+- [x] Create responsive layout
+- [x] Implement live preview with GitHub styling
+- [x] Add syntax highlighting for code blocks
+- [x] Support math expressions with LaTeX
+- [x] Enable mermaid diagrams
+
+## š Feature Comparison
+
+| Feature | Markdown Viewer (Ours) | Other Markdown Editors |
+|:-------------------------|:----------------------:|:-----------------------:|
+| Live Preview | ā GitHub-Styled | ā |
+| Sync Scrolling | ā Two-way | š Partial/None |
+| Mermaid Support | ā | ā/Limited |
+| LaTeX Math Rendering | ā | ā/Limited |
+
+### š Multi-row Headers Support
+
+
+
+
+
Document Type
+
Support
+
+
+
Markdown Viewer (Ours)
+
Other Markdown Editors
+
+
+
+
+
Technical Docs
+
Full + Diagrams
+
Limited/Basic
+
+
+
Research Notes
+
Full + Math
+
Partial
+
+
+
Developer Guides
+
Full + Export Options
+
Basic
+
+
+
+
+## š Text Formatting Examples
+
+### Text Formatting
+
+Text can be formatted in various ways for ~~strikethrough~~, **bold**, *italic*, or ***bold italic***.
+
+For highlighting important information, use highlighted text or add underlines where appropriate.
+
+### Superscript and Subscript
+
+Chemical formulas: H2O, CO2
+Mathematical notation: x2, eiĻ
+
+### Keyboard Keys
+
+Press Ctrl + B for bold text.
+
+### Abbreviations
+
+GUI
+API
+
+### Text Alignment
+
+
+Centered text for headings or important notices
+
+
+
+Right-aligned text (for dates, signatures, etc.)
+
+
+### **Lists**
+
+Create bullet points:
+* Item 1
+* Item 2
+ * Nested item
+ * Nested further
+
+### **Links and Images**
+
+Add a [link](https://github.com/ThisIs-Developer/Markdown-Viewer) to important resources.
+
+Embed an image:
+
+
+### **Blockquotes**
+
+Quote someone famous:
+> "The best way to predict the future is to invent it." - Alan Kay
+
+---
+
+## š”ļø Security Note
+
+This is a fully client-side application. Your content never leaves your browser and stays secure on your device.
+
+
diff --git a/desktop-app/resources/js/script.js b/desktop-app/resources/js/script.js
index 6c58cc47..3ef4f3db 100644
--- a/desktop-app/resources/js/script.js
+++ b/desktop-app/resources/js/script.js
@@ -864,18 +864,13 @@ document.addEventListener("DOMContentLoaded", function () {
.replace(/"/g, '"');
}
- // PERF-012: Default template loaded from external file to reduce bundle size
- let sampleMarkdown = '# Welcome to Markdown Viewer\n\nStart typing your markdown here...';
- fetch('sample.md').then(function(r) { return r.text(); }).then(function(text) {
- sampleMarkdown = text;
- // Only apply if editor still has the simple fallback or is empty
- if (!markdownEditor.value || markdownEditor.value === '# Welcome to Markdown Viewer\n\nStart typing your markdown here...') {
- markdownEditor.value = sampleMarkdown;
- renderMarkdown();
- }
- }).catch(function() { /* Use inline fallback */ });
+ // PERF-012: Inlined default template to eliminate network request, FOUC, and layout shifts
+ const defaultMarkdownTemplate = document.getElementById('default-markdown');
+ const sampleMarkdown = defaultMarkdownTemplate ? defaultMarkdownTemplate.textContent.trim() : '# Welcome to Markdown Viewer\n\nStart typing your markdown here...';
- markdownEditor.value = sampleMarkdown;
+ if (!markdownEditor.value) {
+ markdownEditor.value = sampleMarkdown;
+ }
// ========================================
// DOCUMENT TABS & SESSION MANAGEMENT
diff --git a/index.html b/index.html
index ae79be0c..0967da9d 100644
--- a/index.html
+++ b/index.html
@@ -78,10 +78,8 @@
Markdown Viewer
-
-
-
-
+
+
@@ -915,6 +913,175 @@
Open-source credits
+ ---
+title: Welcome to Markdown Viewer
+description: A GitHub-style Markdown renderer with live preview, math, diagrams, and export support.
+author: ThisIs-Developer
+tags: ["markdown", "preview", "mermaid", "latex", "open-source"]
+---
+
+# Welcome to Markdown Viewer
+
+## āØ Key Features
+- **Live Preview** with GitHub styling
+- **Smart Import/Export** (MD, HTML, PDF)
+- **Mermaid Diagrams** for visual documentation
+- **LaTeX Math Support** for scientific notation
+- **Emoji Support** š š š
+
+## š» Code with Syntax Highlighting
+```javascript
+ function renderMarkdown() {
+ const markdown = markdownEditor.value;
+ const html = marked.parse(markdown);
+ const sanitizedHtml = DOMPurify.sanitize(html);
+ markdownPreview.innerHTML = sanitizedHtml;
+
+ // Syntax highlighting is handled automatically
+ // during the parsing phase by the marked renderer.
+ // Themes are applied instantly via CSS variables.
+ }
+```
+
+## š§® Mathematical Expressions
+Write complex formulas with LaTeX syntax:
+
+Inline equation: $$E = mc^2$$
+
+Display equations:
+$$\frac{\partial f}{\partial x} = \lim_{h \to 0} \frac{f(x+h) - f(x)}{h}$$
+
+$$\sum_{i=1}^{n} i^2 = \frac{n(n+1)(2n+1)}{6}$$
+
+## š Mermaid Diagrams
+Create powerful visualizations directly in markdown:
+
+```mermaid
+flowchart LR
+ A[Start] --> B{Is it working?}
+ B -->|Yes| C[Great!]
+ B -->|No| D[Debug]
+ C --> E[Deploy]
+ D --> B
+```
+
+### Sequence Diagram Example
+```mermaid
+sequenceDiagram
+ User->>Editor: Type markdown
+ Editor->>Preview: Render content
+ User->>Editor: Make changes
+ Editor->>Preview: Update rendering
+ User->>Export: Save as PDF
+```
+
+## š Task Management
+- [x] Create responsive layout
+- [x] Implement live preview with GitHub styling
+- [x] Add syntax highlighting for code blocks
+- [x] Support math expressions with LaTeX
+- [x] Enable mermaid diagrams
+
+## š Feature Comparison
+
+| Feature | Markdown Viewer (Ours) | Other Markdown Editors |
+|:-------------------------|:----------------------:|:-----------------------:|
+| Live Preview | ā GitHub-Styled | ā |
+| Sync Scrolling | ā Two-way | š Partial/None |
+| Mermaid Support | ā | ā/Limited |
+| LaTeX Math Rendering | ā | ā/Limited |
+
+### š Multi-row Headers Support
+
+
+
+
+
Document Type
+
Support
+
+
+
Markdown Viewer (Ours)
+
Other Markdown Editors
+
+
+
+
+
Technical Docs
+
Full + Diagrams
+
Limited/Basic
+
+
+
Research Notes
+
Full + Math
+
Partial
+
+
+
Developer Guides
+
Full + Export Options
+
Basic
+
+
+
+
+## š Text Formatting Examples
+
+### Text Formatting
+
+Text can be formatted in various ways for ~~strikethrough~~, **bold**, *italic*, or ***bold italic***.
+
+For highlighting important information, use highlighted text or add underlines where appropriate.
+
+### Superscript and Subscript
+
+Chemical formulas: H2O, CO2
+Mathematical notation: x2, eiĻ
+
+### Keyboard Keys
+
+Press Ctrl + B for bold text.
+
+### Abbreviations
+
+GUI
+API
+
+### Text Alignment
+
+
+Centered text for headings or important notices
+
+
+
+Right-aligned text (for dates, signatures, etc.)
+
+
+### **Lists**
+
+Create bullet points:
+* Item 1
+* Item 2
+ * Nested item
+ * Nested further
+
+### **Links and Images**
+
+Add a [link](https://github.com/ThisIs-Developer/Markdown-Viewer) to important resources.
+
+Embed an image:
+
+
+### **Blockquotes**
+
+Quote someone famous:
+> "The best way to predict the future is to invent it." - Alan Kay
+
+---
+
+## š”ļø Security Note
+
+This is a fully client-side application. Your content never leaves your browser and stays secure on your device.
+
+
diff --git a/script.js b/script.js
index 6c58cc47..3ef4f3db 100644
--- a/script.js
+++ b/script.js
@@ -864,18 +864,13 @@ document.addEventListener("DOMContentLoaded", function () {
.replace(/"/g, '"');
}
- // PERF-012: Default template loaded from external file to reduce bundle size
- let sampleMarkdown = '# Welcome to Markdown Viewer\n\nStart typing your markdown here...';
- fetch('sample.md').then(function(r) { return r.text(); }).then(function(text) {
- sampleMarkdown = text;
- // Only apply if editor still has the simple fallback or is empty
- if (!markdownEditor.value || markdownEditor.value === '# Welcome to Markdown Viewer\n\nStart typing your markdown here...') {
- markdownEditor.value = sampleMarkdown;
- renderMarkdown();
- }
- }).catch(function() { /* Use inline fallback */ });
+ // PERF-012: Inlined default template to eliminate network request, FOUC, and layout shifts
+ const defaultMarkdownTemplate = document.getElementById('default-markdown');
+ const sampleMarkdown = defaultMarkdownTemplate ? defaultMarkdownTemplate.textContent.trim() : '# Welcome to Markdown Viewer\n\nStart typing your markdown here...';
- markdownEditor.value = sampleMarkdown;
+ if (!markdownEditor.value) {
+ markdownEditor.value = sampleMarkdown;
+ }
// ========================================
// DOCUMENT TABS & SESSION MANAGEMENT
+
+### **Blockquotes**
+
+Quote someone famous:
+> "The best way to predict the future is to invent it." - Alan Kay
+
+---
+
+## š”ļø Security Note
+
+This is a fully client-side application. Your content never leaves your browser and stays secure on your device.
+
+
diff --git a/desktop-app/resources/js/script.js b/desktop-app/resources/js/script.js
index 6c58cc47..3ef4f3db 100644
--- a/desktop-app/resources/js/script.js
+++ b/desktop-app/resources/js/script.js
@@ -864,18 +864,13 @@ document.addEventListener("DOMContentLoaded", function () {
.replace(/"/g, '"');
}
- // PERF-012: Default template loaded from external file to reduce bundle size
- let sampleMarkdown = '# Welcome to Markdown Viewer\n\nStart typing your markdown here...';
- fetch('sample.md').then(function(r) { return r.text(); }).then(function(text) {
- sampleMarkdown = text;
- // Only apply if editor still has the simple fallback or is empty
- if (!markdownEditor.value || markdownEditor.value === '# Welcome to Markdown Viewer\n\nStart typing your markdown here...') {
- markdownEditor.value = sampleMarkdown;
- renderMarkdown();
- }
- }).catch(function() { /* Use inline fallback */ });
+ // PERF-012: Inlined default template to eliminate network request, FOUC, and layout shifts
+ const defaultMarkdownTemplate = document.getElementById('default-markdown');
+ const sampleMarkdown = defaultMarkdownTemplate ? defaultMarkdownTemplate.textContent.trim() : '# Welcome to Markdown Viewer\n\nStart typing your markdown here...';
- markdownEditor.value = sampleMarkdown;
+ if (!markdownEditor.value) {
+ markdownEditor.value = sampleMarkdown;
+ }
// ========================================
// DOCUMENT TABS & SESSION MANAGEMENT
diff --git a/index.html b/index.html
index ae79be0c..0967da9d 100644
--- a/index.html
+++ b/index.html
@@ -78,10 +78,8 @@