{"id":805,"date":"2026-03-29T08:15:35","date_gmt":"2026-03-29T08:15:35","guid":{"rendered":"https:\/\/primetoolhub.com\/?page_id=805"},"modified":"2026-07-16T03:58:28","modified_gmt":"2026-07-16T03:58:28","slug":"markdown-to-html-converter","status":"publish","type":"page","link":"https:\/\/schoolict.net\/tools\/markdown-to-html-converter\/","title":{"rendered":"Markdown to HTML Converter"},"content":{"rendered":"\n<div class=\"pth-hero-section\">\n    <div class=\"pth-hero-content\">\n        <h2>Markdown in, clean HTML out \u2014 and back again<\/h2>\n  <p>Most Markdown tools do one direction: type Markdown, see HTML. This studio does the whole loop. Write with a live preview, convert either way between Markdown and HTML, build a table by clicking instead of counting pipe characters, and generate a proper README from a short form. Here is how each part fits into a real workflow.<\/p>\n        <div id=\"pth-toc-placeholder\"><\/div>\n    <\/div>\n  \n   <div class=\"pth-hero-image\">\n\t<img data-no-lazy=\"1\"\n         src=\"https:\/\/schoolict.net\/tools\/wp-content\/uploads\/2026\/03\/markdown-to-html-converter-800x447.jpeg\"\n         width=\"800\"\n         height=\"447\"\n         alt=\"Markdown in, clean HTML out\"\n         fetchpriority=\"high\"\n         loading=\"eager\"\n         decoding=\"async\"\n         style=\"width:100%; height:auto; display:block;\">\n  <\/div>\n<\/div>\n\n\n\n\n<div class=\"wp-block-rank-math-toc-block\" id=\"rank-math-toc\"><h2>Table of Contents<\/h2><nav><ul><li><a href=\"#\ud83d\udd34-writing-with-the-toolbar-and-the-live-preview\">\ud83d\udd34\u00a0Writing with the toolbar and the live preview<\/a><\/li><li><a href=\"#\ud83d\udfe1-converting-in-both-directions\">\ud83d\udfe1\u00a0Converting in both directions<\/a><\/li><li><a href=\"#\ud83d\udfe2-the-table-builder-and-the-readme-generator\">\ud83d\udfe2\u00a0The table builder and the README generator<\/a><\/li><\/ul><\/nav><\/div>\n\n\n<!-- LSCACHE_DISABLE -->\r\n<div id=\"pth-mds-studio-wrapper\">\r\n<style>\r\n#pth-mds-studio-wrapper{font-family:'Inter',system-ui,-apple-system,sans-serif;max-width:1200px;margin:0 auto;box-sizing:border-box;background:#f8fafc;padding:20px;border-radius:18px;color:#0f172a}\r\n#pth-mds-studio-wrapper.pth-mds-full{max-width:1750px}\r\n#pth-mds-studio-wrapper *{box-sizing:border-box;min-width:0}\r\n#pth-mds-studio-wrapper .pth-mds-top{background:#fff;border:1px solid #e2e8f0;border-radius:14px;padding:18px 22px;margin-bottom:16px;box-shadow:0 4px 10px rgba(0,0,0,.04)}\r\n#pth-mds-studio-wrapper .pth-mds-title{font-size:1.5rem;font-weight:800;color:#0f172a;margin:0;display:flex;align-items:center;gap:10px}\r\n#pth-mds-studio-wrapper .pth-mds-sub{font-size:.9rem;color:#475569;font-weight:500;margin-top:4px}\r\n#pth-mds-studio-wrapper .pth-mds-bar{display:flex;flex-wrap:wrap;gap:9px;align-items:center;margin-top:14px}\r\n#pth-mds-studio-wrapper .pth-mds-btn{background:#2563eb;color:#fff;border:none;border-radius:8px;padding:10px 16px;font-weight:700;font-size:.88rem;cursor:pointer;transition:.2s;font-family:inherit}\r\n#pth-mds-studio-wrapper .pth-mds-btn:hover{background:#1d4ed8}\r\n#pth-mds-studio-wrapper .pth-mds-btn.pth-mds-ghost{background:#f1f5f9;color:#334155;border:1px solid #cbd5e1}\r\n#pth-mds-studio-wrapper .pth-mds-btn.pth-mds-ghost:hover{background:#e2e8f0}\r\n#pth-mds-studio-wrapper .pth-mds-btn.pth-mds-green{background:#047857}\r\n#pth-mds-studio-wrapper .pth-mds-btn.pth-mds-green:hover{background:#065f46}\r\n#pth-mds-studio-wrapper .pth-mds-tabs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}\r\n#pth-mds-studio-wrapper .pth-mds-tab{background:#fff;border:1px solid #cbd5e1;color:#334155;font-weight:700;font-size:.88rem;padding:10px 15px;border-radius:10px;cursor:pointer;transition:.2s;font-family:inherit}\r\n#pth-mds-studio-wrapper .pth-mds-tab:hover{border-color:#2563eb;color:#2563eb}\r\n#pth-mds-studio-wrapper .pth-mds-tab.pth-mds-on{background:#2563eb;border-color:#2563eb;color:#fff}\r\n#pth-mds-studio-wrapper .pth-mds-panel{display:none}\r\n#pth-mds-studio-wrapper .pth-mds-panel.pth-mds-show{display:block}\r\n#pth-mds-studio-wrapper .pth-mds-card{background:#fff;border:1px solid #e2e8f0;border-radius:12px;padding:18px;margin-bottom:16px;box-shadow:0 4px 6px -1px rgba(0,0,0,.02)}\r\n#pth-mds-studio-wrapper .pth-mds-h{font-size:1rem;font-weight:800;color:#1e293b;margin:0 0 13px;padding-bottom:11px;border-bottom:2px solid #e2e8f0;display:flex;align-items:center;gap:8px;justify-content:space-between;flex-wrap:wrap}\r\n#pth-mds-studio-wrapper .pth-mds-h span.pth-mds-hl{display:flex;align-items:center;gap:8px}\r\n#pth-mds-studio-wrapper label{font-size:.8rem;font-weight:700;color:#334155;display:block;margin-bottom:5px}\r\n#pth-mds-studio-wrapper input[type=text],#pth-mds-studio-wrapper input[type=number],#pth-mds-studio-wrapper textarea,#pth-mds-studio-wrapper select{width:100%;padding:9px 11px;border:1px solid #cbd5e1;border-radius:8px;font-size:.88rem;font-family:inherit;color:#0f172a;background:#fff;outline:none;transition:.2s}\r\n#pth-mds-studio-wrapper input:focus,#pth-mds-studio-wrapper textarea:focus,#pth-mds-studio-wrapper select:focus{border-color:#2563eb;box-shadow:0 0 0 3px rgba(37,99,235,.12)}\r\n#pth-mds-studio-wrapper .pth-mds-split{display:grid;grid-template-columns:1fr 1fr;gap:14px}\r\n@media(max-width:900px){#pth-mds-studio-wrapper .pth-mds-split{grid-template-columns:1fr}}\r\n#pth-mds-studio-wrapper .pth-mds-tools{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:9px}\r\n#pth-mds-studio-wrapper .pth-mds-tbtn{background:#f1f5f9;border:1px solid #cbd5e1;color:#334155;border-radius:7px;padding:6px 10px;font-weight:700;font-size:.8rem;cursor:pointer;font-family:inherit;min-width:34px}\r\n#pth-mds-studio-wrapper .pth-mds-tbtn:hover{background:#e2e8f0;color:#2563eb}\r\n#pth-mds-studio-wrapper textarea.pth-mds-src{min-height:430px;resize:vertical;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.86rem;line-height:1.65;background:#0f172a;color:#e2e8f0;border-color:#334155}\r\n#pth-mds-studio-wrapper textarea.pth-mds-src:focus{border-color:#2563eb}\r\n#pth-mds-studio-wrapper .pth-mds-prev{border:1px solid #cbd5e1;border-radius:8px;background:#fff;padding:18px 20px;min-height:430px;max-height:640px;overflow:auto;line-height:1.7;color:#1e293b}\r\n#pth-mds-studio-wrapper .pth-mds-prev h1,#pth-mds-studio-wrapper .pth-mds-prev h2,#pth-mds-studio-wrapper .pth-mds-prev h3,#pth-mds-studio-wrapper .pth-mds-prev h4{color:#0f172a;font-weight:800;line-height:1.35;margin:1.2em 0 .5em}\r\n#pth-mds-studio-wrapper .pth-mds-prev h1{font-size:1.6rem;border-bottom:2px solid #e2e8f0;padding-bottom:8px}\r\n#pth-mds-studio-wrapper .pth-mds-prev h2{font-size:1.3rem}\r\n#pth-mds-studio-wrapper .pth-mds-prev h3{font-size:1.1rem}\r\n#pth-mds-studio-wrapper .pth-mds-prev p{margin:.7em 0}\r\n#pth-mds-studio-wrapper .pth-mds-prev a{color:#1d4ed8;font-weight:600}\r\n#pth-mds-studio-wrapper .pth-mds-prev code{background:#f1f5f9;color:#b91c1c;padding:2px 6px;border-radius:5px;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.88em}\r\n#pth-mds-studio-wrapper .pth-mds-prev pre{background:#0f172a;border-radius:8px;padding:14px 16px;overflow-x:auto;margin:1em 0}\r\n#pth-mds-studio-wrapper .pth-mds-prev pre code{background:none;color:#e2e8f0;padding:0;font-size:.85rem;line-height:1.6}\r\n#pth-mds-studio-wrapper .pth-mds-prev blockquote{border-left:4px solid #2563eb;background:#f8fafc;margin:1em 0;padding:10px 16px;color:#334155}\r\n#pth-mds-studio-wrapper .pth-mds-prev table{border-collapse:collapse;width:100%;margin:1em 0;font-size:.9rem}\r\n#pth-mds-studio-wrapper .pth-mds-prev th{background:#f1f5f9;border:1px solid #cbd5e1;padding:8px 11px;font-weight:800;color:#0f172a}\r\n#pth-mds-studio-wrapper .pth-mds-prev td{border:1px solid #e2e8f0;padding:8px 11px;color:#334155}\r\n#pth-mds-studio-wrapper .pth-mds-prev img{max-width:100%;height:auto;border-radius:8px}\r\n#pth-mds-studio-wrapper .pth-mds-prev hr{border:none;border-top:1px solid #e2e8f0;margin:1.4em 0}\r\n#pth-mds-studio-wrapper .pth-mds-prev li.task{list-style:none;margin-left:-1.2em}\r\n#pth-mds-studio-wrapper .pth-mds-stats{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px}\r\n#pth-mds-studio-wrapper .pth-mds-stat{flex:1;min-width:100px;background:#f8fafc;border:1px solid #e2e8f0;border-radius:9px;padding:11px;text-align:center}\r\n#pth-mds-studio-wrapper .pth-mds-stat b{display:block;font-size:1.25rem;color:#2563eb;font-weight:800}\r\n#pth-mds-studio-wrapper .pth-mds-stat span{font-size:.72rem;color:#475569;font-weight:700;text-transform:uppercase;letter-spacing:.4px}\r\n#pth-mds-studio-wrapper .pth-mds-out{background:#0f172a;color:#e2e8f0;border-radius:9px;padding:14px 16px;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.83rem;line-height:1.6;white-space:pre-wrap;word-break:break-word;max-height:340px;overflow:auto;min-height:110px}\r\n#pth-mds-studio-wrapper .pth-mds-outhead{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;gap:10px;flex-wrap:wrap}\r\n#pth-mds-studio-wrapper .pth-mds-outhead b{font-size:.78rem;color:#334155;text-transform:uppercase;letter-spacing:.5px;font-weight:800}\r\n#pth-mds-studio-wrapper .pth-mds-mini{background:#f1f5f9;color:#334155;border:1px solid #cbd5e1;border-radius:7px;padding:6px 12px;font-weight:700;font-size:.78rem;cursor:pointer;font-family:inherit}\r\n#pth-mds-studio-wrapper .pth-mds-mini:hover{background:#e2e8f0}\r\n#pth-mds-studio-wrapper table.pth-mds-grid{border-collapse:collapse;width:100%;font-size:.85rem}\r\n#pth-mds-studio-wrapper table.pth-mds-grid td,#pth-mds-studio-wrapper table.pth-mds-grid th{border:1px solid #cbd5e1;padding:0}\r\n#pth-mds-studio-wrapper table.pth-mds-grid input{border:none;border-radius:0;padding:8px 10px;font-size:.85rem}\r\n#pth-mds-studio-wrapper table.pth-mds-grid input:focus{box-shadow:inset 0 0 0 2px #2563eb}\r\n#pth-mds-studio-wrapper table.pth-mds-grid th{background:#f1f5f9}\r\n#pth-mds-studio-wrapper table.pth-mds-grid th input{background:#f1f5f9;font-weight:800;color:#0f172a}\r\n#pth-mds-studio-wrapper .pth-mds-aligns{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}\r\n#pth-mds-studio-wrapper .pth-mds-ref{width:100%;border-collapse:collapse;font-size:.86rem}\r\n#pth-mds-studio-wrapper .pth-mds-ref th{background:#f1f5f9;color:#1e293b;font-weight:800;text-align:left;padding:10px 12px;border-bottom:2px solid #e2e8f0;position:sticky;top:0}\r\n#pth-mds-studio-wrapper .pth-mds-ref td{padding:9px 12px;border-bottom:1px solid #e2e8f0;color:#334155;vertical-align:top}\r\n#pth-mds-studio-wrapper .pth-mds-ref td code{background:#f1f5f9;color:#b91c1c;padding:2px 6px;border-radius:5px;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.85em;white-space:pre-wrap}\r\n#pth-mds-studio-wrapper .pth-mds-tblwrap{max-height:540px;overflow:auto;border:1px solid #e2e8f0;border-radius:10px}\r\n#pth-mds-studio-wrapper .pth-mds-hint{font-size:.82rem;color:#475569;margin-top:9px;line-height:1.55}\r\n#pth-mds-studio-wrapper .pth-mds-note{background:#eff6ff;border:1px solid #bfdbfe;color:#1e3a8a;font-size:.83rem;font-weight:600;padding:11px 14px;border-radius:8px;margin-top:12px;line-height:1.55}\r\n#pth-mds-studio-wrapper .pth-mds-xlink{color:#1d4ed8;font-weight:700;text-decoration:none}\r\n#pth-mds-studio-wrapper .pth-mds-xlink:hover{text-decoration:underline}\r\n#pth-mds-studio-wrapper .pth-mds-chk{display:inline-flex;align-items:center;gap:6px;font-size:.85rem;font-weight:700;color:#334155;cursor:pointer;margin-right:12px}\r\n#pth-mds-studio-wrapper .pth-mds-toast{position:fixed;bottom:22px;right:22px;background:#0f172a;color:#fff;font-weight:700;font-size:.86rem;padding:12px 20px;border-radius:9px;box-shadow:0 10px 30px rgba(0,0,0,.3);z-index:99999;opacity:0;transform:translateY(10px);transition:.3s;pointer-events:none}\r\n#pth-mds-studio-wrapper .pth-mds-toast.pth-mds-tshow{opacity:1;transform:translateY(0)}\r\n@media(max-width:768px){#pth-mds-studio-wrapper{padding:14px}}\r\n<\/style>\r\n\r\n<div class=\"pth-mds-top\">\r\n  <h2 class=\"pth-mds-title\">\ud83d\udcdd Markdown Studio Pro<\/h2>\r\n  <div class=\"pth-mds-sub\">Write Markdown with a live preview, convert both ways between Markdown and HTML, build tables visually, generate a README, and look up any syntax \u2014 all offline in your browser.<\/div>\r\n  <div class=\"pth-mds-bar\">\r\n    <button class=\"pth-mds-btn pth-mds-ghost\" id=\"pth-mds-sample\">\ud83d\udca1 Load Sample<\/button>\r\n    <button class=\"pth-mds-btn pth-mds-ghost\" id=\"pth-mds-full\">\u26f6 Full Width<\/button>\r\n    <button class=\"pth-mds-btn pth-mds-ghost\" id=\"pth-mds-clear\">\ud83d\uddd1\ufe0f Clear<\/button>\r\n  <\/div>\r\n<\/div>\r\n\r\n<div class=\"pth-mds-tabs\" role=\"tablist\">\r\n  <button class=\"pth-mds-tab pth-mds-on\" data-tab=\"edit\">\ud83d\udcdd Editor &amp; Preview<\/button>\r\n  <button class=\"pth-mds-tab\" data-tab=\"conv\">\ud83d\udd04 Convert &amp; Export<\/button>\r\n  <button class=\"pth-mds-tab\" data-tab=\"table\">\ud83d\udcca Table Builder<\/button>\r\n  <button class=\"pth-mds-tab\" data-tab=\"readme\">\ud83d\udcc4 README Builder<\/button>\r\n  <button class=\"pth-mds-tab\" data-tab=\"ref\">\ud83d\udcd6 Syntax Reference<\/button>\r\n<\/div>\r\n\r\n<!-- TAB 1 -->\r\n<div class=\"pth-mds-panel pth-mds-show\" id=\"pth-mds-panel-edit\">\r\n  <div class=\"pth-mds-split\">\r\n    <div>\r\n      <div class=\"pth-mds-tools\">\r\n        <button class=\"pth-mds-tbtn\" data-md=\"h\">H2<\/button>\r\n        <button class=\"pth-mds-tbtn\" data-md=\"b\"><strong>B<\/strong><\/button>\r\n        <button class=\"pth-mds-tbtn\" data-md=\"i\"><em>I<\/em><\/button>\r\n        <button class=\"pth-mds-tbtn\" data-md=\"s\">S<\/button>\r\n        <button class=\"pth-mds-tbtn\" data-md=\"code\">&lt;\/&gt;<\/button>\r\n        <button class=\"pth-mds-tbtn\" data-md=\"fence\">Block<\/button>\r\n        <button class=\"pth-mds-tbtn\" data-md=\"link\">\ud83d\udd17<\/button>\r\n        <button class=\"pth-mds-tbtn\" data-md=\"img\">\ud83d\uddbc\ufe0f<\/button>\r\n        <button class=\"pth-mds-tbtn\" data-md=\"ul\">\u2022 List<\/button>\r\n        <button class=\"pth-mds-tbtn\" data-md=\"ol\">1. List<\/button>\r\n        <button class=\"pth-mds-tbtn\" data-md=\"task\">\u2611 Task<\/button>\r\n        <button class=\"pth-mds-tbtn\" data-md=\"quote\">\u275d<\/button>\r\n        <button class=\"pth-mds-tbtn\" data-md=\"hr\">\u2015<\/button>\r\n        <button class=\"pth-mds-tbtn\" data-md=\"toc\">TOC<\/button>\r\n      <\/div>\r\n      <textarea class=\"pth-mds-src\" id=\"pth-mds-src\" spellcheck=\"false\"><\/textarea>\r\n      <div class=\"pth-mds-stats\" id=\"pth-mds-stats\"><\/div>\r\n    <\/div>\r\n    <div>\r\n      <div class=\"pth-mds-outhead\"><b>Live preview<\/b>\r\n        <span><label class=\"pth-mds-chk\"><input type=\"checkbox\" id=\"pth-mds-sync\" checked> Sync scroll<\/label><\/span>\r\n      <\/div>\r\n      <div class=\"pth-mds-prev\" id=\"pth-mds-prev\"><\/div>\r\n    <\/div>\r\n  <\/div>\r\n<\/div>\r\n\r\n<!-- TAB 2 -->\r\n<div class=\"pth-mds-panel\" id=\"pth-mds-panel-conv\">\r\n  <div class=\"pth-mds-card\">\r\n    <div class=\"pth-mds-h\"><span class=\"pth-mds-hl\">\u27a1\ufe0f Markdown to HTML<\/span><\/div>\r\n    <div class=\"pth-mds-hint\" style=\"margin-top:0\">Converts whatever is in the Editor tab into clean, semantic HTML you can paste into a CMS or a page.<\/div>\r\n    <div class=\"pth-mds-outhead\" style=\"margin-top:12px\"><b>HTML output<\/b>\r\n      <span>\r\n        <button class=\"pth-mds-mini\" data-copy=\"pth-mds-htmlout\">\ud83d\udccb Copy<\/button>\r\n        <button class=\"pth-mds-mini\" id=\"pth-mds-dlhtml\" style=\"margin-left:6px\">\u2b07\ufe0f .html<\/button>\r\n        <button class=\"pth-mds-mini\" id=\"pth-mds-dlmd\" style=\"margin-left:6px\">\u2b07\ufe0f .md<\/button>\r\n      <\/span>\r\n    <\/div>\r\n    <div class=\"pth-mds-out\" id=\"pth-mds-htmlout\"><\/div>\r\n  <\/div>\r\n  <div class=\"pth-mds-card\">\r\n    <div class=\"pth-mds-h\"><span class=\"pth-mds-hl\">\u2b05\ufe0f HTML to Markdown<\/span><\/div>\r\n    <div class=\"pth-mds-hint\" style=\"margin-top:0\">Paste HTML from a page or an editor and get Markdown back. Headings, links, lists, tables, code blocks and emphasis are all mapped.<\/div>\r\n    <label for=\"pth-mds-htmlin\" style=\"margin-top:12px\">Paste HTML<\/label>\r\n    <textarea id=\"pth-mds-htmlin\" spellcheck=\"false\" style=\"min-height:130px;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.84rem\"><\/textarea>\r\n    <div class=\"pth-mds-bar\">\r\n      <button class=\"pth-mds-btn\" id=\"pth-mds-toMd\">\ud83d\udd04 Convert to Markdown<\/button>\r\n      <button class=\"pth-mds-btn pth-mds-ghost\" id=\"pth-mds-sendEditor\">\ud83d\udcdd Send to Editor<\/button>\r\n    <\/div>\r\n    <div class=\"pth-mds-outhead\" style=\"margin-top:6px\"><b>Markdown output<\/b><button class=\"pth-mds-mini\" data-copy=\"pth-mds-mdout\">\ud83d\udccb Copy<\/button><\/div>\r\n    <div class=\"pth-mds-out\" id=\"pth-mds-mdout\"><\/div>\r\n  <\/div>\r\n  <div class=\"pth-mds-note\">Comparing two versions of a document? Use the <a class=\"pth-mds-xlink\" href=\"\/text-diff-checker-comparator\/\" target=\"_blank\" rel=\"noopener\">Text Diff Checker<\/a>. Need to hand-edit the HTML afterwards? Open the <a class=\"pth-mds-xlink\" href=\"\/offline-html-editor-with-css-js\/\" target=\"_blank\" rel=\"noopener\">Web Studio<\/a>.<\/div>\r\n<\/div>\r\n\r\n<!-- TAB 3 -->\r\n<div class=\"pth-mds-panel\" id=\"pth-mds-panel-table\">\r\n  <div class=\"pth-mds-card\">\r\n    <div class=\"pth-mds-h\"><span class=\"pth-mds-hl\">\ud83d\udcca Build a Table Visually<\/span><\/div>\r\n    <div class=\"pth-mds-bar\" style=\"margin-top:0\">\r\n      <button class=\"pth-mds-mini\" id=\"pth-mds-addrow\">\u2795 Row<\/button>\r\n      <button class=\"pth-mds-mini\" id=\"pth-mds-delrow\">\u2796 Row<\/button>\r\n      <button class=\"pth-mds-mini\" id=\"pth-mds-addcol\">\u2795 Column<\/button>\r\n      <button class=\"pth-mds-mini\" id=\"pth-mds-delcol\">\u2796 Column<\/button>\r\n    <\/div>\r\n    <div style=\"overflow:auto;margin-top:12px\"><table class=\"pth-mds-grid\" id=\"pth-mds-grid\"><\/table><\/div>\r\n    <div class=\"pth-mds-aligns\" id=\"pth-mds-aligns\"><\/div>\r\n    <div class=\"pth-mds-hint\">Type straight into the cells. The alignment buttons set the colon markers in the separator row.<\/div>\r\n  <\/div>\r\n  <div class=\"pth-mds-card\">\r\n    <div class=\"pth-mds-h\"><span class=\"pth-mds-hl\">\ud83d\udce5 Import from CSV<\/span><\/div>\r\n    <label for=\"pth-mds-csv\">Paste CSV (first row is the header)<\/label>\r\n    <textarea id=\"pth-mds-csv\" spellcheck=\"false\" placeholder=\"Name,Qty,Price&#10;Nut,3,0.10&#10;Bolt,12,0.25\" style=\"min-height:90px;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.84rem\"><\/textarea>\r\n    <div class=\"pth-mds-bar\"><button class=\"pth-mds-btn\" id=\"pth-mds-csvload\">\ud83d\udce5 Load CSV into grid<\/button><\/div>\r\n  <\/div>\r\n  <div class=\"pth-mds-card\">\r\n    <div class=\"pth-mds-outhead\"><b>Markdown table<\/b>\r\n      <span>\r\n        <button class=\"pth-mds-mini\" data-copy=\"pth-mds-tblout\">\ud83d\udccb Copy<\/button>\r\n        <button class=\"pth-mds-mini\" id=\"pth-mds-tblinsert\" style=\"margin-left:6px\">\ud83d\udcdd Insert into editor<\/button>\r\n      <\/span>\r\n    <\/div>\r\n    <div class=\"pth-mds-out\" id=\"pth-mds-tblout\"><\/div>\r\n  <\/div>\r\n<\/div>\r\n\r\n<!-- TAB 4 -->\r\n<div class=\"pth-mds-panel\" id=\"pth-mds-panel-readme\">\r\n  <div class=\"pth-mds-card\">\r\n    <div class=\"pth-mds-h\"><span class=\"pth-mds-hl\">\ud83d\udcc4 Project Details<\/span><\/div>\r\n    <div class=\"pth-mds-split\">\r\n      <div>\r\n        <label for=\"pth-mds-rname\">Project name<\/label>\r\n        <input type=\"text\" id=\"pth-mds-rname\" placeholder=\"my-awesome-project\">\r\n      <\/div>\r\n      <div>\r\n        <label for=\"pth-mds-rtag\">One-line description<\/label>\r\n        <input type=\"text\" id=\"pth-mds-rtag\" placeholder=\"A tiny library that does one thing well\">\r\n      <\/div>\r\n    <\/div>\r\n    <div style=\"margin-top:12px\">\r\n      <label for=\"pth-mds-rdesc\">What it does (a short paragraph)<\/label>\r\n      <textarea id=\"pth-mds-rdesc\" style=\"min-height:80px\"><\/textarea>\r\n    <\/div>\r\n    <div class=\"pth-mds-split\" style=\"margin-top:12px\">\r\n      <div>\r\n        <label for=\"pth-mds-rinstall\">Install command<\/label>\r\n        <input type=\"text\" id=\"pth-mds-rinstall\" placeholder=\"npm install my-awesome-project\">\r\n      <\/div>\r\n      <div>\r\n        <label for=\"pth-mds-rlicense\">License<\/label>\r\n        <select id=\"pth-mds-rlicense\">\r\n          <option>MIT<\/option><option>Apache-2.0<\/option><option>GPL-3.0<\/option><option>BSD-3-Clause<\/option><option>Unlicense<\/option>\r\n        <\/select>\r\n      <\/div>\r\n    <\/div>\r\n    <div style=\"margin-top:12px\">\r\n      <label for=\"pth-mds-rusage\">Usage example (code)<\/label>\r\n      <textarea id=\"pth-mds-rusage\" spellcheck=\"false\" style=\"min-height:80px;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.84rem\"><\/textarea>\r\n    <\/div>\r\n    <div style=\"margin-top:12px\">\r\n      <label>Include sections<\/label>\r\n      <label class=\"pth-mds-chk\"><input type=\"checkbox\" id=\"pth-mds-rtoc\" checked> Table of contents<\/label>\r\n      <label class=\"pth-mds-chk\"><input type=\"checkbox\" id=\"pth-mds-rbadge\" checked> Badges<\/label>\r\n      <label class=\"pth-mds-chk\"><input type=\"checkbox\" id=\"pth-mds-rfeat\" checked> Features<\/label>\r\n      <label class=\"pth-mds-chk\"><input type=\"checkbox\" id=\"pth-mds-rcontrib\" checked> Contributing<\/label>\r\n    <\/div>\r\n    <div class=\"pth-mds-bar\">\r\n      <button class=\"pth-mds-btn pth-mds-green\" id=\"pth-mds-rgen\">\ud83d\udcc4 Generate README<\/button>\r\n      <button class=\"pth-mds-btn pth-mds-ghost\" id=\"pth-mds-rsend\">\ud83d\udcdd Send to Editor<\/button>\r\n    <\/div>\r\n  <\/div>\r\n  <div class=\"pth-mds-card\">\r\n    <div class=\"pth-mds-outhead\"><b>README.md<\/b>\r\n      <span>\r\n        <button class=\"pth-mds-mini\" data-copy=\"pth-mds-rout\">\ud83d\udccb Copy<\/button>\r\n        <button class=\"pth-mds-mini\" id=\"pth-mds-rdl\" style=\"margin-left:6px\">\u2b07\ufe0f README.md<\/button>\r\n      <\/span>\r\n    <\/div>\r\n    <div class=\"pth-mds-out\" id=\"pth-mds-rout\" style=\"max-height:420px\"><\/div>\r\n  <\/div>\r\n<\/div>\r\n\r\n<!-- TAB 5 -->\r\n<div class=\"pth-mds-panel\" id=\"pth-mds-panel-ref\">\r\n  <div class=\"pth-mds-card\">\r\n    <div class=\"pth-mds-h\"><span class=\"pth-mds-hl\">\ud83d\udcd6 Markdown Syntax Reference<\/span><\/div>\r\n    <div class=\"pth-mds-split\">\r\n      <div><input type=\"text\" id=\"pth-mds-refsearch\" placeholder=\"Search syntax...\"><\/div>\r\n      <div><select id=\"pth-mds-refcat\">\r\n        <option value=\"all\">All<\/option>\r\n        <option value=\"Basic\">Basic<\/option>\r\n        <option value=\"Lists\">Lists<\/option>\r\n        <option value=\"Code\">Code<\/option>\r\n        <option value=\"Links\">Links &amp; images<\/option>\r\n        <option value=\"GFM\">GitHub flavoured<\/option>\r\n      <\/select><\/div>\r\n    <\/div>\r\n    <div class=\"pth-mds-tblwrap\" style=\"margin-top:14px\">\r\n      <table class=\"pth-mds-ref\">\r\n        <thead><tr><th>What you want<\/th><th>Category<\/th><th>How to write it<\/th><\/tr><\/thead>\r\n        <tbody id=\"pth-mds-refbody\"><\/tbody>\r\n      <\/table>\r\n    <\/div>\r\n  <\/div>\r\n<\/div>\r\n\r\n<div class=\"pth-mds-toast\" id=\"pth-mds-toast\"><\/div>\r\n<\/div>\r\n\r\n<script data-no-optimize=\"1\" data-no-minify=\"1\" data-cfasync=\"false\">\r\nwindow.pthMarkdownStudioApp = (function () {\r\n    'use strict';\r\n    var root = null, tblRows = 3, tblCols = 3, tblAligns = ['', '', ''], syncing = false;\r\n    var LT = '<';\r\n\r\n    var SAMPLE = '# Markdown Studio Pro\\n\\n'\r\n        + 'A quick tour of what the **preview** on the right can render.\\n\\n'\r\n        + '## Text\\n\\n'\r\n        + 'You get *italic*, **bold**, ~~strikethrough~~ and `inline code`.\\n\\n'\r\n        + '## Lists\\n\\n'\r\n        + '- A bullet\\n- Another bullet\\n- [x] A finished task\\n- [ ] An unfinished one\\n\\n'\r\n        + '1. First step\\n2. Second step\\n\\n'\r\n        + '## A table\\n\\n'\r\n        + '| Part | Qty | Price |\\n|:-----|----:|:-----:|\\n| Nut | 3 | 0.10 |\\n| Bolt | 12 | 0.25 |\\n\\n'\r\n        + '## Code\\n\\n'\r\n        + '```js\\nvar total = items.reduce(function (a, b) { return a + b; }, 0);\\n```\\n\\n'\r\n        + '> A blockquote, for when something deserves emphasis.\\n\\n'\r\n        + '[Read the syntax reference](https:\/\/schoolict.net\/tools\/markdown-to-html-converter\/)\\n\\n---\\n';\r\n\r\n    var REF = [\r\n        { w: 'Heading, levels 1 to 6', c: 'Basic', s: '# H1\\n## H2\\n### H3' },\r\n        { w: 'Bold', c: 'Basic', s: '**bold text**' },\r\n        { w: 'Italic', c: 'Basic', s: '*italic text*' },\r\n        { w: 'Bold and italic', c: 'Basic', s: '***both***' },\r\n        { w: 'Strikethrough', c: 'GFM', s: '~~gone~~' },\r\n        { w: 'Blockquote', c: 'Basic', s: '> quoted line' },\r\n        { w: 'Horizontal rule', c: 'Basic', s: '---' },\r\n        { w: 'Line break', c: 'Basic', s: 'End a line with two spaces' },\r\n        { w: 'Bullet list', c: 'Lists', s: '- item\\n- item' },\r\n        { w: 'Numbered list', c: 'Lists', s: '1. item\\n2. item' },\r\n        { w: 'Nested list', c: 'Lists', s: '- item\\n  - nested item' },\r\n        { w: 'Task list (checkboxes)', c: 'GFM', s: '- [x] done\\n- [ ] not done' },\r\n        { w: 'Inline code', c: 'Code', s: 'Use `backticks` inline' },\r\n        { w: 'Fenced code block', c: 'Code', s: '```js\\nvar x = 1;\\n```' },\r\n        { w: 'Code block with syntax name', c: 'Code', s: '```python\\nprint(\"hi\")\\n```' },\r\n        { w: 'Link', c: 'Links', s: '[link text](https:\/\/example.com)' },\r\n        { w: 'Link with a tooltip', c: 'Links', s: '[text](https:\/\/example.com \"Tooltip\")' },\r\n        { w: 'Image', c: 'Links', s: '![alt text](image.png)' },\r\n        { w: 'Automatic link', c: 'GFM', s: 'Paste a bare URL and it links itself' },\r\n        { w: 'Table', c: 'GFM', s: '| A | B |\\n| --- | --- |\\n| 1 | 2 |' },\r\n        { w: 'Table column alignment', c: 'GFM', s: '| :--- | :---: | ---: |\\n(left, centre, right)' },\r\n        { w: 'Escape a special character', c: 'Basic', s: 'Put a backslash first: \\\\*not italic\\\\*' }\r\n    ];\r\n\r\n    function byId(id) { return document.getElementById(id); }\r\n    function el(t, c, x) { var e = document.createElement(t); if (c) { e.className = c; } if (x !== undefined) { e.textContent = x; } return e; }\r\n    function trim(s) { return (s || '').replace(\/^\\s+|\\s+$\/g, ''); }\r\n    function toast(m) {\r\n        var t = byId('pth-mds-toast'); if (!t) { return; }\r\n        t.textContent = m; t.className = 'pth-mds-toast pth-mds-tshow';\r\n        window.setTimeout(function () { t.className = 'pth-mds-toast'; }, 2000);\r\n    }\r\n\r\n    \/* ---------- MARKDOWN ENGINE ---------- *\/\r\n    function esc(s) { return s.replace(\/&\/g, '&amp;').replace(\/<\/g, '&lt;').replace(\/>\/g, '&gt;'); }\r\n    function inlineMd(s) {\r\n        var out = s;\r\n        out = out.replace(\/`([^`]+)`\/g, function (m, c) { return LT + 'code>' + c + LT + '\/code>'; });\r\n        out = out.replace(\/!\\[([^\\]]*)\\]\\(([^)\\s]+)\\)\/g, LT + 'img src=\"$2\" alt=\"$1\" loading=\"lazy\" data-no-lazy=\"1\">');\r\n        out = out.replace(\/\\[([^\\]]+)\\]\\(([^)\\s]+)\\)\/g, LT + 'a href=\"$2\" rel=\"noopener\" target=\"_blank\">$1' + LT + '\/a>');\r\n        out = out.replace(\/\\*\\*\\*([^*]+)\\*\\*\\*\/g, LT + 'strong>' + LT + 'em>$1' + LT + '\/em>' + LT + '\/strong>');\r\n        out = out.replace(\/\\*\\*([^*]+)\\*\\*\/g, LT + 'strong>$1' + LT + '\/strong>');\r\n        out = out.replace(\/(^|[^*])\\*([^*\\n]+)\\*\/g, '$1' + LT + 'em>$2' + LT + '\/em>');\r\n        out = out.replace(\/~~([^~]+)~~\/g, LT + 'del>$1' + LT + '\/del>');\r\n        return out;\r\n    }\r\n    function alignOf(cell) {\r\n        var c = cell.replace(\/\\s\/g, '');\r\n        var l = c.charAt(0) === ':', r = c.charAt(c.length - 1) === ':';\r\n        if (l && r) { return 'center'; }\r\n        if (r) { return 'right'; }\r\n        if (l) { return 'left'; }\r\n        return '';\r\n    }\r\n    function slug(t) { return t.toLowerCase().replace(\/[^a-z0-9\\s-]\/g, '').replace(\/\\s+\/g, '-'); }\r\n\r\n    function mdToHtml(src) {\r\n        var lines = src.replace(\/\\r\\n\/g, '\\n').split('\\n');\r\n        var out = [], i = 0, inCode = false, codeBuf = [], codeLang = '';\r\n        function flushCode() {\r\n            out.push(LT + 'pre>' + LT + 'code' + (codeLang ? ' class=\"language-' + codeLang + '\"' : '') + '>' + esc(codeBuf.join('\\n')) + LT + '\/code>' + LT + '\/pre>');\r\n            codeBuf = []; codeLang = '';\r\n        }\r\n        while (i < lines.length) {\r\n            var line = lines[i];\r\n            var fence = line.match(\/^```\\s*([a-zA-Z0-9+#-]*)\\s*$\/);\r\n            if (fence) {\r\n                if (inCode) { inCode = false; flushCode(); }\r\n                else { inCode = true; codeLang = fence[1] || ''; }\r\n                i++; continue;\r\n            }\r\n            if (inCode) { codeBuf.push(line); i++; continue; }\r\n            if (\/^\\s*$\/.test(line)) { i++; continue; }\r\n            if (\/^(---|\\*\\*\\*|___)\\s*$\/.test(line)) { out.push(LT + 'hr>'); i++; continue; }\r\n\r\n            var h = line.match(\/^(#{1,6})\\s+(.*)$\/);\r\n            if (h) {\r\n                var lvl = h[1].length;\r\n                var txt = h[2].replace(\/\\s*#+\\s*$\/, '');\r\n                out.push(LT + 'h' + lvl + ' id=\"' + slug(txt) + '\">' + inlineMd(esc(txt)) + LT + '\/h' + lvl + '>');\r\n                i++; continue;\r\n            }\r\n            if (i + 1 < lines.length && line.indexOf('|') !== -1 && \/^\\s*\\|?[\\s:|-]+\\|[\\s:|-]*$\/.test(lines[i + 1]) && lines[i + 1].indexOf('-') !== -1) {\r\n                var head = line.replace(\/^\\||\\|$\/g, '').split('|');\r\n                var seps = lines[i + 1].replace(\/^\\||\\|$\/g, '').split('|');\r\n                var aligns = [], k;\r\n                for (k = 0; k < seps.length; k++) { aligns.push(alignOf(seps[k])); }\r\n                var t = LT + 'table>' + LT + 'thead>' + LT + 'tr>';\r\n                for (k = 0; k < head.length; k++) {\r\n                    var a = aligns[k] ? ' style=\"text-align:' + aligns[k] + '\"' : '';\r\n                    t += LT + 'th' + a + '>' + inlineMd(esc(trim(head[k]))) + LT + '\/th>';\r\n                }\r\n                t += LT + '\/tr>' + LT + '\/thead>' + LT + 'tbody>';\r\n                i += 2;\r\n                while (i < lines.length && lines[i].indexOf('|') !== -1 && !\/^\\s*$\/.test(lines[i])) {\r\n                    var cells = lines[i].replace(\/^\\||\\|$\/g, '').split('|');\r\n                    t += LT + 'tr>';\r\n                    for (k = 0; k < cells.length; k++) {\r\n                        var a2 = aligns[k] ? ' style=\"text-align:' + aligns[k] + '\"' : '';\r\n                        t += LT + 'td' + a2 + '>' + inlineMd(esc(trim(cells[k]))) + LT + '\/td>';\r\n                    }\r\n                    t += LT + '\/tr>'; i++;\r\n                }\r\n                t += LT + '\/tbody>' + LT + '\/table>';\r\n                out.push(t); continue;\r\n            }\r\n            if (\/^>\\s?\/.test(line)) {\r\n                var qbuf = [];\r\n                while (i < lines.length && \/^>\\s?\/.test(lines[i])) { qbuf.push(lines[i].replace(\/^>\\s?\/, '')); i++; }\r\n                out.push(LT + 'blockquote>' + mdToHtml(qbuf.join('\\n')) + LT + '\/blockquote>');\r\n                continue;\r\n            }\r\n            if (\/^\\s*[-*+]\\s+\/.test(line) || \/^\\s*\\d+\\.\\s+\/.test(line)) {\r\n                var ordered = \/^\\s*\\d+\\.\\s+\/.test(line);\r\n                var items = [];\r\n                while (i < lines.length && (\/^\\s*[-*+]\\s+\/.test(lines[i]) || \/^\\s*\\d+\\.\\s+\/.test(lines[i]))) {\r\n                    var raw = lines[i].replace(\/^\\s*(?:[-*+]|\\d+\\.)\\s+\/, '');\r\n                    var task = raw.match(\/^\\[([ xX])\\]\\s+(.*)$\/);\r\n                    if (task) {\r\n                        items.push(LT + 'li class=\"task\">' + LT + 'input type=\"checkbox\" disabled' + (task[1].toLowerCase() === 'x' ? ' checked' : '') + '> ' + inlineMd(esc(task[2])) + LT + '\/li>');\r\n                    } else {\r\n                        items.push(LT + 'li>' + inlineMd(esc(raw)) + LT + '\/li>');\r\n                    }\r\n                    i++;\r\n                }\r\n                out.push((ordered ? LT + 'ol>' : LT + 'ul>') + items.join('') + (ordered ? LT + '\/ol>' : LT + '\/ul>'));\r\n                continue;\r\n            }\r\n            var para = [];\r\n            while (i < lines.length && !\/^\\s*$\/.test(lines[i]) && !\/^(#{1,6})\\s\/.test(lines[i]) && !\/^```\/.test(lines[i]) && !\/^>\\s?\/.test(lines[i]) && !\/^\\s*[-*+]\\s+\/.test(lines[i]) && !\/^\\s*\\d+\\.\\s+\/.test(lines[i])) {\r\n                para.push(lines[i]); i++;\r\n            }\r\n            if (para.length) { out.push(LT + 'p>' + inlineMd(esc(para.join(' '))) + LT + '\/p>'); }\r\n        }\r\n        if (inCode) { flushCode(); }\r\n        return out.join('\\n');\r\n    }\r\n\r\n    function htmlTableToMd(tbl) {\r\n        var rows = tbl.match(\/<tr[\\s\\S]*?<\\\/tr>\/gi) || [];\r\n        if (!rows.length) { return ''; }\r\n        var out = [], aligns = [], r, cells, line, k;\r\n        for (r = 0; r < rows.length; r++) {\r\n            cells = rows[r].match(\/<(th|td)[^>]*>[\\s\\S]*?<\\\/\\1>\/gi) || [];\r\n            line = [];\r\n            for (k = 0; k < cells.length; k++) {\r\n                if (r === 0) {\r\n                    var am = cells[k].match(\/text-align:\\s*(left|right|center)\/i);\r\n                    aligns.push(am ? am[1].toLowerCase() : '');\r\n                }\r\n                line.push(trim(cells[k].replace(\/<[^>]+>\/g, '')).replace(\/\\|\/g, '\\\\|'));\r\n            }\r\n            out.push('| ' + line.join(' | ') + ' |');\r\n            if (r === 0) {\r\n                var sep = [];\r\n                for (k = 0; k < line.length; k++) {\r\n                    var a = aligns[k] || '';\r\n                    sep.push(a === 'center' ? ':---:' : (a === 'right' ? '---:' : (a === 'left' ? ':---' : '---')));\r\n                }\r\n                out.push('| ' + sep.join(' | ') + ' |');\r\n            }\r\n        }\r\n        return '\\n' + out.join('\\n') + '\\n';\r\n    }\r\n    function htmlToMd(html) {\r\n        var s = html;\r\n        s = s.replace(\/<script[\\s\\S]*?<\\\/script>\/gi, '').replace(\/<style[\\s\\S]*?<\\\/style>\/gi, '');\r\n        s = s.replace(\/<table[\\s\\S]*?<\\\/table>\/gi, function (m) { return htmlTableToMd(m); });\r\n        s = s.replace(\/<ol[^>]*>([\\s\\S]*?)<\\\/ol>\/gi, function (m, c) {\r\n            var items = c.match(\/<li[^>]*>[\\s\\S]*?<\\\/li>\/gi) || [], o = [], k;\r\n            for (k = 0; k < items.length; k++) { o.push((k + 1) + '. ' + trim(items[k].replace(\/<[^>]+>\/g, ''))); }\r\n            return '\\n' + o.join('\\n') + '\\n';\r\n        });\r\n        s = s.replace(\/<pre[^>]*><code[^>]*>([\\s\\S]*?)<\\\/code><\\\/pre>\/gi, function (m, c) {\r\n            return '\\n```\\n' + c.replace(\/&lt;\/g, '<').replace(\/&gt;\/g, '>').replace(\/&amp;\/g, '&') + '\\n```\\n';\r\n        });\r\n        s = s.replace(\/<h([1-6])[^>]*>([\\s\\S]*?)<\\\/h\\1>\/gi, function (m, l, t) {\r\n            var hd = '', k;\r\n            for (k = 0; k < parseInt(l, 10); k++) { hd += '#'; }\r\n            return '\\n' + hd + ' ' + trim(t.replace(\/<[^>]+>\/g, '')) + '\\n';\r\n        });\r\n        s = s.replace(\/<img[^>]*alt=\"([^\"]*)\"[^>]*src=\"([^\"]*)\"[^>]*>\/gi, '![$1]($2)');\r\n        s = s.replace(\/<img[^>]*src=\"([^\"]*)\"[^>]*alt=\"([^\"]*)\"[^>]*>\/gi, '![$2]($1)');\r\n        s = s.replace(\/<a[^>]*href=\"([^\"]*)\"[^>]*>([\\s\\S]*?)<\\\/a>\/gi, function (m, h, t) { return '[' + t.replace(\/<[^>]+>\/g, '') + '](' + h + ')'; });\r\n        s = s.replace(\/<(strong|b)>([\\s\\S]*?)<\\\/\\1>\/gi, '**$2**');\r\n        s = s.replace(\/<(em|i)>([\\s\\S]*?)<\\\/\\1>\/gi, '*$2*');\r\n        s = s.replace(\/<del>([\\s\\S]*?)<\\\/del>\/gi, '~~$1~~');\r\n        s = s.replace(\/<code>([\\s\\S]*?)<\\\/code>\/gi, '`$1`');\r\n        s = s.replace(\/<blockquote[^>]*>([\\s\\S]*?)<\\\/blockquote>\/gi, function (m, c) { return '\\n> ' + trim(c.replace(\/<[^>]+>\/g, '')) + '\\n'; });\r\n        s = s.replace(\/<li[^>]*>([\\s\\S]*?)<\\\/li>\/gi, function (m, c) { return '- ' + trim(c.replace(\/<[^>]+>\/g, '')) + '\\n'; });\r\n        s = s.replace(\/<\\\/?(ul|ol)[^>]*>\/gi, '\\n');\r\n        s = s.replace(\/<hr[^>]*>\/gi, '\\n---\\n');\r\n        s = s.replace(\/<br[^>]*>\/gi, '\\n');\r\n        s = s.replace(\/<\\\/p>\/gi, '\\n\\n').replace(\/<p[^>]*>\/gi, '');\r\n        s = s.replace(\/<[^>]+>\/g, '');\r\n        s = s.replace(\/&nbsp;\/g, ' ').replace(\/&amp;\/g, '&').replace(\/&lt;\/g, '<').replace(\/&gt;\/g, '>').replace(\/&quot;\/g, '\"');\r\n        s = s.replace(\/\\n{3,}\/g, '\\n\\n');\r\n        return trim(s);\r\n    }\r\n\r\n    \/* ---------- EDITOR ---------- *\/\r\n    function render() {\r\n        var src = byId('pth-mds-src').value;\r\n        byId('pth-mds-prev').innerHTML = mdToHtml(src);\r\n        byId('pth-mds-htmlout').textContent = mdToHtml(src);\r\n        renderStats(src);\r\n    }\r\n    function renderStats(src) {\r\n        var box = byId('pth-mds-stats');\r\n        if (!box) { return; }\r\n        box.innerHTML = '';\r\n        var words = trim(src) ? trim(src).split(\/\\s+\/).length : 0;\r\n        var chars = src.length;\r\n        var mins = Math.max(1, Math.round(words \/ 200));\r\n        var heads = (src.match(\/^#{1,6}\\s+\/gm) || []).length;\r\n        function stat(v, l) { var d = el('div', 'pth-mds-stat'); d.appendChild(el('b', null, String(v))); d.appendChild(el('span', null, l)); return d; }\r\n        box.appendChild(stat(words, 'words'));\r\n        box.appendChild(stat(chars, 'characters'));\r\n        box.appendChild(stat(heads, 'headings'));\r\n        box.appendChild(stat(mins + ' min', 'read time'));\r\n    }\r\n    function wrapSel(before, after, placeholder) {\r\n        var ta = byId('pth-mds-src');\r\n        var s = ta.selectionStart, e = ta.selectionEnd;\r\n        var sel = ta.value.slice(s, e) || placeholder;\r\n        ta.value = ta.value.slice(0, s) + before + sel + after + ta.value.slice(e);\r\n        ta.focus();\r\n        ta.selectionStart = s + before.length;\r\n        ta.selectionEnd = s + before.length + sel.length;\r\n        render();\r\n    }\r\n    function insertLine(text) {\r\n        var ta = byId('pth-mds-src');\r\n        var s = ta.selectionStart;\r\n        var pre = ta.value.slice(0, s);\r\n        var pad = (pre === '' || \/\\n$\/.test(pre)) ? '' : '\\n';\r\n        ta.value = pre + pad + text + ta.value.slice(s);\r\n        ta.focus();\r\n        render();\r\n    }\r\n    function buildToc() {\r\n        var src = byId('pth-mds-src').value;\r\n        var lines = src.split('\\n'), out = [], i;\r\n        for (i = 0; i < lines.length; i++) {\r\n            var m = lines[i].match(\/^(#{2,4})\\s+(.*)$\/);\r\n            if (m) {\r\n                var indent = '', k;\r\n                for (k = 2; k < m[1].length; k++) { indent += '  '; }\r\n                out.push(indent + '- [' + trim(m[2]) + '](#' + slug(trim(m[2])) + ')');\r\n            }\r\n        }\r\n        return out.length ? out.join('\\n') : '';\r\n    }\r\n    function mdAction(kind) {\r\n        if (kind === 'h') { insertLine('## Heading'); }\r\n        else if (kind === 'b') { wrapSel('**', '**', 'bold text'); }\r\n        else if (kind === 'i') { wrapSel('*', '*', 'italic text'); }\r\n        else if (kind === 's') { wrapSel('~~', '~~', 'strikethrough'); }\r\n        else if (kind === 'code') { wrapSel('`', '`', 'code'); }\r\n        else if (kind === 'fence') { insertLine('```js\\nvar x = 1;\\n```'); }\r\n        else if (kind === 'link') { wrapSel('[', '](https:\/\/example.com)', 'link text'); }\r\n        else if (kind === 'img') { insertLine('![alt text](image.png)'); }\r\n        else if (kind === 'ul') { insertLine('- item one\\n- item two'); }\r\n        else if (kind === 'ol') { insertLine('1. first\\n2. second'); }\r\n        else if (kind === 'task') { insertLine('- [x] done\\n- [ ] to do'); }\r\n        else if (kind === 'quote') { insertLine('> quoted text'); }\r\n        else if (kind === 'hr') { insertLine('\\n---\\n'); }\r\n        else if (kind === 'toc') {\r\n            var toc = buildToc();\r\n            if (!toc) { toast('Add some ## headings first'); return; }\r\n            insertLine(toc + '\\n');\r\n            toast('Table of contents inserted');\r\n        }\r\n    }\r\n\r\n    \/* ---------- TABLE BUILDER ---------- *\/\r\n    function gridValue(r, c) {\r\n        var inp = byId('pth-mds-cell-' + r + '-' + c);\r\n        return inp ? inp.value : '';\r\n    }\r\n    function buildGrid(data) {\r\n        var g = byId('pth-mds-grid');\r\n        if (!g) { return; }\r\n        g.innerHTML = '';\r\n        var thead = el('thead'), htr = el('tr'), c, r;\r\n        for (c = 0; c < tblCols; c++) {\r\n            var th = el('th');\r\n            var hi = document.createElement('input');\r\n            hi.type = 'text';\r\n            hi.id = 'pth-mds-cell-0-' + c;\r\n            hi.value = (data && data[0] && data[0][c] !== undefined) ? data[0][c] : ('Column ' + (c + 1));\r\n            hi.addEventListener('input', renderTable);\r\n            th.appendChild(hi); htr.appendChild(th);\r\n        }\r\n        thead.appendChild(htr); g.appendChild(thead);\r\n        var tb = el('tbody');\r\n        for (r = 1; r < tblRows; r++) {\r\n            var tr = el('tr');\r\n            for (c = 0; c < tblCols; c++) {\r\n                var td = el('td');\r\n                var ci = document.createElement('input');\r\n                ci.type = 'text';\r\n                ci.id = 'pth-mds-cell-' + r + '-' + c;\r\n                ci.value = (data && data[r] && data[r][c] !== undefined) ? data[r][c] : '';\r\n                ci.addEventListener('input', renderTable);\r\n                td.appendChild(ci); tr.appendChild(td);\r\n            }\r\n            tb.appendChild(tr);\r\n        }\r\n        g.appendChild(tb);\r\n        buildAlignBtns();\r\n        renderTable();\r\n    }\r\n    function buildAlignBtns() {\r\n        var box = byId('pth-mds-aligns');\r\n        if (!box) { return; }\r\n        box.innerHTML = '';\r\n        var c;\r\n        for (c = 0; c < tblCols; c++) {\r\n            (function (col) {\r\n                var b = el('button', 'pth-mds-mini');\r\n                var a = tblAligns[col] || 'default';\r\n                b.textContent = 'Col ' + (col + 1) + ': ' + a;\r\n                b.addEventListener('click', function () {\r\n                    var order = ['', 'left', 'center', 'right'];\r\n                    var cur = order.indexOf(tblAligns[col] || '');\r\n                    tblAligns[col] = order[(cur + 1) % order.length];\r\n                    buildAlignBtns();\r\n                    renderTable();\r\n                });\r\n                box.appendChild(b);\r\n            })(c);\r\n        }\r\n    }\r\n    function renderTable() {\r\n        var out = [], r, c, line, sep = [];\r\n        line = [];\r\n        for (c = 0; c < tblCols; c++) { line.push(gridValue(0, c) || ' '); }\r\n        out.push('| ' + line.join(' | ') + ' |');\r\n        for (c = 0; c < tblCols; c++) {\r\n            var a = tblAligns[c] || '';\r\n            sep.push(a === 'center' ? ':---:' : (a === 'right' ? '---:' : (a === 'left' ? ':---' : '---')));\r\n        }\r\n        out.push('| ' + sep.join(' | ') + ' |');\r\n        for (r = 1; r < tblRows; r++) {\r\n            line = [];\r\n            for (c = 0; c < tblCols; c++) { line.push(gridValue(r, c) || ' '); }\r\n            out.push('| ' + line.join(' | ') + ' |');\r\n        }\r\n        byId('pth-mds-tblout').textContent = out.join('\\n');\r\n    }\r\n    function readGrid() {\r\n        var data = [], r, c;\r\n        for (r = 0; r < tblRows; r++) {\r\n            var row = [];\r\n            for (c = 0; c < tblCols; c++) { row.push(gridValue(r, c)); }\r\n            data.push(row);\r\n        }\r\n        return data;\r\n    }\r\n    function parseCsvLine(line) {\r\n        var out = [], cur = '', inQ = false, i;\r\n        for (i = 0; i < line.length; i++) {\r\n            var ch = line.charAt(i);\r\n            if (ch === '\"') {\r\n                if (inQ && line.charAt(i + 1) === '\"') { cur += '\"'; i++; }\r\n                else { inQ = !inQ; }\r\n            } else if (ch === ',' && !inQ) { out.push(cur); cur = ''; }\r\n            else { cur += ch; }\r\n        }\r\n        out.push(cur);\r\n        return out;\r\n    }\r\n    function loadCsv() {\r\n        var raw = trim(byId('pth-mds-csv').value);\r\n        if (!raw) { toast('Paste some CSV first'); return; }\r\n        var lines = raw.split(\/\\r?\\n\/), data = [], i, max = 0;\r\n        for (i = 0; i < lines.length; i++) {\r\n            if (!trim(lines[i])) { continue; }\r\n            var cells = parseCsvLine(lines[i]);\r\n            if (cells.length > max) { max = cells.length; }\r\n            data.push(cells);\r\n        }\r\n        if (!data.length) { toast('No rows found'); return; }\r\n        tblRows = data.length;\r\n        tblCols = max;\r\n        tblAligns = [];\r\n        for (i = 0; i < tblCols; i++) { tblAligns.push(''); }\r\n        buildGrid(data);\r\n        toast(tblRows + ' rows loaded');\r\n    }\r\n\r\n    \/* ---------- README ---------- *\/\r\n    function buildReadme() {\r\n        var name = trim(byId('pth-mds-rname').value) || 'my-project';\r\n        var tag = trim(byId('pth-mds-rtag').value);\r\n        var desc = trim(byId('pth-mds-rdesc').value);\r\n        var install = trim(byId('pth-mds-rinstall').value) || ('npm install ' + name);\r\n        var usage = trim(byId('pth-mds-rusage').value) || 'var lib = require(\"' + name + '\");';\r\n        var lic = byId('pth-mds-rlicense').value;\r\n        var wantToc = byId('pth-mds-rtoc').checked;\r\n        var wantBadge = byId('pth-mds-rbadge').checked;\r\n        var wantFeat = byId('pth-mds-rfeat').checked;\r\n        var wantContrib = byId('pth-mds-rcontrib').checked;\r\n\r\n        var md = '# ' + name + '\\n\\n';\r\n        if (tag) { md += '> ' + tag + '\\n\\n'; }\r\n        if (wantBadge) {\r\n            md += '![License](https:\/\/img.shields.io\/badge\/license-' + lic + '-blue)'\r\n                + ' ![Version](https:\/\/img.shields.io\/badge\/version-1.0.0-green)'\r\n                + ' ![Build](https:\/\/img.shields.io\/badge\/build-passing-brightgreen)\\n\\n';\r\n        }\r\n        if (wantToc) {\r\n            md += '## Table of Contents\\n\\n';\r\n            md += '- [About](#about)\\n';\r\n            if (wantFeat) { md += '- [Features](#features)\\n'; }\r\n            md += '- [Installation](#installation)\\n- [Usage](#usage)\\n';\r\n            if (wantContrib) { md += '- [Contributing](#contributing)\\n'; }\r\n            md += '- [License](#license)\\n\\n';\r\n        }\r\n        md += '## About\\n\\n' + (desc || 'Describe what this project does and who it is for.') + '\\n\\n';\r\n        if (wantFeat) {\r\n            md += '## Features\\n\\n- First thing it does well\\n- Second thing it does well\\n- Third thing it does well\\n\\n';\r\n        }\r\n        md += '## Installation\\n\\n```bash\\n' + install + '\\n```\\n\\n';\r\n        md += '## Usage\\n\\n```js\\n' + usage + '\\n```\\n\\n';\r\n        if (wantContrib) {\r\n            md += '## Contributing\\n\\nPull requests are welcome. For larger changes, open an issue first to discuss what you would like to change.\\n\\n';\r\n            md += '1. Fork the repository\\n2. Create your branch (`git checkout -b feature\/thing`)\\n3. Commit your changes\\n4. Open a pull request\\n\\n';\r\n        }\r\n        md += '## License\\n\\n' + lic + '\\n';\r\n        return md;\r\n    }\r\n\r\n    \/* ---------- REFERENCE ---------- *\/\r\n    function renderRef() {\r\n        var body = byId('pth-mds-refbody');\r\n        if (!body) { return; }\r\n        var q = (byId('pth-mds-refsearch').value || '').toLowerCase();\r\n        var cat = byId('pth-mds-refcat').value;\r\n        body.innerHTML = '';\r\n        var i, shown = 0;\r\n        for (i = 0; i < REF.length; i++) {\r\n            var r = REF[i];\r\n            if (cat !== 'all' && r.c !== cat) { continue; }\r\n            if (q && r.w.toLowerCase().indexOf(q) === -1 && r.s.toLowerCase().indexOf(q) === -1) { continue; }\r\n            var tr = el('tr');\r\n            var c1 = el('td'); c1.appendChild(el('strong', null, r.w));\r\n            var c2 = el('td', null, r.c);\r\n            var c3 = el('td');\r\n            var code = el('code', null, r.s);\r\n            c3.appendChild(code);\r\n            tr.appendChild(c1); tr.appendChild(c2); tr.appendChild(c3);\r\n            body.appendChild(tr); shown++;\r\n        }\r\n        if (!shown) {\r\n            var tr2 = el('tr');\r\n            var td = el('td', null, 'Nothing matches that search.');\r\n            td.setAttribute('colspan', '3');\r\n            td.style.textAlign = 'center'; td.style.color = '#475569';\r\n            tr2.appendChild(td); body.appendChild(tr2);\r\n        }\r\n    }\r\n\r\n    \/* ---------- SHARED ---------- *\/\r\n    function copyText(text) {\r\n        var ta = document.createElement('textarea');\r\n        ta.value = text; ta.style.position = 'fixed'; ta.style.left = '-9999px';\r\n        document.body.appendChild(ta); ta.select();\r\n        var ok = false;\r\n        try { ok = document.execCommand('copy'); } catch (e) { ok = false; }\r\n        document.body.removeChild(ta);\r\n        toast(ok ? 'Copied' : 'Copy failed \u2014 select manually');\r\n    }\r\n    function bindCopy() {\r\n        var btns = root.querySelectorAll('[data-copy]'), i;\r\n        for (i = 0; i < btns.length; i++) {\r\n            if (btns[i].getAttribute('data-bound') === '1') { continue; }\r\n            btns[i].setAttribute('data-bound', '1');\r\n            btns[i].addEventListener('click', function () {\r\n                var t = byId(this.getAttribute('data-copy'));\r\n                if (t) { copyText(t.textContent); }\r\n            });\r\n        }\r\n    }\r\n    function download(name, text, mime) {\r\n        try {\r\n            var blob = new Blob([text], { type: mime || 'text\/plain' });\r\n            var url = URL.createObjectURL(blob);\r\n            var a = document.createElement('a');\r\n            a.href = url; a.download = name;\r\n            document.body.appendChild(a); a.click(); document.body.removeChild(a);\r\n            window.setTimeout(function () { URL.revokeObjectURL(url); }, 1500);\r\n            toast(name + ' downloaded');\r\n        } catch (e) { toast('Download failed in this browser'); }\r\n    }\r\n    function fullHtmlDoc(body) {\r\n        return '<!DOCTYPE html>\\n' + LT + 'html lang=\"en\">\\n' + LT + 'head>\\n'\r\n            + LT + 'meta charset=\"utf-8\">\\n'\r\n            + LT + 'meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\\n'\r\n            + LT + 'title>Document' + LT + '\/title>\\n'\r\n            + LT + 'style>body{font-family:system-ui,sans-serif;max-width:760px;margin:40px auto;padding:0 20px;line-height:1.7;color:#1e293b}'\r\n            + 'pre{background:#0f172a;color:#e2e8f0;padding:14px;border-radius:8px;overflow-x:auto}'\r\n            + 'code{background:#f1f5f9;padding:2px 6px;border-radius:4px}'\r\n            + 'pre code{background:none;padding:0}'\r\n            + 'table{border-collapse:collapse;width:100%}th,td{border:1px solid #cbd5e1;padding:8px}'\r\n            + 'blockquote{border-left:4px solid #2563eb;margin:0;padding:8px 16px;background:#f8fafc}'\r\n            + LT + '\/style>\\n' + LT + '\/head>\\n' + LT + 'body>\\n'\r\n            + body\r\n            + '\\n' + LT + '\/body>\\n' + LT + '\/html>';\r\n    }\r\n\r\n    function switchTab(name) {\r\n        var tabs = root.querySelectorAll('.pth-mds-tab'), i;\r\n        for (i = 0; i < tabs.length; i++) {\r\n            tabs[i].className = (tabs[i].getAttribute('data-tab') === name) ? 'pth-mds-tab pth-mds-on' : 'pth-mds-tab';\r\n        }\r\n        var pans = root.querySelectorAll('.pth-mds-panel');\r\n        for (i = 0; i < pans.length; i++) { pans[i].className = 'pth-mds-panel'; }\r\n        var p = byId('pth-mds-panel-' + name);\r\n        if (p) { p.className = 'pth-mds-panel pth-mds-show'; }\r\n    }\r\n\r\n    function init() {\r\n        root = document.getElementById('pth-mds-studio-wrapper');\r\n        if (!root || root.getAttribute('data-pth-init') === '1') { return; }\r\n        root.setAttribute('data-pth-init', '1');\r\n\r\n        var tabs = root.querySelectorAll('.pth-mds-tab'), i;\r\n        for (i = 0; i < tabs.length; i++) {\r\n            tabs[i].addEventListener('click', function () { switchTab(this.getAttribute('data-tab')); });\r\n        }\r\n\r\n        byId('pth-mds-src').value = SAMPLE;\r\n        render();\r\n        byId('pth-mds-src').addEventListener('input', render);\r\n\r\n        var tbtns = root.querySelectorAll('.pth-mds-tbtn');\r\n        for (i = 0; i < tbtns.length; i++) {\r\n            tbtns[i].addEventListener('click', function () { mdAction(this.getAttribute('data-md')); });\r\n        }\r\n\r\n        var src = byId('pth-mds-src'), prev = byId('pth-mds-prev');\r\n        src.addEventListener('scroll', function () {\r\n            if (!byId('pth-mds-sync').checked || syncing) { return; }\r\n            syncing = true;\r\n            var ratio = src.scrollTop \/ Math.max(1, src.scrollHeight - src.clientHeight);\r\n            prev.scrollTop = ratio * Math.max(0, prev.scrollHeight - prev.clientHeight);\r\n            window.setTimeout(function () { syncing = false; }, 30);\r\n        });\r\n\r\n        byId('pth-mds-sample').addEventListener('click', function () { byId('pth-mds-src').value = SAMPLE; render(); switchTab('edit'); toast('Sample loaded'); });\r\n        byId('pth-mds-full').addEventListener('click', function () {\r\n            if (root.className.indexOf('pth-mds-full') !== -1) { root.className = root.className.replace(' pth-mds-full', '').replace('pth-mds-full', ''); }\r\n            else { root.className = root.className + ' pth-mds-full'; }\r\n        });\r\n        byId('pth-mds-clear').addEventListener('click', function () {\r\n            byId('pth-mds-src').value = ''; render(); toast('Cleared');\r\n        });\r\n\r\n        byId('pth-mds-dlhtml').addEventListener('click', function () {\r\n            download('document.html', fullHtmlDoc(mdToHtml(byId('pth-mds-src').value)), 'text\/html');\r\n        });\r\n        byId('pth-mds-dlmd').addEventListener('click', function () {\r\n            download('document.md', byId('pth-mds-src').value, 'text\/markdown');\r\n        });\r\n        byId('pth-mds-toMd').addEventListener('click', function () {\r\n            var h = byId('pth-mds-htmlin').value;\r\n            if (!trim(h)) { toast('Paste some HTML first'); return; }\r\n            byId('pth-mds-mdout').textContent = htmlToMd(h);\r\n            toast('Converted to Markdown');\r\n        });\r\n        byId('pth-mds-sendEditor').addEventListener('click', function () {\r\n            var md = byId('pth-mds-mdout').textContent;\r\n            if (!trim(md)) { toast('Convert some HTML first'); return; }\r\n            byId('pth-mds-src').value = md; render(); switchTab('edit'); toast('Sent to editor');\r\n        });\r\n\r\n        byId('pth-mds-addrow').addEventListener('click', function () { var d = readGrid(); tblRows++; buildGrid(d); });\r\n        byId('pth-mds-delrow').addEventListener('click', function () {\r\n            if (tblRows <= 2) { toast('Keep at least one data row'); return; }\r\n            var d = readGrid(); tblRows--; buildGrid(d);\r\n        });\r\n        byId('pth-mds-addcol').addEventListener('click', function () { var d = readGrid(); tblCols++; tblAligns.push(''); buildGrid(d); });\r\n        byId('pth-mds-delcol').addEventListener('click', function () {\r\n            if (tblCols <= 1) { toast('Keep at least one column'); return; }\r\n            var d = readGrid(); tblCols--; tblAligns.pop(); buildGrid(d);\r\n        });\r\n        byId('pth-mds-csvload').addEventListener('click', loadCsv);\r\n        byId('pth-mds-tblinsert').addEventListener('click', function () {\r\n            insertLine('\\n' + byId('pth-mds-tblout').textContent + '\\n');\r\n            switchTab('edit'); toast('Table inserted');\r\n        });\r\n        buildGrid([['Part', 'Qty', 'Price'], ['Nut', '3', '0.10'], ['Bolt', '12', '0.25']]);\r\n\r\n        byId('pth-mds-rgen').addEventListener('click', function () {\r\n            byId('pth-mds-rout').textContent = buildReadme(); toast('README generated');\r\n        });\r\n        byId('pth-mds-rsend').addEventListener('click', function () {\r\n            var md = byId('pth-mds-rout').textContent || buildReadme();\r\n            byId('pth-mds-src').value = md; render(); switchTab('edit'); toast('README sent to editor');\r\n        });\r\n        byId('pth-mds-rdl').addEventListener('click', function () {\r\n            download('README.md', byId('pth-mds-rout').textContent || buildReadme(), 'text\/markdown');\r\n        });\r\n\r\n        byId('pth-mds-refsearch').addEventListener('input', renderRef);\r\n        byId('pth-mds-refcat').addEventListener('change', renderRef);\r\n        renderRef();\r\n\r\n        bindCopy();\r\n    }\r\n    return { init: init };\r\n})();\r\n\r\n\/* 4-layer bootstrap (LiteSpeed-safe) *\/\r\n(function () {\r\n    function boot() { if (window.pthMarkdownStudioApp && document.getElementById('pth-mds-studio-wrapper')) { window.pthMarkdownStudioApp.init(); } }\r\n    if (document.readyState === 'complete' || document.readyState === 'interactive') { window.setTimeout(boot, 1); }\r\n    document.addEventListener('DOMContentLoaded', boot);\r\n    window.addEventListener('load', boot);\r\n    window.setTimeout(boot, 900);\r\n})();\r\n<\/script>\n\n\n\n<style>\n.pth-feature-wrap { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; margin-bottom: 30px; }\n.pth-feat-box { border: 1px solid #e2e8f0; background: #ffffff; padding: 24px; border-radius: 12px; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.02); transition: all 0.3s ease; }\n.pth-feat-box:hover { border-color: #bfdbfe; transform: translateY(-3px); box-shadow: 0 10px 15px -3px rgba(0,0,0,0.05); }\n.pth-feat-title { font-size: 1.1rem; font-weight: 800; color: #0f172a; margin-bottom: 10px; display: flex; align-items: center; gap: 10px; }\n.pth-feat-text { font-size: 0.9rem; color: #475569; line-height: 1.6; margin: 0; }\n.pth-steps-wrap { border: 1px solid #e2e8f0; background: #ffffff; padding: 40px 30px; border-radius: 16px; text-align: center; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.02); margin-bottom: 40px; }\n.pth-steps-title { font-size: 1.2rem; font-weight: 800; color: #1e293b; text-transform: uppercase; margin-bottom: 35px; letter-spacing: 1px; }\n.pth-steps-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 30px; }\n.pth-step-item { display: flex; flex-direction: column; align-items: center; }\n.pth-step-num { width: 45px; height: 45px; background: #3b82f6; color: #ffffff; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 1.2rem; margin-bottom: 15px; box-shadow: 0 4px 10px rgba(59,130,246,0.3); }\n.pth-step-name { font-weight: 800; color: #0f172a; margin-bottom: 8px; font-size: 1.05rem; }\n.pth-step-desc { font-size: 0.9rem; color: #64748b; line-height: 1.5; margin: 0; }\n<\/style>\n<div class=\"pth-feature-wrap\">\n    <div class=\"pth-feat-box\">\n        <div class=\"pth-feat-title\">\ud83d\udfe2 Real-Time Syntax Parsing<\/div>\n        <p class=\"pth-feat-text\">Instantly evaluates lightweight markup language and mathematically maps it to standard, structurally valid web tags.<\/p>\n    <\/div>\n    <div class=\"pth-feat-box\">\n        <div class=\"pth-feat-title\">\ud83d\udd35 Client-Side Rendering<\/div>\n        <p class=\"pth-feat-text\">Executes the string conversion logic entirely within the browser&#8217;s JavaScript engine, ensuring zero network latency during translations.<\/p>\n    <\/div>\n    <div class=\"pth-feat-box\">\n        <div class=\"pth-feat-title\">\ud83d\udfe3 Clean Output Generation<\/div>\n        <p class=\"pth-feat-text\">Strips away unnecessary formatting anomalies to deliver highly optimized, production-ready code blocks for deployment.<\/p>\n    <\/div>\n<\/div>\n<div class=\"pth-steps-wrap\">\n    <div class=\"pth-steps-title\">How to Use the Markdown to HTML Converter<\/div>\n    <div class=\"pth-steps-grid\">\n        <div class=\"pth-step-item\">\n            <div class=\"pth-step-num\">1<\/div>\n            <div class=\"pth-step-name\">Input Raw Data<\/div>\n            <p class=\"pth-step-desc\">Paste your formatted document, documentation strings, or text arrays directly into the primary Markdown to HTML Converter input field.<\/p>\n        <\/div>\n        <div class=\"pth-step-item\">\n            <div class=\"pth-step-num\">2<\/div>\n            <div class=\"pth-step-name\">Trigger Execution<\/div>\n            <p class=\"pth-step-desc\">The algorithmic engine automatically captures your keystrokes, instantly initiating the parsing and tag replacement sequence.<\/p>\n        <\/div>\n        <div class=\"pth-step-item\">\n            <div class=\"pth-step-num\">3<\/div>\n            <div class=\"pth-step-name\">Verify Translation<\/div>\n            <p class=\"pth-step-desc\">Review the visual preview area to ensure the mathematical translation correctly displays your intended headers, lists, and links.<\/p>\n        <\/div>\n        <div class=\"pth-step-item\">\n            <div class=\"pth-step-num\">4<\/div>\n            <div class=\"pth-step-name\">Extract Output<\/div>\n            <p class=\"pth-step-desc\">Click the dedicated copy button to transfer the fully sanitized web code directly to your local operating system clipboard.<\/p>\n        <\/div>\n    <\/div>\n<\/div>\n\n\n\n<p class=\"wp-block-paragraph\">Last updated: July 2026<\/p>\n\n\n\n<h2 id=\"\ud83d\udd34-writing-with-the-toolbar-and-the-live-preview\" class=\"wp-block-heading\">\ud83d\udd34&nbsp;<strong>Writing with the toolbar and the live preview<\/strong><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">The Editor tab pairs a plain-text pane with a formatted preview that updates as you type. The toolbar row above it saves you from remembering syntax: select a word and press Bold, Italic or the code button and it wraps the selection; press Block for a fenced code sample; press TOC and it scans your document for ## and ### headings and inserts a linked table of contents at the cursor. Sync scroll keeps the preview lined up with wherever you are typing, which matters once a document runs past one screen.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The stats row under the editor is not decoration. Word count and read time tell you how long a piece actually is before you publish it, and the heading count is a quick sanity check that you have not accidentally nested two H1s. Task lists render as real, disabled checkboxes in the preview, GitHub-flavoured tables get proper column alignment, and code fences carry their language name through to a class the theme&#8217;s syntax highlighter can pick up.<\/p>\n\n\n\n<h2 id=\"\ud83d\udfe1-converting-in-both-directions\" class=\"wp-block-heading\">\ud83d\udfe1&nbsp;<strong>Converting in both directions<\/strong><\/h2>\n\n\n<figure class=\"pth-article-figure pth-img-left\" style=\"float:left; width:600px; max-width:100%; margin:4px 28px 16px 0; clear:left;\"><img decoding=\"async\" src=\"https:\/\/schoolict.net\/tools\/wp-content\/uploads\/2026\/07\/Markdown_to_HTML_conversion_diagram-800x447.jpeg\" alt=\"Markdown converting to HTML and HTML converting back to Markdown\" width=\"600\" height=\"338\" loading=\"lazy\" data-no-lazy=\"1\" class=\"pth-article-img\" style=\"width:100%;height:auto;display:block;border-radius:10px;border:1px solid #e2e8f0;\"><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">The Convert tab is where the tool earns its name. Markdown to HTML takes whatever is in the Editor and turns it into semantic, ready-to-paste HTML \u2014 real h2 and h3 tags, a real table element, a real ul or ol, not a wall of styled divs. Copy it into a CMS post or download it as a complete standalone page.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The reverse direction is the one people usually cannot find anywhere: paste HTML copied from a page or an export, press Convert, and get Markdown back. Input: a snippet with headings, a table and a couple of links copied from a webpage. Output: clean Markdown with the table&#8217;s column alignment preserved and an ordered list correctly numbered rather than flattened into bullets. That direction is what makes migrating old HTML content into a Markdown-based wiki or a static site generator practical instead of a manual rewrite.<\/p>\n\n\n\n<h2 id=\"\ud83d\udfe2-the-table-builder-and-the-readme-generator\" class=\"wp-block-heading\">\ud83d\udfe2&nbsp;<strong>The table builder and the README generator<\/strong><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Hand-writing a Markdown table means counting pipe characters and lining up dashes, and it is the single most fiddly part of the syntax. The Table Builder tab replaces that with a spreadsheet-style grid: click a cell and type, add or remove rows and columns with a button, and toggle each column between left, centre and right alignment. Paste CSV instead and the grid fills itself in, header row included, ready to insert straight into the editor.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The README Builder tab exists because every project needs one and almost nobody enjoys writing it. Fill in the project name, a one-line description, the install command and a usage example, tick the sections you want, and it assembles a proper README.md: badges, a linked table of contents, features, installation, usage and a contributing section, in the order GitHub visitors expect. Download it directly or send it to the Editor tab to keep refining it there.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Two honest notes. The HTML-to-Markdown conversion handles the common structural tags well \u2014 headings, paragraphs, lists, tables, links, images, code and emphasis \u2014 but very complex nested layouts, inline styles and embedded scripts are stripped rather than translated, since Markdown has no equivalent for them. And the syntax highlighting in the exported HTML depends on the CSS class the code fence carries; the file itself has no highlighter built in. For a full code editor with a real JavaScript console and file export, see the <a href=\"https:\/\/schoolict.net\/tools\/offline-html-editor-with-css-js\/\" rel=\"noreferrer noopener\" target=\"_blank\">Web Studio<\/a>, and to compare two drafts line by line, the <a href=\"https:\/\/schoolict.net\/tools\/text-diff-checker-comparator\/\" rel=\"noreferrer noopener\" target=\"_blank\">Text Diff Checker<\/a> is the right tool.<\/p>\n\n\n\n<style>\n.pth-faq-section{margin:50px auto 40px;font-family:inherit;max-width:1480px;padding:0 20px;box-sizing:border-box}\n.pth-faq-header{font-size:1.8rem;font-weight:800;color:#0f172a;margin-bottom:25px;border-bottom:2px solid #e2e8f0;padding-bottom:10px;display:flex;align-items:center;gap:10px}\n.pth-faq-grid{display:grid;grid-template-columns:1fr;gap:20px}\n@media(min-width:768px){.pth-faq-grid{grid-template-columns:repeat(2,1fr)}}\n@media(min-width:1024px){.pth-faq-grid{grid-template-columns:repeat(3,1fr)}}\n.pth-faq-card{background:#f8fafc;padding:24px;border-radius:12px;border:1px solid #e2e8f0;transition:transform .2s ease;break-inside:avoid}\n.pth-faq-card:hover{transform:translateY(-3px);box-shadow:0 4px 12px rgba(0,0,0,.05)}\n.pth-faq-q{color:#0f172a;font-size:1rem;font-weight:700;margin:0 0 12px;line-height:1.4}\n.pth-faq-a{margin:0;font-size:.95rem;color:#1e293b;line-height:1.6;font-weight:500}\n<\/style>\n<div class=\"pth-faq-section\">\n  <div class=\"pth-faq-header\">\u2753 Frequently Asked Questions<\/div>\n  <div class=\"pth-faq-grid\">\n    <div class=\"pth-faq-card\"><p class=\"pth-faq-q\">Can it convert HTML back to Markdown?<\/p><p class=\"pth-faq-a\">Yes, in the Convert tab. Paste HTML and it maps headings, links, lists, tables, code blocks and emphasis back into Markdown syntax.<\/p><\/div>\n    <div class=\"pth-faq-card\"><p class=\"pth-faq-q\">Does the table builder support column alignment?<\/p><p class=\"pth-faq-a\">Yes. Click a column&#8217;s alignment button to cycle left, centre, right or default, and the separator row&#8217;s colon markers update automatically.<\/p><\/div>\n    <div class=\"pth-faq-card\"><p class=\"pth-faq-q\">Can I import a table from a spreadsheet?<\/p><p class=\"pth-faq-a\">Paste it as CSV in the Table Builder tab and press Load CSV into grid. Quoted fields with commas inside them are handled correctly.<\/p><\/div>\n    <div class=\"pth-faq-card\"><p class=\"pth-faq-q\">What does the README builder actually generate?<\/p><p class=\"pth-faq-a\">A complete README.md with badges, a linked table of contents, an about section, features, installation, usage and contributing, based on the fields and checkboxes you fill in.<\/p><\/div>\n    <div class=\"pth-faq-card\"><p class=\"pth-faq-q\">Are checkboxes and strikethrough supported?<\/p><p class=\"pth-faq-a\">Yes. Task list syntax renders as real disabled checkboxes in the preview, and double tildes render as strikethrough text.<\/p><\/div>\n    <div class=\"pth-faq-card\"><p class=\"pth-faq-q\">Does my document get uploaded anywhere?<\/p><p class=\"pth-faq-a\">No. Writing, converting and exporting all happen in your browser tab. Nothing is sent to a server, so it keeps working offline once the page has loaded.<\/p><\/div>\n    <div class=\"pth-faq-card\"><p class=\"pth-faq-q\">What happens to complex HTML when converting to Markdown?<\/p><p class=\"pth-faq-a\">Standard structural tags convert cleanly. Inline styles, scripts and unusual nested layouts are stripped, since Markdown has no syntax to represent them.<\/p><\/div>\n    <div class=\"pth-faq-card\"><p class=\"pth-faq-q\">Can I export as a standalone HTML file?<\/p><p class=\"pth-faq-a\">Yes. The Convert tab&#8217;s HTML download wraps your content in a complete page with basic styling, ready to open in any browser.<\/p><\/div>\n  <\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Markdown in, clean HTML out \u2014 and back again Most Markdown tools do one direction: type Markdown, see HTML. This studio does the whole loop. Write with a live preview, convert either way between Markdown and HTML, build a table by clicking instead of counting pipe characters, and generate a proper README from a short &#8230; <a title=\"Markdown to HTML Converter\" class=\"read-more\" href=\"https:\/\/schoolict.net\/tools\/markdown-to-html-converter\/\" aria-label=\"Read more about Markdown to HTML Converter\">Read more<\/a><\/p>\n","protected":false},"author":1,"featured_media":807,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-805","page","type-page","status-publish","has-post-thumbnail"],"_links":{"self":[{"href":"https:\/\/schoolict.net\/tools\/wp-json\/wp\/v2\/pages\/805","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/schoolict.net\/tools\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/schoolict.net\/tools\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/schoolict.net\/tools\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/schoolict.net\/tools\/wp-json\/wp\/v2\/comments?post=805"}],"version-history":[{"count":6,"href":"https:\/\/schoolict.net\/tools\/wp-json\/wp\/v2\/pages\/805\/revisions"}],"predecessor-version":[{"id":7023,"href":"https:\/\/schoolict.net\/tools\/wp-json\/wp\/v2\/pages\/805\/revisions\/7023"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/schoolict.net\/tools\/wp-json\/wp\/v2\/media\/807"}],"wp:attachment":[{"href":"https:\/\/schoolict.net\/tools\/wp-json\/wp\/v2\/media?parent=805"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}