Free Markdown Editor & Preview

Markdown Editor & Preview

Write markdown and see the rendered preview in real time

The Markdown Editor provides a split-pane live preview where you write Markdown syntax on the left and see the rendered HTML output on the right, with a toolbar for common formatting shortcuts.

Markdown

<div class="mde-pane-label">Preview</div>
<div class="mde-preview" id="mdPreview"><p style="color:var(--sub);font-style:italic">Start typing to see the preview…</p></div>
</div>
</div>
<div class="mde-stats">
<span>Words: <strong id="wordCount">0</strong></span>
<span>Characters: <strong id="charCount">0</strong></span>
<span>Lines: <strong id="lineCount">0</strong></span>
</div>
<div class="mde-btn-row">
<button class="mde-btn" onclick="copyMarkdown()">Copy Markdown</button>
<button class="mde-btn secondary" onclick="copyHtml()">Copy HTML</button>
<button class="mde-btn secondary" onclick="clearEditor()">Clear</button>
</div>
</div>

<section class="aeo-faq">
  <h2>Frequently Asked Questions</h2>
  <div class="aeo-item"><p class="aeo-q">What is Markdown and how do I use it?</p><p class="aeo-a">Markdown is a lightweight text formatting syntax that converts to HTML. Use # for headings, **bold** for bold text, *italic* for italics, and – or * for bullet lists. The editor’s toolbar buttons insert the correct syntax at your cursor so you do not need to memorize every shortcut. The right pane shows the rendered result as you type.</p></div>
  <div class="aeo-item"><p class="aeo-q">How do I create a table in Markdown?</p><p class="aeo-a">Use pipes and dashes: | Column1 | Column2 | on the header row, then | — | — | as a separator, then | Data | Data | for each row. The toolbar’s table button inserts a ready-made template. For complex tables with many rows, the Markdown Table Generator tool on this site is faster because you fill in a visual grid instead.</p></div>
  <div class="aeo-item"><p class="aeo-q">How do I add a link in Markdown?</p><p class="aeo-a">The syntax is [Link Text](https://example.com). Replace Link Text with the words you want clickable and put the URL inside the parentheses. The editor’s link toolbar button inserts the brackets and parentheses for you. For images the syntax is the same but with an exclamation mark at the front: ![Alt text](image-url).</p></div>
  <div class="aeo-item"><p class="aeo-q">Can I export my Markdown document as HTML?</p><p class="aeo-a">Yes. The toolbar includes a button to copy the rendered HTML output from the preview pane. You can then paste the HTML into any website, email, or content management system. The tool also shows word count and character count so you can track document length while writing.</p></div>
  <div class="aeo-item"><p class="aeo-q">Does the Markdown editor save my work?</p><p class="aeo-a">The editor does not save to a server. Your text exists only in your browser session. If you refresh or close the tab, the content is lost. Before closing, use the Copy HTML or copy the Markdown text button to save your work externally, such as in a text file, Notion, or a writing app.</p></div>
</section>
<script type="application/ld+json">{"@context": "https://schema.org", "@type": "FAQPage", "mainEntity": [{"@type": "Question", "name": "What is Markdown and how do I use it?", "acceptedAnswer": {"@type": "Answer", "text": "Markdown is a lightweight text formatting syntax that converts to HTML. Use # for headings, **bold** for bold text, *italic* for italics, and - or * for bullet lists. The editor's toolbar buttons insert the correct syntax at your cursor so you do not need to memorize every shortcut. The right pane shows the rendered result as you type."}}, {"@type": "Question", "name": "How do I create a table in Markdown?", "acceptedAnswer": {"@type": "Answer", "text": "Use pipes and dashes: | Column1 | Column2 | on the header row, then | --- | --- | as a separator, then | Data | Data | for each row. The toolbar's table button inserts a ready-made template. For complex tables with many rows, the Markdown Table Generator tool on this site is faster because you fill in a visual grid instead."}}, {"@type": "Question", "name": "How do I add a link in Markdown?", "acceptedAnswer": {"@type": "Answer", "text": "The syntax is [Link Text](https://example.com). Replace Link Text with the words you want clickable and put the URL inside the parentheses. The editor's link toolbar button inserts the brackets and parentheses for you. For images the syntax is the same but with an exclamation mark at the front: ![Alt text](image-url)."}}, {"@type": "Question", "name": "Can I export my Markdown document as HTML?", "acceptedAnswer": {"@type": "Answer", "text": "Yes. The toolbar includes a button to copy the rendered HTML output from the preview pane. You can then paste the HTML into any website, email, or content management system. The tool also shows word count and character count so you can track document length while writing."}}, {"@type": "Question", "name": "Does the Markdown editor save my work?", "acceptedAnswer": {"@type": "Answer", "text": "The editor does not save to a server. Your text exists only in your browser session. If you refresh or close the tab, the content is lost. Before closing, use the Copy HTML or copy the Markdown text button to save your work externally, such as in a text file, Notion, or a writing app."}}]}</script>

<div class="footer-btns">
<a href="https://airusk.com/daily" class="footer-btn"><svg viewBox="0 0 24 24"><rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/><rect x="14" y="14" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/></svg>
All Daily Tools</a>
<button onclick="shareCalculator()" class="footer-btn"><svg viewBox="0 0 24 24"><circle cx="18" cy="5" r="3"/><circle cx="6" cy="12" r="3"/><circle cx="18" cy="19" r="3"/><line x1="8.59" y1="13.51" x2="15.42" y2="17.49"/><line x1="15.41" y1="6.51" x2="8.59" y2="10.49"/></svg>
Share Tool</button>
</div>
</div>
<div class="mde-toast" id="mdeToast">Copied!</div>
</div>
<script type="rocketlazyloadscript">
(function(){
var input = document.getElementById('mdInput');
var preview = document.getElementById('mdPreview');
var wordEl = document.getElementById('wordCount');
var charEl = document.getElementById('charCount');
var lineEl = document.getElementById('lineCount');
var toastEl = document.getElementById('mdeToast');
var toastTimer = null;

function showToast(msg) {
  toastEl.textContent = msg || 'Copied!';
  toastEl.classList.add('show');
  if (toastTimer) clearTimeout(toastTimer);
  toastTimer = setTimeout(function(){ toastEl.classList.remove('show'); }, 2000);
}

function escapeHtml(str) {
  return str.replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>').replace(/"/g, '"');
}

function parseMd(md) {
  var lines = md.split('\n');
  var html = '';
  var inCodeBlock = false;
  var codeBlockContent = '';
  var inList = '';
  var listItems = [];
  var tableRows = [];

for (var i = 0; i < lines.length; i++) {
    var line = lines[i];

// Code block toggle
    if (line.match(/^```/)) {
      if (inCodeBlock) {
        html += '<pre><code>' + escapeHtml(codeBlockContent) + '</code></pre>';
        codeBlockContent = '';
        inCodeBlock = false;
      } else {
        flushList();
        flushTable();
        inCodeBlock = true;
      }
      continue;
    }
    if (inCodeBlock) {
      codeBlockContent += (codeBlockContent ? '\n' : '') + line;
      continue;
    }

// Horizontal rule
    if (line.match(/^(---+|___+|\*\*\*+)\s*$/)) {
      flushList();
      flushTable();
      html += '<hr>';
      continue;
    }

// Headings
    var headingMatch = line.match(/^(#{1,6})\s+(.+)/);
    if (headingMatch) {
      flushList();
      flushTable();
      var level = headingMatch[1].length;
      html += '<h' + level + '>' + parseInline(headingMatch[2]) + '</h' + level + '>';
      continue;
    }

// Blockquote
    if (line.match(/^>\s?/)) {
      flushList();
      flushTable();
      var quoteText = line.replace(/^>\s?/, '');
      html += '<blockquote><p>' + parseInline(quoteText) + '</p></blockquote>';
      continue;
    }

// Unordered list
    var ulMatch = line.match(/^[\s]*[-*+]\s+(.+)/);
    if (ulMatch) {
      flushTable();
      if (inList !== 'ul') {
        flushList();
        inList = 'ul';
      }
      listItems.push(ulMatch[1]);
      continue;
    }

// Ordered list
    var olMatch = line.match(/^[\s]*\d+\.\s+(.+)/);
    if (olMatch) {
      flushTable();
      if (inList !== 'ol') {
        flushList();
        inList = 'ol';
      }
      listItems.push(olMatch[1]);
      continue;
    }

// Table row: line that starts with | (GFM table syntax)
    if (line.trim().charAt(0) === '|') {
      flushList();
      tableRows.push(line.trim());
      continue;
    }
    // If we were accumulating table rows but this line doesn't start with |, flush
    if (tableRows.length > 0) {
      flushTable();
    }

// Empty line
    if (line.trim() === '') {
      flushList();
      flushTable();
      continue;
    }

// Paragraph
    flushList();
    flushTable();
    html += '<p>' + parseInline(line) + '</p>';
  }

// Flush remaining
  if (inCodeBlock) {
    html += '<pre><code>' + escapeHtml(codeBlockContent) + '</code></pre>';
  }
  flushList();
  flushTable();

return html;
}

input.addEventListener('input', updatePreview);
updatePreview();

window.insertMd = function(type) {
  var start = input.selectionStart;
  var end = input.selectionEnd;
  var sel = input.value.substring(start, end);
  var before = input.value.substring(0, start);
  var after = input.value.substring(end);
  var insert = '';
  var cursorOffset = 0;

switch(type) {
    case 'heading':
      insert = '## ' + (sel || 'Heading');
      cursorOffset = sel ? insert.length : 3;
      break;
    case 'bold':
      insert = '**' + (sel || 'bold text') + '**';
      cursorOffset = sel ? insert.length : 2;
      break;
    case 'italic':
      insert = '*' + (sel || 'italic text') + '*';
      cursorOffset = sel ? insert.length : 1;
      break;
    case 'code':
      insert = '`' + (sel || 'code') + '`';
      cursorOffset = sel ? insert.length : 1;
      break;
    case 'codeblock':
      insert = '```\n' + (sel || 'code here') + '\n```';
      cursorOffset = sel ? insert.length : 4;
      break;
    case 'link':
      insert = '[' + (sel || 'link text') + '](url)';
      cursorOffset = sel ? insert.length : 1;
      break;
    case 'image':
      insert = '![' + (sel || 'alt text') + '](url)';
      cursorOffset = sel ? insert.length : 2;
      break;
    case 'ul':
      insert = '- ' + (sel || 'list item');
      cursorOffset = sel ? insert.length : 2;
      break;
    case 'ol':
      insert = '1. ' + (sel || 'list item');
      cursorOffset = sel ? insert.length : 3;
      break;
    case 'quote':
      insert = '> ' + (sel || 'quote');
      cursorOffset = sel ? insert.length : 2;
      break;
    case 'table':
      insert = '| Header 1 | Header 2 | Header 3 |\n| --- | --- | --- |\n| Cell 1 | Cell 2 | Cell 3 |\n| Cell 4 | Cell 5 | Cell 6 |';
      cursorOffset = insert.length;
      break;
    case 'hr':
      insert = '\n---\n';
      cursorOffset = insert.length;
      break;
  }

input.value = before + insert + after;
  input.focus();
  var newPos = start + cursorOffset;
  if (!sel ? type !== 'hr' : false) {
    // Select the placeholder text
    var placeholderStart = start + cursorOffset;
    var placeholderEnd = start + insert.length - cursorOffset;
    input.setSelectionRange(placeholderStart, placeholderEnd);
  } else {
    input.setSelectionRange(start + insert.length, start + insert.length);
  }
  updatePreview();
};

window.clearEditor = function() {
  input.value = '';
  updatePreview();
};

</div>
</article>
		</main>
	</div>

</div>
</div>

<div data-rocket-location-hash="b7fdb581c1cb2425077068cadb536249" class="site-footer grid-container">
			<footer class="site-info" aria-label="Site"  itemtype="https://schema.org/WPFooter" itemscope>
			<div data-rocket-location-hash="8c8b74ddcd00ab807a58057b92d5c22f" class="inside-site-info grid-container">
								<div class="copyright-bar">
					<p class="copyright">© 2003-2026 AIRUSK. All rights reserved.</p>				</div>
			</div>
		</footer>
		</div>

<nav id="generate-slideout-menu" class="main-navigation slideout-navigation do-overlay" itemtype="https://schema.org/SiteNavigationElement" itemscope>
			<div class="inside-navigation grid-container grid-parent">
				<button class="slideout-exit has-svg-icon"><span class="gp-icon pro-close">
				<svg viewBox="0 0 512 512" aria-hidden="true" role="img" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1em" height="1em">
					<path d="M71.029 71.029c9.373-9.372 24.569-9.372 33.942 0L256 222.059l151.029-151.03c9.373-9.372 24.569-9.372 33.942 0 9.372 9.373 9.372 24.569 0 33.942L289.941 256l151.03 151.029c9.372 9.373 9.372 24.569 0 33.942-9.373 9.372-24.569 9.372-33.942 0L256 289.941l-151.029 151.03c-9.373 9.372-24.569 9.372-33.942 0-9.372-9.373-9.372-24.569 0-33.942L222.059 256 71.029 104.971c-9.372-9.373-9.372-24.569 0-33.942z" />
				</svg>
			</span> <span class="screen-reader-text">Close</span></button><div class="main-nav"><ul id="menu-primary-rumour-1" class=" slideout-menu"><li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-2721"><a href="https://airusk.com/health">Calculator</a></li>
</ul></div>			</div>
		</nav>

//# sourceURL=rocket-preload-links-js-after
</script>
<script id="rocket_lazyload_css-js-extra">
var rocket_lazyload_css_data = {"threshold":"300"};
//# sourceURL=rocket_lazyload_css-js-extra
</script>
<script id="rocket_lazyload_css-js-after">
!function o(n,c,a){function u(t,e){if(!c[t]){if(!n[t]){var r="function"==typeof require&&require;if(!e&&r)return r(t,!0);if(s)return s(t,!0);throw(e=new Error("Cannot find module '"+t+"'")).code="MODULE_NOT_FOUND",e}r=c[t]={exports:{}},n[t][0].call(r.exports,function(e){return u(n[t][1][e]||e)},r,r.exports,o,n,c,a)}return c[t].exports}for(var s="function"==typeof require&&require,e=0;e<a.length;e++)u(a[e]);return u}({1:[function(e,t,r){"use strict";{const c="undefined"==typeof rocket_pairs?[]:rocket_pairs,a=(("undefined"==typeof rocket_excluded_pairs?[]:rocket_excluded_pairs).map(t=>{var e=t.selector;document.querySelectorAll(e).forEach(e=>{e.setAttribute("data-rocket-lazy-bg-"+t.hash,"excluded")})}),document.querySelector("#wpr-lazyload-bg-container"));var o=rocket_lazyload_css_data.threshold||300;const u=new IntersectionObserver(e=>{e.forEach(t=>{t.isIntersecting&&c.filter(e=>t.target.matches(e.selector)).map(t=>{var e;t&&((e=document.createElement("style")).textContent=t.style,a.insertAdjacentElement("afterend",e),t.elements.forEach(e=>{u.unobserve(e),e.setAttribute("data-rocket-lazy-bg-"+t.hash,"loaded")}))})})},{rootMargin:o+"px"});function n(){0<(0<arguments.length&&void 0!==arguments[0]?arguments[0]:[]).length&&c.forEach(t=>{try{document.querySelectorAll(t.selector).forEach(e=>{"loaded"!==e.getAttribute("data-rocket-lazy-bg-"+t.hash)&&"excluded"!==e.getAttribute("data-rocket-lazy-bg-"+t.hash)&&(u.observe(e),(t.elements||=[]).push(e))})}catch(e){console.error(e)}})}n(),function(){const r=window.MutationObserver;return function(e,t){if(e&&1===e.nodeType)return(t=new r(t)).observe(e,{attributes:!0,childList:!0,subtree:!0}),t}}()(document.querySelector("body"),n)}},{}]},{},[1]);
//# sourceURL=rocket_lazyload_css-js-after
</script>
<script type="rocketlazyloadscript" data-minify="1" id="calc-nav-js" data-rocket-src="https://airusk.com/wp-content/cache/min/1/theme-setting/calc-nav-v2.js?ver=1782271440" data-rocket-defer defer></script>
<script type="rocketlazyloadscript" id="generate-menu-js-before">
var generatepressMenu = {"toggleOpenedSubMenus":true,"openSubMenuLabel":"Open Sub-Menu","closeSubMenuLabel":"Close Sub-Menu"};
//# sourceURL=generate-menu-js-before
</script>
<script type="rocketlazyloadscript" id="generate-menu-js" data-rocket-src="https://airusk.com/wp-content/themes/generatepress/assets/js/menu.min.js?ver=3.6.1" data-rocket-defer defer></script>
<script type="rocketlazyloadscript" data-minify="1" id="generate-modal-js" data-rocket-src="https://airusk.com/wp-content/cache/min/1/wp-content/themes/generatepress/assets/dist/modal.js?ver=1782270958" data-rocket-defer defer></script>
<script type="rocketlazyloadscript" id="heartbeat-js" data-rocket-src="https://airusk.com/wp-content/plugins/wp-rocket/assets/js/heartbeat.js?ver=3.20.1.2" data-rocket-defer defer></script>
<script>window.lazyLoadOptions=[{elements_selector:"img[data-lazy-src],.rocket-lazyload,iframe[data-lazy-src]",data_src:"lazy-src",data_srcset:"lazy-srcset",data_sizes:"lazy-sizes",class_loading:"lazyloading",class_loaded:"lazyloaded",threshold:300,callback_loaded:function(element){if(element.tagName==="IFRAME"&&element.dataset.rocketLazyload=="fitvidscompatible"){if(element.classList.contains("lazyloaded")){if(typeof window.jQuery!="undefined"){if(jQuery.fn.fitVids){jQuery(element).parent().fitVids()}}}}}},{elements_selector:".rocket-lazyload",data_src:"lazy-src",data_srcset:"lazy-srcset",data_sizes:"lazy-sizes",class_loading:"lazyloading",class_loaded:"lazyloaded",threshold:300,}];window.addEventListener('LazyLoad::Initialized',function(e){var lazyLoadInstance=e.detail.instance;if(window.MutationObserver){var observer=new MutationObserver(function(mutations){var image_count=0;var iframe_count=0;var rocketlazy_count=0;mutations.forEach(function(mutation){for(var i=0;i<mutation.addedNodes.length;i++){if(typeof mutation.addedNodes[i].getElementsByTagName!=='function'){continue}
if(typeof mutation.addedNodes[i].getElementsByClassName!=='function'){continue}
images=mutation.addedNodes[i].getElementsByTagName('img');is_image=mutation.addedNodes[i].tagName=="IMG";iframes=mutation.addedNodes[i].getElementsByTagName('iframe');is_iframe=mutation.addedNodes[i].tagName=="IFRAME";rocket_lazy=mutation.addedNodes[i].getElementsByClassName('rocket-lazyload');image_count+=images.length;iframe_count+=iframes.length;rocketlazy_count+=rocket_lazy.length;if(is_image){image_count+=1}
if(is_iframe){iframe_count+=1}}});if(image_count>0||iframe_count>0||rocketlazy_count>0){lazyLoadInstance.update()}});var b=document.getElementsByTagName("body")[0];var config={childList:!0,subtree:!0};observer.observe(b,config)}},!1)</script><script data-no-minify="1" async src="https://airusk.com/wp-content/plugins/wp-rocket/assets/js/lazyload/17.8.3/lazyload.min.js"></script><script>function lazyLoadThumb(e,alt,l){var t='<img data-lazy-src="https://i.ytimg.com/vi/ID/hqdefault.jpg" alt="" width="480" height="360"><noscript><img src="https://i.ytimg.com/vi/ID/hqdefault.jpg" alt="" width="480" height="360"></noscript>',a='<button class="play" aria-label="Play Youtube video"></button>';if(l){t=t.replace('data-lazy-','');t=t.replace('loading="lazy"','');t=t.replace(/<noscript>.*?<\/noscript>/g,'');}t=t.replace('alt=""','alt="'+alt+'"');return t.replace("ID",e)+a}function lazyLoadYoutubeIframe(){var e=document.createElement("iframe"),t="ID?autoplay=1";t+=0===this.parentNode.dataset.query.length?"":"&"+this.parentNode.dataset.query;e.setAttribute("src",t.replace("ID",this.parentNode.dataset.src)),e.setAttribute("frameborder","0"),e.setAttribute("allowfullscreen","1"),e.setAttribute("allow","accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"),this.parentNode.parentNode.replaceChild(e,this.parentNode)}document.addEventListener("DOMContentLoaded",function(){var exclusions=[];var e,t,p,u,l,a=document.getElementsByClassName("rll-youtube-player");for(t=0;t<a.length;t++)(e=document.createElement("div")),(u='https://i.ytimg.com/vi/ID/hqdefault.jpg'),(u=u.replace('ID',a[t].dataset.id)),(l=exclusions.some(exclusion=>u.includes(exclusion))),e.setAttribute("data-id",a[t].dataset.id),e.setAttribute("data-query",a[t].dataset.query),e.setAttribute("data-src",a[t].dataset.src),(e.innerHTML=lazyLoadThumb(a[t].dataset.id,a[t].dataset.alt,l)),a[t].appendChild(e),(p=e.querySelector(".play")),(p.onclick=lazyLoadYoutubeIframe)});</script>
<script>var rocket_beacon_data = {"ajax_url":"https:\/\/airusk.com\/wp-admin\/admin-ajax.php","nonce":"3e32b49b8d","url":"https:\/\/airusk.com\/daily\/markdown-editor","is_mobile":false,"width_threshold":1600,"height_threshold":700,"delay":500,"debug":null,"status":{"atf":true,"lrc":true,"preload_fonts":true,"preconnect_external_domain":true},"elements":"img, video, picture, p, main, div, li, svg, section, header, span","lrc_threshold":1800,"preload_fonts_exclusions":["api.fontshare.com","cdn.fontshare.com"],"processed_extensions":["woff2","woff","ttf"],"external_font_exclusions":[],"preconnect_external_domain_elements":["link","script","iframe"],"preconnect_external_domain_exclusions":["static.cloudflareinsights.com","rel=\"profile\"","rel=\"preconnect\"","rel=\"dns-prefetch\"","rel=\"icon\""]}</script><script data-name="wpr-wpr-beacon" src='https://airusk.com/wp-content/plugins/wp-rocket/assets/js/wpr-beacon.min.js' async></script></body>
</html>