👻 Lightweight realtime markdown viewer and editor - Simple, clean and beautiful https://liyasthomas.github.io/marcdown
MIT License
❤️ Lightweight and minimal: Crafted with minimalistic UI design
🔌 Real-time editor: WYSIWYG (what you see is what you get) markdown editor using MarkedJS
🖊️ Code highlighting: Syntax highlighting with highlightjs
📐 Math support: MathJax for LaTeX, MathML, and AsciiMath notations
🌐 PWA: Progressive web app.
⚡ 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!
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.
What things you need to install the software and how to install them.
<textarea></textarea>
tag.https://liyasthomas.github.io/marcdown
You're done!
A step by step series of examples that tell you've to get a development environment running.
<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>
<textarea id="getm" onkeyup="keyUp()"></textarea>
tag inside <body></body>
<textarea id="getm" placeholder="paste markdown here ✨" onkeyup="keyUp()"></textarea>
<div id="viewer"></div>
tag inside <body></body>
<div id="viewer"></div>
<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<></button>
<button onclick="apply('bc')" title="Block code"><>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>
<!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<></button>
<button onclick="apply('bc')" title="Block code"><>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>
Add additional notes about how to deploy this on a live system.
Will be explained later
Please read CONTRIBUTING for details on our CODE OF CONDUCT, and the process for submitting pull requests to us.
We use Travis CI for continuous integration. Check out our Travis CI Status.
This project is developed by Liyas Thomas using the Semantic Versioning specification. For the versions available, see the releases on this repository.
See the CHANGELOG file for details.
See the list of contributors who participated in this project.
This project is licensed under the MIT License - see the LICENSE file for details.