Skip to content

sample.md

Latest commit

 

History

History
167 lines (128 loc) · 4.26 KB

sample.md

File metadata and controls

167 lines (128 loc) · 4.26 KB
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

  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:

flowchart LR
    A[Start] --> B{Is it working?}
    B -->|Yes| C[Great!]
    B -->|No| D[Debug]
    C --> E[Deploy]
    D --> B
Loading

Sequence Diagram Example

sequenceDiagram
    User->>Editor: Type markdown
    Editor->>Preview: Render content
    User->>Editor: Make changes
    Editor->>Preview: Update rendering
    User->>Export: Save as PDF
Loading

📋 Task Management

  • Create responsive layout
  • Implement live preview with GitHub styling
  • Add syntax highlighting for code blocks
  • Support math expressions with LaTeX
  • 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 to important resources.

Embed an image: Markdown Logo

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.