{"id":38463619,"url":"https://github.com/jili0/markdown-previewer","last_synced_at":"2026-01-17T05:00:56.022Z","repository":{"id":279008279,"uuid":"937347391","full_name":"jili0/markdown-previewer","owner":"jili0","description":"A live markdown previewer that instantly shows your markdown syntax in real-time. Built with React and powered by `marked.js` for markdown parsing.","archived":false,"fork":false,"pushed_at":"2025-04-02T10:26:22.000Z","size":5255,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-02T11:29:19.837Z","etag":null,"topics":["markedjs","sass"],"latest_commit_sha":null,"homepage":"https://markdown-previewer-a9ax.onrender.com/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/jili0.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2025-02-22T21:23:01.000Z","updated_at":"2025-04-02T10:26:25.000Z","dependencies_parsed_at":"2025-02-23T06:37:52.404Z","dependency_job_id":null,"html_url":"https://github.com/jili0/markdown-previewer","commit_stats":null,"previous_names":["jili0/markdown-previewer"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/jili0/markdown-previewer","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jili0%2Fmarkdown-previewer","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jili0%2Fmarkdown-previewer/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jili0%2Fmarkdown-previewer/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jili0%2Fmarkdown-previewer/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jili0","download_url":"https://codeload.github.com/jili0/markdown-previewer/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jili0%2Fmarkdown-previewer/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28497952,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-17T04:31:57.058Z","status":"ssl_error","status_checked_at":"2026-01-17T04:31:45.816Z","response_time":85,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["markedjs","sass"],"created_at":"2026-01-17T05:00:32.931Z","updated_at":"2026-01-17T05:00:55.963Z","avatar_url":"https://github.com/jili0.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# 📝 Markdown Previewer\n\nAn interactive Markdown editor and previewer, developed with React and SASS. This tool allows users to write Markdown syntax in real-time and see the rendered preview.\n\n![GitHub language count](https://img.shields.io/badge/React-17.0.2-blue)\n![GitHub language count](https://img.shields.io/badge/SASS-embedded-pink)\n![GitHub language count](https://img.shields.io/badge/Vite-6.1.0-yellow)\n\n## Features\n\n- **Live Preview**: Instant rendering of Markdown text\n- **Syntax Highlighting**: Code blocks are highlighted with `highlight.js`\n- **Responsive Design**: Works on all screen sizes\n- **Sanitized Output**: Security through `DOMPurify`\n- **Line Breaks**: Correct interpretation of multiple line breaks\n\n## Technologies\n\n- **Frontend Framework**: React 17\n- **Styling**: SASS (with nested syntax)\n- **Markdown Conversion**: Marked\n- **Code Highlighting**: highlight.js\n- **Security**: DOMPurify\n- **Build Tool**: Vite\n\n## Technical Challenges\n\nThe biggest challenge in this project was handling multiple line breaks in the textarea that needed to be correctly displayed as line breaks in the previewer. This was solved through a special regex replacement:\n\n```javascript\nmarked(markdown.replace(/\\n(?=\\n)/g, \"\\n\u003cbr\u003e\\n\"))\n```\n\nThis solution enables the Markdown previewer to interpret line breaks and render them as `\u003cbr\u003e` elements, which provides an improved user experience.\n\n## Preview\n\n\u003cdiv align=\"center\"\u003e\n  \u003cimg src=\"app-preview/preview1.png\" alt=\"Markdown Previewer - Main View\" width=\"600\"/\u003e\n  \u003cp\u003e\u003cem\u003eMain view of the Markdown Previewer\u003c/em\u003e\u003c/p\u003e\n  \n  \u003cimg src=\"app-preview/preview2.png\" alt=\"Markdown Previewer - Code Highlighting\" width=\"600\"/\u003e\n  \u003cp\u003e\u003cem\u003eText Styling, Lists and Tables\u003c/em\u003e\u003c/p\u003e\n  \n  \u003cimg src=\"app-preview/preview3.png\" alt=\"Markdown Previewer - Mobile View\" width=\"600\"/\u003e\n  \u003cp\u003e\u003cem\u003eResponsive Design for various screen sizes\u003c/em\u003e\u003c/p\u003e\n\u003c/div\u003e\n\n## Project Structure\n\n```\nmarkdown-previewer/\n├── src/\n│   ├── components/\n│   │   ├── Editor.jsx       # Textarea component for Markdown input\n│   │   └── Previewer.jsx    # Preview component with Marked integration\n│   ├── App.jsx              # Main component\n│   ├── App.scss             # Main styling file\n│   ├── AppContextProvider.jsx # Context for state management\n│   ├── _index.scss          # Base styling\n│   └── main.jsx             # Application entry point\n├── public/\n└── ...configuration files\n```\n\nTry it out - It's fun!","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjili0%2Fmarkdown-previewer","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjili0%2Fmarkdown-previewer","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjili0%2Fmarkdown-previewer/lists"}