Markdown 在线编辑预览工具 – mylogs.cn

Markdown 实时预览

左侧输入 Markdown，右侧即时渲染预览。支持标题、加粗、列表、代码块、链接等常用语法。

Markdown 输入

<span class="tool-label">预览</span>
        <div id="mdPreview" class="tool-output" style="background:#fff;min-height:200px;font-family:-apple-system,sans-serif;font-size:14px;line-height:1.7;"></div>
      </div>
    </div>
    <div class="btn-row">
      <button class="tool-btn danger" onclick="clearMD()">清空</button>
    </div>
  </div>
</div>
<script>
function escapeHtml(text) {
  return text.replace(/&/g,'&').replace(/</g,'<').replace(/>/g,'>');
}
function renderMD() {
  var md = document.getElementById('mdInput').value;
  var html = md
    .replace(/^### (.+)$/gm, '<h4 style="margin:8px 0">$1</h4>')
    .replace(/^## (.+)$/gm, '<h3 style="margin:10px 0">$1</h3>')
    .replace(/^# (.+)$/gm, '<h2 style="margin:12px 0;border-bottom:1px solid #eee;padding-bottom:6px">$1</h2>')
    .replace(/\*\*(.+?)\*\*/g, '<strong>$1</strong>')
    .replace(/\*(.+?)\*/g, '<em>$1</em>')
    .replace(/`([^`]+)`/g, '<code style="background:#f1f5f9;padding:2px 6px;border-radius:4px;font-size:12px">$1</code>')
    .replace(/^> (.+)$/gm, '<blockquote style="border-left:3px solid #2563eb;padding-left:12px;color:#666;margin:8px 0">$1</blockquote>')
    .replace(/^- (.+)$/gm, '<li style="margin-left:20px">$1</li>')
    .replace(/^\d+\. (.+)$/gm, '<li style="margin-left:20px">$1</li>')
    .replace(/(<li[^>]*>.*<\/li>)\n(?=<li)/g, '$1')
    .replace(/```(\w+)?\n([\s\S]*?)```/g, '<pre style="background:#f1f5f9;padding:12px;border-radius:8px;overflow-x:auto;font-size:12px"><code>$2</code></pre>')
    .replace(/^---$/gm, '<hr style="border:none;border-top:1px solid #ddd;margin:16px 0">')
    .replace(/\[(.+?)\]$(.+?)$/g, '<a href="$2" target="_blank" style="color:#2563eb">$1</a>')
    .replace(/\n\n/g, '</p><p style="margin:8px 0">')
    .replace(/\n/g, '<br>');
  html = '<p style="margin:8px 0">' + html + '</p>';
  document.getElementById('mdPreview').innerHTML = html;
}
function clearMD() {
  document.getElementById('mdInput').value='';
  document.getElementById('mdPreview').innerHTML='';
}
// Initial render
renderMD();
</script>
</div>
</main>

<footer class="wp-block-template-part">
<div class="wp-block-group alignfull has-background-color has-global-padding is-layout-constrained wp-container-core-group-is-layout-4c6f976b wp-block-group-is-layout-constrained" style="margin-top:0;margin-bottom:0;padding-top:var(--wp--preset--spacing--30);padding-right:var(--wp--preset--spacing--30);padding-bottom:var(--wp--preset--spacing--30);padding-left:var(--wp--preset--spacing--30)">
<div class="wp-block-group alignwide has-small-font-size has-global-padding is-layout-constrained wp-container-core-group-is-layout-d62cbcc2 wp-block-group-is-layout-constrained">
<div class="wp-block-group alignwide is-nowrap is-layout-flex wp-container-core-group-is-layout-9ba6dbca wp-block-group-is-layout-flex"><h1 style="font-size:clamp(0.929rem, 0.929rem + ((1vw - 0.2rem) * 0.966), 1.4rem)" class="has-link-color wp-elements-b6039afceece5c2664ebf5510704470e wp-block-site-title has-text-color has-accent-5-color wp-container-content-b0223bd5"><a href="https://mylogs.cn" target="_self" rel="home">mylogs.cn</a></h1>

<div class="wp-block-group wp-container-content-9cfa9a5a is-vertical is-content-justification-center is-layout-flex wp-container-core-group-is-layout-03f69159 wp-block-group-is-layout-flex">
<p class="has-text-align-center has-small-font-size wp-block-paragraph"><a href="https://beian.miit.gov.cn/">冀ICP备15027420号</a></p>
</div>

<p class="wp-block-paragraph"><a href="https://xbb.mylogs.cn" target="_blank" rel="noreferrer noopener">个人博客：xbb</a></p>
</div>
</div>
</div>
</footer>
</div>
<script type="speculationrules">
{"prefetch":[{"source":"document","where":{"and":[{"href_matches":"/*"},{"not":{"href_matches":["/wp-*.php","/wp-admin/*","/wp-content/uploads/*","/wp-content/*","/wp-content/plugins/*","/wp-content/themes/twentytwentyfour/*","/*\\?(.+)"]}},{"not":{"selector_matches":"a[rel~=\"nofollow\"]"}},{"not":{"selector_matches":".no-prefetch, .no-prefetch a"}}]},"eagerness":"conservative"}]}
</script>
<script data-wp-router-options="{"loadOnClientNavigation":true}" fetchpriority="low" id="@wordpress/block-library/navigation/view-js-module" src="https://mylogs.cn/wp-includes/js/dist/script-modules/block-library/navigation/view.min.js?ver=96a846e1d7b789c39ab9" type="module"></script>
<script id="wp-emoji-settings" type="application/json">
{"baseUrl":"https://s.w.org/images/core/emoji/17.0.2/72x72/","ext":".png","svgUrl":"https://s.w.org/images/core/emoji/17.0.2/svg/","svgExt":".svg","source":{"concatemoji":"https://mylogs.cn/wp-includes/js/wp-emoji-release.min.js?ver=e85525c5c2a03564b11e6340119af08a"}}
</script>
<script type="module">
/*! This file is auto-generated */
const a=JSON.parse(document.getElementById("wp-emoji-settings").textContent),o=(window._wpemojiSettings=a,"wpEmojiSettingsSupports"),s=["flag","emoji"];function i(e){try{var t={supportTests:e,timestamp:(new Date).valueOf()};sessionStorage.setItem(o,JSON.stringify(t))}catch(e){}}function c(e,t,n){e.clearRect(0,0,e.canvas.width,e.canvas.height),e.fillText(t,0,0);t=new Uint32Array(e.getImageData(0,0,e.canvas.width,e.canvas.height).data);e.clearRect(0,0,e.canvas.width,e.canvas.height),e.fillText(n,0,0);const a=new Uint32Array(e.getImageData(0,0,e.canvas.width,e.canvas.height).data);return t.every((e,t)=>e===a[t])}function p(e,t){e.clearRect(0,0,e.canvas.width,e.canvas.height),e.fillText(t,0,0);var n=e.getImageData(16,16,1,1);for(let e=0;e<n.data.length;e++)if(0!==n.data[e])return!1;return!0}function u(e,t,n,a){switch(t){case"flag":return n(e,"\ud83c\udff3\ufe0f\u200d\u26a7\ufe0f","\ud83c\udff3\ufe0f\u200b\u26a7\ufe0f")?!1:!n(e,"\ud83c\udde8\ud83c\uddf6","\ud83c\udde8\u200b\ud83c\uddf6")&&!n(e,"\ud83c\udff4\udb40\udc67\udb40\udc62\udb40\udc65\udb40\udc6e\udb40\udc67\udb40\udc7f","\ud83c\udff4\u200b\udb40\udc67\u200b\udb40\udc62\u200b\udb40\udc65\u200b\udb40\udc6e\u200b\udb40\udc67\u200b\udb40\udc7f");case"emoji":return!a(e,"\ud83e\u1fac8")}return!1}function f(e,t,n,a){let r;const o=(r="undefined"!=typeof WorkerGlobalScope&&self instanceof WorkerGlobalScope?new OffscreenCanvas(300,150):document.createElement("canvas")).getContext("2d",{willReadFrequently:!0}),s=(o.textBaseline="top",o.font="600 32px Arial",{});return e.forEach(e=>{s[e]=t(o,e,n,a)}),s}function r(e){var t=document.createElement("script");t.src=e,t.defer=!0,document.head.appendChild(t)}a.supports={everything:!0,everythingExceptFlag:!0},new Promise(t=>{let n=function(){try{var e=JSON.parse(sessionStorage.getItem(o));if("object"==typeof e&&"number"==typeof e.timestamp&&(new Date).valueOf()<e.timestamp+604800&&"object"==typeof e.supportTests)return e.supportTests}catch(e){}return null}();if(!n){if("undefined"!=typeof Worker&&"undefined"!=typeof OffscreenCanvas&&"undefined"!=typeof URL&&URL.createObjectURL&&"undefined"!=typeof Blob)try{var e="postMessage("+f.toString()+"("+[JSON.stringify(s),u.toString(),c.toString(),p.toString()].join(",")+"));",a=new Blob([e],{type:"text/javascript"});const r=new Worker(URL.createObjectURL(a),{name:"wpTestEmojiSupports"});return void(r.onmessage=e=>{i(n=e.data),r.terminate(),t(n)})}catch(e){}i(n=f(s,u,c,p))}t(n)}).then(e=>{for(const n in e)a.supports[n]=e[n],a.supports.everything=a.supports.everything&&a.supports[n],"flag"!==n&&(a.supports.everythingExceptFlag=a.supports.everythingExceptFlag&&a.supports[n]);var t;a.supports.everythingExceptFlag=a.supports.everythingExceptFlag&&!a.supports.flag,a.supports.everything||((t=a.source||{}).concatemoji?r(t.concatemoji):t.wpemoji&&t.twemoji&&(r(t.twemoji),r(t.wpemoji)))});
//# sourceURL=https://mylogs.cn/wp-includes/js/wp-emoji-loader.min.js
</script>
</body>
</html>