Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/liyasthomas/marcdown

👻 Lightweight realtime markdown viewer and editor - Simple, clean and beautiful https://liyasthomas.github.io/marcdown
https://github.com/liyasthomas/marcdown

javascript liyasthomas markdown markdown-editor markdown-parser markdown-viewer

Last synced: 27 days ago
JSON representation

👻 Lightweight realtime markdown viewer and editor - Simple, clean and beautiful https://liyasthomas.github.io/marcdown

Awesome Lists containing this project

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)



# marcdown Marcdown



### 👻 Lightweight markdown viewer and editor by [Liyas Thomas](https://github.com/liyasthomas)





  


  marcdown

  marcdown

  





### Features :sparkles:



:heart: **Lightweight and minimal**: Crafted with minimalistic UI design



:electric_plug: **Real-time editor**: WYSIWYG (what you see is what you get) markdown editor using **[MarkedJS](https://marked.js.org)**



- Built for speed

- Light-weight while implementing all markdown features from the supported flavors & specifications.



:pen: **Code highlighting**: Syntax highlighting with **[highlightjs](https://highlightjs.org)**



- 185 languages and 89 styles

- Automatic language detection

- Multi-language code highlighting



:triangular_ruler: **Math support**: **[MathJax](https://www.mathjax.org)** for LaTeX, MathML, and AsciiMath notations



- Use MathML, TeX, and ASCIImath as input and produce HTML+CSS, SVG, or MathML as output.



:globe_with_meridians: **PWA**: Progressive web app.



- Works offline after first use

- Install as a Web app on your phone or Desktop app on your PC



:zap: **Real-time viewer**: View changes as you type



:raised_hand_with_fingers_splayed: **Drag and drop**: Grab a markdown file and drop to the editor



:scroll: **Scroll sync**: Editor and viewer scroll along with you



:crescent_moon: **Dark mode**: Turn the lights off!



---



## Getting started



These 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.



### Prerequisites



What things you need to install the software and how to install them.



* Marcdown can be embedded into any web page consisting a `` tag.

* A browser with [ES6 support](https://caniuse.com/#feat=es6).

* [Wonder](https://en.wikipedia.org/wiki/Wonder_(emotion))! :heart:



---

## Demo



[https://liyasthomas.github.io/marcdown](https://liyasthomas.github.io/marcdown)



1. Paste/type markdown on left

2. View preview on right

3. Save Markdown file



You're done!



---



### Installing



A step by step series of examples that tell you've to get a development environment running.



### Step 1: Include **[MarkedJS](https://marked.js.org)** and **[Marcdown.js](https://liyasthomas.github.io/marcdown)**



``



``



### Step 2: Define a `` tag inside ``



``



### Step 3: Define a `
` tag inside ``



`
`



### Step 4: Define buttons with actions such as bold, italic, strike, h1, ul, ol, code, link etc.



`B`



Full list of actions:



`B`



`I`



`S`



`H1`



`H2`



`H3`



`●`



`1.`



`✔`



`””`



`I<>`



`<>B`



`A`



`I`



`——`



`⚏`



## Example HTML file:



```



	

	Marcdown

	

	



	

	B

	I

	S

	H1

	H2

	H3

	●

	1.

	✔

	””

	I<>

	<>B

	A

	I

	——

	⚏

	



```



---



## Deployment



Add additional notes about how to deploy this on a live system.



```

Will be explained later

```



---



## Built with



* **[MarkedJS](https://marked.js.org)** - For markdown parser

* **[highlightjs](https://highlightjs.org)** - For code highlighting

* **[MathJax](https://www.mathjax.org)** - For LaTeX, MathML, and AsciiMath notations

* **[Chromium](https://github.com/chromium/chromium)** - Thanks for being so fast!

* HTML - For the web framework

* CSS - For styling components

* JavaScript - For magic!



---



## Contributing



Please read [CONTRIBUTING](CONTRIBUTING.md) for details on our [CODE OF CONDUCT](CODE_OF_CONDUCT.md), and the process for submitting pull requests to us.



---



## Continuous Integration



We use [Travis CI](https://travis-ci.com) for continuous integration. Check out our [Travis CI Status](https://travis-ci.com/liyasthomas/marcdown).



---



## Versioning



This 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).



---



## Change log



See the [CHANGELOG](CHANGELOG.md) file for details.



---



## Authors



### Lead Developers

* [**Liyas Thomas**](https://github.com/liyasthomas) - *Author*



### Thanks

* [MarkedJS](https://marked.js.org)

* [highlightjs](https://highlightjs.org)



See the list of [contributors](https://github.com/liyasthomas/marcdown/graphs/contributors) who participated in this project.



---



## License



This project is licensed under the [MIT License](https://opensource.org/licenses/MIT) - see the [LICENSE](LICENSE) file for details.



---



## Acknowledgments



* Hat tip to anyone who's code was used

* Inspirations:

	* [StackEdit](https://stackedit.io)

	* [Dribbble](https://dribbble.com)