{"id":13403207,"url":"https://github.com/liyasthomas/marcdown","last_synced_at":"2025-04-05T17:06:01.956Z","repository":{"id":41467390,"uuid":"181738425","full_name":"liyasthomas/marcdown","owner":"liyasthomas","description":"👻 Lightweight realtime markdown viewer and editor - Simple, clean and beautiful https://liyasthomas.github.io/marcdown","archived":false,"fork":false,"pushed_at":"2023-10-02T05:23:02.000Z","size":2035,"stargazers_count":425,"open_issues_count":4,"forks_count":37,"subscribers_count":7,"default_branch":"master","last_synced_at":"2025-03-29T16:05:57.831Z","etag":null,"topics":["javascript","liyasthomas","markdown","markdown-editor","markdown-parser","markdown-viewer"],"latest_commit_sha":null,"homepage":"https://liyasthomas.github.io/marcdown","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/liyasthomas.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","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},"funding":{"open_collective":"liyasthomas","patreon":"liyasthomas","custom":"https://www.paypal.me/liyascthomas"}},"created_at":"2019-04-16T17:44:11.000Z","updated_at":"2025-03-17T23:07:36.000Z","dependencies_parsed_at":"2024-12-15T21:06:12.951Z","dependency_job_id":"dabbf3e9-c6c5-44ca-ade9-86d0f79ee910","html_url":"https://github.com/liyasthomas/marcdown","commit_stats":null,"previous_names":[],"tags_count":9,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/liyasthomas%2Fmarcdown","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/liyasthomas%2Fmarcdown/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/liyasthomas%2Fmarcdown/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/liyasthomas%2Fmarcdown/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/liyasthomas","download_url":"https://codeload.github.com/liyasthomas/marcdown/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247369952,"owners_count":20927928,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","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":["javascript","liyasthomas","markdown","markdown-editor","markdown-parser","markdown-viewer"],"created_at":"2024-07-30T19:01:26.813Z","updated_at":"2025-04-05T17:06:01.938Z","avatar_url":"https://github.com/liyasthomas.png","language":"JavaScript","readme":"[![Build Status](https://travis-ci.com/liyasthomas/marcdown.svg?branch=master)](https://travis-ci.com/liyasthomas/marcdown) [![GitHub release](https://img.shields.io/github/release/liyasthomas/marcdown/all.svg)](https://github.com/liyasthomas/marcdown/releases/latest) [![repo size](https://img.shields.io/github/repo-size/liyasthomas/marcdown.svg)](https://github.com/liyasthomas/marcdown/archive/master.zip) [![license](https://img.shields.io/github/license/liyasthomas/marcdown.svg)](https://github.com/liyasthomas/marcdown/blob/master/LICENSE) [![contributions welcome](https://img.shields.io/badge/contributions-welcome-brightgreen.svg?style=flat)](https://github.com/liyasthomas/marcdown/issues) [![Website](https://img.shields.io/website-up-down-green-red/https/shields.io.svg?label=website)](https://liyas-thomas.firebaseapp.com) [![Donate](https://img.shields.io/badge/$-donate-ff69b4.svg)](https://www.paypal.me/liyascthomas)\n\n# \u003cimg src=\"icons/icon-48x48.png\" alt=\"marcdown\" width=\"32\"\u003e Marcdown\n\n### 👻 Lightweight markdown viewer and editor by [Liyas Thomas](https://github.com/liyasthomas)\n\n\u003cdiv align=\"center\"\u003e\n  \u003cbr\u003e\n  \u003cimg src=\"icons/screely.png\" alt=\"marcdown\" width=\"100%\"\u003e\n  \u003cimg src=\"icons/screely2.png\" alt=\"marcdown\" width=\"100%\"\u003e\n  \u003cbr\u003e\n\u003c/div\u003e\n\n### Features :sparkles:\n\n:heart: **Lightweight and minimal**: Crafted with minimalistic UI design\n\n:electric_plug: **Real-time editor**: WYSIWYG (what you see is what you get) markdown editor using **[MarkedJS](https://marked.js.org)**\n\n- Built for speed\n- Light-weight while implementing all markdown features from the supported flavors \u0026 specifications.\n\n:pen: **Code highlighting**: Syntax highlighting with **[highlightjs](https://highlightjs.org)**\n\n- 185 languages and 89 styles\n- Automatic language detection\n- Multi-language code highlighting\n\n:triangular_ruler: **Math support**: **[MathJax](https://www.mathjax.org)** for LaTeX, MathML, and AsciiMath notations\n\n- Use MathML, TeX, and ASCIImath as input and produce HTML+CSS, SVG, or MathML as output.\n\n:globe_with_meridians: **PWA**: Progressive web app.\n\n- Works offline after first use\n- Install as a Web app on your phone or Desktop app on your PC\n\n:zap: **Real-time viewer**: View changes as you type\n\n:raised_hand_with_fingers_splayed: **Drag and drop**: Grab a markdown file and drop to the editor\n\n:scroll: **Scroll sync**: Editor and viewer scroll along with you\n\n:crescent_moon: **Dark mode**: Turn the lights off!\n\n---\n\n## Getting started\n\nThese instructions will get you a copy of the project up and running on your local machine for development and testing purposes. See deployment for notes on how to deploy the project on a live system.\n\n### Prerequisites\n\nWhat things you need to install the software and how to install them.\n\n* Marcdown can be embedded into any web page consisting a `\u003ctextarea\u003e\u003c/textarea\u003e` tag.\n* A browser with [ES6 support](https://caniuse.com/#feat=es6).\n* [Wonder](https://en.wikipedia.org/wiki/Wonder_(emotion))! :heart:\n\n---\n## Demo\n\n[https://liyasthomas.github.io/marcdown](https://liyasthomas.github.io/marcdown)\n\n1. Paste/type markdown on left\n2. View preview on right\n3. Save Markdown file\n\nYou're done!\n\n---\n\n### Installing\n\nA step by step series of examples that tell you've to get a development environment running.\n\n### Step 1: Include **[MarkedJS](https://marked.js.org)** and **[Marcdown.js](https://liyasthomas.github.io/marcdown)**\n\n`\u003cscript src=\"https://cdn.jsdelivr.net/npm/marked/marked.min.js\"\u003e\u003c/script\u003e`\n\n`\u003cscript src=\"https://cdn.jsdelivr.net/gh/liyasthomas/marcdown/marcdown.min.js\"\u003e\u003c/script\u003e`\n\n### Step 2: Define a `\u003ctextarea id=\"getm\" onkeyup=\"keyUp()\"\u003e\u003c/textarea\u003e` tag inside `\u003cbody\u003e\u003c/body\u003e`\n\n`\u003ctextarea id=\"getm\" placeholder=\"paste markdown here ✨\" onkeyup=\"keyUp()\"\u003e\u003c/textarea\u003e`\n\n### Step 3: Define a `\u003cdiv id=\"viewer\"\u003e\u003c/div\u003e` tag inside `\u003cbody\u003e\u003c/body\u003e`\n\n`\u003cdiv id=\"viewer\"\u003e\u003c/div\u003e`\n\n### Step 4: Define buttons with actions such as bold, italic, strike, h1, ul, ol, code, link etc.\n\n`\u003cbutton onclick=\"apply('bold')\" title=\"Bold\"\u003eB\u003c/button\u003e`\n\nFull list of actions:\n\n`\u003cbutton onclick=\"apply('bold')\" title=\"Bold\"\u003eB\u003c/button\u003e`\n\n`\u003cbutton onclick=\"apply('italic')\" title=\"Italic\"\u003e\u003ci\u003eI\u003c/i\u003e\u003c/button\u003e`\n\n`\u003cbutton onclick=\"apply('strike')\" title=\"Strikethrough\"\u003e\u003cstrike\u003eS\u003c/strike\u003e\u003c/button\u003e`\n\n`\u003cbutton onclick=\"apply('h1')\" title=\"Header 1\"\u003eH1\u003c/button\u003e`\n\n`\u003cbutton onclick=\"apply('h2')\" title=\"Header 2\"\u003eH2\u003c/button\u003e`\n\n`\u003cbutton onclick=\"apply('h3')\" title=\"Header 3\"\u003eH3\u003c/button\u003e`\n\n`\u003cbutton onclick=\"apply('ul')\" title=\"Unordered list\"\u003e●\u003c/button\u003e`\n\n`\u003cbutton onclick=\"apply('ol')\" title=\"Ordered list\"\u003e1.\u003c/button\u003e`\n\n`\u003cbutton onclick=\"apply('check')\" title=\"Check list\"\u003e✔\u003c/button\u003e`\n\n`\u003cbutton onclick=\"apply('bq')\" title=\"Blockquote\"\u003e””\u003c/button\u003e`\n\n`\u003cbutton onclick=\"apply('ic')\" title=\"Inline code\"\u003eI\u0026lt;\u003e\u003c/button\u003e`\n\n`\u003cbutton onclick=\"apply('bc')\" title=\"Block code\"\u003e\u0026lt;\u003eB\u003c/button\u003e`\n\n`\u003cbutton onclick=\"apply('link')\" title=\"Link\"\u003eA\u003c/button\u003e`\n\n`\u003cbutton onclick=\"apply('image')\" title=\"Image\"\u003eI\u003c/button\u003e`\n\n`\u003cbutton onclick=\"apply('hr')\" title=\"Horizontal rule\"\u003e——\u003c/button\u003e`\n\n`\u003cbutton onclick=\"apply('table')\" title=\"Table\"\u003e⚏\u003c/button\u003e`\n\n## Example HTML file:\n\n```\n\u003c!DOCTYPE html\u003e\n\u003chtml lang=\"en\"\u003e\n\n\u003chead\u003e\n\t\u003cmeta charset=\"UTF-8\"\u003e\n\t\u003ctitle\u003eMarcdown\u003c/title\u003e\n\t\u003cscript src=\"https://cdn.jsdelivr.net/npm/marked/marked.min.js\"\u003e\u003c/script\u003e\n\t\u003cscript src=\"https://cdn.jsdelivr.net/gh/liyasthomas/marcdown/marcdown.min.js\"\u003e\u003c/script\u003e\n\u003c/head\u003e\n\n\u003cbody\u003e\n\t\u003ctextarea id=\"getm\" placeholder=\"paste markdown here ✨\" onkeyup=\"keyUp()\"\u003e\u003c/textarea\u003e\n\t\u003cbutton onclick=\"apply('bold')\" title=\"Bold\"\u003eB\u003c/button\u003e\n\t\u003cbutton onclick=\"apply('italic')\" title=\"Italic\"\u003e\u003ci\u003eI\u003c/i\u003e\u003c/button\u003e\n\t\u003cbutton onclick=\"apply('strike')\" title=\"Strikethrough\"\u003e\u003cstrike\u003eS\u003c/strike\u003e\u003c/button\u003e\n\t\u003cbutton onclick=\"apply('h1')\" title=\"Header 1\"\u003eH1\u003c/button\u003e\n\t\u003cbutton onclick=\"apply('h2')\" title=\"Header 2\"\u003eH2\u003c/button\u003e\n\t\u003cbutton onclick=\"apply('h3')\" title=\"Header 3\"\u003eH3\u003c/button\u003e\n\t\u003cbutton onclick=\"apply('ul')\" title=\"Unordered list\"\u003e●\u003c/button\u003e\n\t\u003cbutton onclick=\"apply('ol')\" title=\"Ordered list\"\u003e1.\u003c/button\u003e\n\t\u003cbutton onclick=\"apply('check')\" title=\"Check list\"\u003e✔\u003c/button\u003e\n\t\u003cbutton onclick=\"apply('bq')\" title=\"Blockquote\"\u003e””\u003c/button\u003e\n\t\u003cbutton onclick=\"apply('ic')\" title=\"Inline code\"\u003eI\u0026lt;\u003e\u003c/button\u003e\n\t\u003cbutton onclick=\"apply('bc')\" title=\"Block code\"\u003e\u0026lt;\u003eB\u003c/button\u003e\n\t\u003cbutton onclick=\"apply('link')\" title=\"Link\"\u003eA\u003c/button\u003e\n\t\u003cbutton onclick=\"apply('image')\" title=\"Image\"\u003eI\u003c/button\u003e\n\t\u003cbutton onclick=\"apply('hr')\" title=\"Horizontal rule\"\u003e——\u003c/button\u003e\n\t\u003cbutton onclick=\"apply('table')\" title=\"Table\"\u003e⚏\u003c/button\u003e\n\t\u003cdiv class=\"markdown\" id=\"viewer\"\u003e\u003c/div\u003e\n\u003c/body\u003e\n\n\u003c/html\u003e\n```\n\n---\n\n## Deployment\n\nAdd additional notes about how to deploy this on a live system.\n\n```\nWill be explained later\n```\n\n---\n\n## Built with\n\n* **[MarkedJS](https://marked.js.org)** - For markdown parser\n* **[highlightjs](https://highlightjs.org)** - For code highlighting\n* **[MathJax](https://www.mathjax.org)** - For LaTeX, MathML, and AsciiMath notations\n* **[Chromium](https://github.com/chromium/chromium)** - Thanks for being so fast!\n* HTML - For the web framework\n* CSS - For styling components\n* JavaScript - For magic!\n\n---\n\n## Contributing\n\nPlease read [CONTRIBUTING](CONTRIBUTING.md) for details on our [CODE OF CONDUCT](CODE_OF_CONDUCT.md), and the process for submitting pull requests to us.\n\n---\n\n## Continuous Integration\n\nWe use [Travis CI](https://travis-ci.com) for continuous integration. Check out our [Travis CI Status](https://travis-ci.com/liyasthomas/marcdown).\n\n---\n\n## Versioning\n\nThis project is developed by [Liyas Thomas](https://github.com/liyasthomas) using the [Semantic Versioning specification](https://semver.org). For the versions available, see the [releases on this repository](https://github.com/liyasthomas/marcdown/releases).\n\n---\n\n## Change log\n\nSee the [CHANGELOG](CHANGELOG.md) file for details.\n\n---\n\n## Authors\n\n### Lead Developers\n* [**Liyas Thomas**](https://github.com/liyasthomas) - *Author*\n\n### Thanks\n* [MarkedJS](https://marked.js.org)\n* [highlightjs](https://highlightjs.org)\n\nSee the list of [contributors](https://github.com/liyasthomas/marcdown/graphs/contributors) who participated in this project.\n\n---\n\n## License\n\nThis project is licensed under the [MIT License](https://opensource.org/licenses/MIT) - see the [LICENSE](LICENSE) file for details.\n\n---\n\n## Acknowledgments\n\n* Hat tip to anyone who's code was used\n* Inspirations:\n\t* [StackEdit](https://stackedit.io)\n\t* [Dribbble](https://dribbble.com)\n","funding_links":["https://opencollective.com/liyasthomas","https://patreon.com/liyasthomas","https://www.paypal.me/liyascthomas"],"categories":["JavaScript","markdown"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fliyasthomas%2Fmarcdown","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fliyasthomas%2Fmarcdown","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fliyasthomas%2Fmarcdown/lists"}