Skip to content
πŸ‘» Lightweight realtime markdown viewer and editor - Simple, clean and beautiful
JavaScript HTML CSS
Branch: master
Clone or download
liyasthomas Merge pull request #9 from mskian/master
Adjust Modal Box Close Button
Latest commit 1ac25e6 Oct 4, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.github Update issue templates May 26, 2019
icons πŸ”₯ New icons Jul 3, 2019
.travis.yml πŸŽ‰ Initial upload Apr 16, 2019
CHANGELOG.md πŸŽ‰ Initial upload Apr 16, 2019
CODE_OF_CONDUCT.md
CONTRIBUTING.md
LICENSE Initial commit Apr 16, 2019
README.md
favicon.ico πŸ”₯ New icons Jul 3, 2019
index.css Adjust Modal Box Close Button Oct 3, 2019
index.html Add orientation and Update start_url in Manifest Oct 4, 2019
index.js ✨ Added drag and drop feature Jul 12, 2019
manifest.json Add orientation and Update start_url in Manifest Oct 4, 2019
marcdown.html βš—οΈ Introducing Marcdown Library Jul 3, 2019
marcdown.js ✨ Marcdown Library Jul 2, 2019
package.json πŸ”– v0.3.0 Jul 2, 2019
sw.js Replace the Wrong File URL's in sw.js Oct 3, 2019
travis.js πŸŽ‰ Initial upload Apr 16, 2019

README.md

When I wrote this, only God and I understood what I was doing. Now, only God knows.
Liyas Thomas

Liyas Thomas

Built with ❀︎ by liyasthomas and contributors

Build Status GitHub release repo size license contributions welcome Website Donate

marcdown Marcdown

πŸ‘» Lightweight markdown viewer and editor by Liyas Thomas


marcdown marcdown

Features ✨

❀️ Lightweight and minimal: Crafted with minimalistic UI design

πŸ”Œ Real-time editor: WYSIWYG (what you see is what you get) markdown editor using MarkedJS

  • Built for speed
  • Light-weight while implementing all markdown features from the supported flavors & specifications.

πŸ–Š Code highlighting: Syntax highlighting with highlightjs

  • 185 languages and 89 styles
  • Automatic language detection
  • Multi-language code highlighting

πŸ“ Math support: MathJax for LaTeX, MathML, and AsciiMath notations

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

🌐 PWA: Progressive web app.

  • Works offline after first use
  • Install as a Web app on your phone or Desktop app on your PC

⚑️ Real-time viewer: View changes as you type

πŸ– Drag and drop: Grab a markdown file and drop to the editor

πŸ“œ Scroll sync: Editor and viewer scroll along with you

πŸŒ™ 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 <textarea></textarea> tag.
  • A browser with ES6 support.
  • Wonder! ❀️

Demo

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 and Marcdown.js

<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>

<script src="https://cdn.jsdelivr.net/gh/liyasthomas/marcdown/marcdown.min.js"></script>

Step 2: Define a <textarea id="getm" onkeyup="keyUp()"></textarea> tag inside <body></body>

<textarea id="getm" placeholder="paste markdown here ✨" onkeyup="keyUp()"></textarea>

Step 3: Define a <div id="viewer"></div> tag inside <body></body>

<div id="viewer"></div>

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

<button onclick="apply('bold')" title="Bold">B</button>

Full list of actions:

<button onclick="apply('bold')" title="Bold">B</button>

<button onclick="apply('italic')" title="Italic"><i>I</i></button>

<button onclick="apply('strike')" title="Strikethrough"><strike>S</strike></button>

<button onclick="apply('h1')" title="Header 1">H1</button>

<button onclick="apply('h2')" title="Header 2">H2</button>

<button onclick="apply('h3')" title="Header 3">H3</button>

<button onclick="apply('ul')" title="Unordered list">●</button>

<button onclick="apply('ol')" title="Ordered list">1.</button>

<button onclick="apply('check')" title="Check list">βœ”</button>

<button onclick="apply('bq')" title="Blockquote">””</button>

<button onclick="apply('ic')" title="Inline code">I&lt;></button>

<button onclick="apply('bc')" title="Block code">&lt;>B</button>

<button onclick="apply('link')" title="Link">A</button>

<button onclick="apply('image')" title="Image">I</button>

<button onclick="apply('hr')" title="Horizontal rule">β€”β€”</button>

<button onclick="apply('table')" title="Table">⚏</button>

Example HTML file:

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<title>Marcdown</title>
	<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
	<script src="https://cdn.jsdelivr.net/gh/liyasthomas/marcdown/marcdown.min.js"></script>
</head>

<body>
	<textarea id="getm" placeholder="paste markdown here ✨" onkeyup="keyUp()"></textarea>
	<button onclick="apply('bold')" title="Bold">B</button>
	<button onclick="apply('italic')" title="Italic"><i>I</i></button>
	<button onclick="apply('strike')" title="Strikethrough"><strike>S</strike></button>
	<button onclick="apply('h1')" title="Header 1">H1</button>
	<button onclick="apply('h2')" title="Header 2">H2</button>
	<button onclick="apply('h3')" title="Header 3">H3</button>
	<button onclick="apply('ul')" title="Unordered list">●</button>
	<button onclick="apply('ol')" title="Ordered list">1.</button>
	<button onclick="apply('check')" title="Check list">βœ”</button>
	<button onclick="apply('bq')" title="Blockquote">””</button>
	<button onclick="apply('ic')" title="Inline code">I&lt;></button>
	<button onclick="apply('bc')" title="Block code">&lt;>B</button>
	<button onclick="apply('link')" title="Link">A</button>
	<button onclick="apply('image')" title="Image">I</button>
	<button onclick="apply('hr')" title="Horizontal rule">β€”β€”</button>
	<button onclick="apply('table')" title="Table">⚏</button>
	<div class="markdown" id="viewer"></div>
</body>

</html>

Deployment

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

Will be explained later

Built with

  • MarkedJS - For markdown parser
  • highlightjs - For code highlighting
  • MathJax - For LaTeX, MathML, and AsciiMath notations
  • Chromium - Thanks for being so fast!
  • HTML - For the web framework
  • CSS - For styling components
  • JavaScript - For magic!

Contributing

Please read CONTRIBUTING for details on our CODE OF CONDUCT, and the process for submitting pull requests to us.


Continuous Integration

We use Travis CI for continuous integration. Check out our Travis CI Status.


Versioning

This project is developed by Liyas Thomas using the Semantic Versioning specification. For the versions available, see the releases on this repository.


Change log

See the CHANGELOG file for details.


Authors

Lead Developers

Testing and Debugging

Contributors

Thanks

See the list of contributors who participated in this project.


License

This project is licensed under the MIT License - see the LICENSE file for details.


Acknowledgments

You can’t perform that action at this time.