<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <!-- 基础SEO标签 - 将通过JavaScript动态更新 -->
    <title>Markdown 预览编辑转换工具 - 在线 Markdown 编辑器和转换器</title>
    <meta
      name="description"
      content="开源免费Markdown编辑器：无付费/广告，支持预览、多格式导出与公式渲染。"
    />
    <meta
      name="keywords"
      content="Markdown编辑器,在线编辑器,Markdown转换,PDF导出,图片导出,数学公式,代码高亮,实时预览"
    />
    <meta name="author" content="blackmady" />
    <meta name="robots" content="index, follow" />
    <meta name="language" content="zh-CN" />

    <!-- Open Graph 标签 - 将通过JavaScript动态更新 -->
    <meta property="og:type" content="website" />
    <meta
      property="og:title"
      content="Markdown 预览编辑转换工具 - 在线 Markdown 编辑器和转换器"
    />
    <meta
      property="og:description"
      content="开源免费Markdown编辑器：无付费/广告，支持预览、多格式导出与公式渲染。"
    />
    <meta property="og:url" content="https://md.pgit.top" />
    <meta property="og:site_name" content="MD2IMG" />
    <meta property="og:locale" content="zh_CN" />
    <meta property="og:image" content="https://github.com/blackmady/markdown-to-image/raw/main/md.pgit.top.webp"> <!-- 分享时显示的图片 -->

    <!-- Twitter Card 标签 - 将通过JavaScript动态更新 -->
    <meta name="twitter:card" content="summary_large_image" />
    <meta
      name="twitter:title"
      content="Markdown 预览编辑转换工具 - 在线 Markdown 编辑器和转换器"
    />
    <meta
      name="twitter:description"
      content="开源免费Markdown编辑器：无付费/广告，支持预览、多格式导出与公式渲染。"
    />
    <meta name="twitter:creator" content="@blackmady" />

    <meta name="twitter:image" content="https://github.com/blackmady/markdown-to-image/raw/main/md.pgit.top.webp"> <!-- 分享时显示的图片 -->

    <!-- 网站图标 -->
    <link rel="icon" type="image/x-icon" href="./assets/favicon-BOFI7mv5.ico" />
    <link
      rel="apple-touch-icon"
      sizes="180x180"
      href="./assets/apple-touch-icon-BBHU2Axk.png"
    />
    <link
      rel="icon"
      type="image/png"
      sizes="32x32"
      href="./assets/favicon-32x32-qoBdFsfs.png"
    />
    <link
      rel="icon"
      type="image/png"
      sizes="16x16"
      href="./assets/favicon-16x16-3fhx8kht.png"
    />
    <link rel="manifest" href="./assets/site-CJYIDv6n.webmanifest" />

    <!-- 样式表 -->
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/github.min.css"
      id="hljs-light"
    />
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/github-dark.min.css"
      id="hljs-dark"
      disabled
    />

    <!-- 国际化脚本 - 动态加载 -->
    <script>
      // 动态加载i18n文件
      (function() {
        // 开发环境直接加载
        if (location.hostname === 'localhost' || location.hostname === '127.0.0.1') {
          // 检查是否为开发服务器（通过端口判断）
          if (location.port === '5173' || location.port === '3000') {
            const script = document.createElement('script');
            script.src = './i18n.js';
            script.defer = true;
            document.head.appendChild(script);
          } else {
            // 生产环境构建后的本地测试
            fetch('./manifest.json')
              .then(response => response.json())
              .then(manifest => {
                const i18nFile = manifest['i18n.js'];
                if (i18nFile) {
                  const script = document.createElement('script');
                  script.src = './' + i18nFile.file;
                  script.defer = true;
                  document.head.appendChild(script);
                }
              })
              .catch(() => {
                // 如果manifest加载失败，尝试直接加载
                const script = document.createElement('script');
                script.src = './i18n.js';
                script.defer = true;
                document.head.appendChild(script);
              });
          }
        } else {
          // 生产环境从manifest获取实际文件名
          fetch('./manifest.json')
            .then(response => response.json())
            .then(manifest => {
              const i18nFile = manifest['i18n.js'];
              if (i18nFile) {
                const script = document.createElement('script');
                script.src = './' + i18nFile.file;
                script.defer = true;
                document.head.appendChild(script);
              }
            })
            .catch(() => {
              // 如果manifest加载失败，尝试直接加载
              const script = document.createElement('script');
              script.src = './i18n.js';
              script.defer = true;
              document.head.appendChild(script);
            });
        }
      })();
    </script>

    <!-- 结构化数据 - 将通过JavaScript动态更新 -->
    <script type="application/ld+json">
      {
        "@context": "https://schema.org",
        "@type": "WebApplication",
        "name": "Markdown 预览编辑转换工具 - 在线 Markdown 编辑器和转换器",
        "description": "开源免费Markdown编辑器：无付费/广告，支持预览、多格式导出与公式渲染。",
        "url": "https://md.pgit.top",
        "applicationCategory": "DeveloperApplication",
        "operatingSystem": "Web Browser",
        "offers": {
          "@type": "Offer",
          "price": "0",
          "priceCurrency": "CNY"
        },
        "author": {
          "@type": "Person",
          "name": "blackmady"
        },
        "publisher": {
          "@type": "Organization",
          "name": "blackmady"
        },
        "featureList": [
          "实时Markdown预览",
          "数学公式支持",
          "代码语法高亮",
          "多格式导出(HTML/PDF/PNG/JPG/WEBP)",
          "暗黑模式",
          "目录导航",
          "文件管理"
        ]
      }
    </script>
    <script type="module" crossorigin src="./assets/main-BEGlFY8t.js"></script>
    <link rel="modulepreload" crossorigin href="./assets/codemirror-DGJVhSoX.js">
    <link rel="modulepreload" crossorigin href="./assets/markdown-BshV6C5s.js">
    <link rel="modulepreload" crossorigin href="./assets/export-ByUXxKEw.js">
    <link rel="stylesheet" crossorigin href="./assets/main-B6AIMSFk.css">
  
                <script type="text/javascript">
                    (function(c,l,a,r,i,t,y){
                        c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
                        t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
                        y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
                    })(window, document, "clarity", "script", "to0gxotnk7");
                </script>
</head>
  <body>
    <div class="app-container">
      <!-- 工具栏 -->
      <div class="toolbar">
        <div class="toolbar-left">
          <button
            id="toggleToc"
            class="toolbar-btn"
            title="切换目录"
            data-i18n-title="toolbar.toggleToc"
          >
            <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
              <path
                d="M3 9h14V7H3v2zm0 4h14v-2H3v2zm0 4h14v-2H3v2zm16 0h2v-2h-2v2zm0-10v2h2V7h-2zm0 6h2v-2h-2v2z"
              />
            </svg>
          </button>
          <button
            id="toggleFullscreen"
            class="toolbar-btn"
            title="全屏编辑"
            data-i18n-title="toolbar.fullscreen"
          >
            <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
              <path
                d="M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z"
              />
            </svg>
          </button>
          <div class="toolbar-divider"></div>
          <button
            id="newFile"
            class="toolbar-btn"
            title="新建文件"
            data-i18n-title="toolbar.newFile"
          >
            <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
              <path
                d="M14,2H6A2,2 0 0,0 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2M18,20H6V4H13V9H18V20Z"
              />
            </svg>
          </button>
          <button
            id="openFile"
            class="toolbar-btn"
            title="打开文件"
            data-i18n-title="toolbar.openFile"
          >
            <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
              <path
                d="M10,4H4C2.89,4 2,4.89 2,6V18A2,2 0 0,0 4,20H20A2,2 0 0,0 22,18V8C22,6.89 21.1,6 20,6H12L10,4Z"
              />
            </svg>
          </button>
          <button
            id="saveFile"
            class="toolbar-btn"
            title="保存文件"
            data-i18n-title="toolbar.saveFile"
          >
            <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
              <path
                d="M15,9H5V5H15M12,19A3,3 0 0,1 9,16A3,3 0 0,1 12,13A3,3 0 0,1 15,16A3,3 0 0,1 12,19M17,3H5C3.89,3 3,3.9 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V7L17,3Z"
              />
            </svg>
          </button>
          <button
            id="restoreDraft"
            class="toolbar-btn"
            title="恢复草稿"
            data-i18n-title="toolbar.restoreDraft"
            style="display: none;"
          >
            <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
              <path
                d="M14,2H6A2,2 0 0,0 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2M18,20H6V4H13V9H18M12,19L8,15H10.5V12H13.5V15H16"
              />
            </svg>
          </button>
          <div class="history-dropdown">
            <button
              id="historyBtn"
              class="toolbar-btn"
              title="历史文档"
              data-i18n-title="history.title"
            >
              <svg
                width="16"
                height="16"
                viewBox="0 0 24 24"
                fill="currentColor"
              >
                <path
                  d="M13.5,8H12V13L16.28,15.54L17,14.33L13.5,12.25V8M13,3A9,9 0 0,0 4,12H1L4.96,16.03L9,12H6A7,7 0 0,1 13,5A7,7 0 0,1 20,12A7,7 0 0,1 13,19C11.07,19 9.32,18.21 8.06,16.94L6.64,18.36C8.27,20 10.5,21 13,21A9,9 0 0,0 22,12A9,9 0 0,0 13,3"
                />
              </svg>
            </button>
            <div class="history-menu">
              <div class="history-header">
                <span data-i18n="history.title">历史文档</span>
              </div>
              <div class="history-list" id="historyList">
                <div class="history-empty" data-i18n="history.empty">
                  暂无保存的文档
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="toolbar-center">
          <span class="app-title" data-i18n="appTitle">Markdown 预览编辑转换工具</span>
          <span class="app-version">v1.0.37</span>
        </div>
        <div class="toolbar-right">
          <!-- 分享按钮 -->
          <div class="share-dropdown">
            <button
              id="shareBtn"
              class="toolbar-btn share-btn"
              title="分享"
              data-i18n-title="toolbar.share"
            >
              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                <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>
              <span data-i18n="toolbar.share">分享</span>
            </button>
            <div class="share-menu">
              <div class="share-platforms">
                <!-- 国外平台 -->
                <button class="share-platform-btn" data-sharer="facebook" data-title="Markdown 预览编辑转换工具" data-url="">
                  <svg width="16" height="16" viewBox="0 0 24 24" fill="#1877F2">
                    <path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"/>
                  </svg>
                  <span data-i18n="share.facebook">Facebook</span>
                </button>
                <button class="share-platform-btn" data-sharer="twitter" data-title="Markdown 预览编辑转换工具" data-url="">
                  <svg width="16" height="16" viewBox="0 0 24 24" fill="#000000">
                    <path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/>
                  </svg>
                  <span data-i18n="share.twitter">X</span>
                </button>
                <button class="share-platform-btn" data-sharer="linkedin" data-title="Markdown 预览编辑转换工具" data-url="">
                  <svg width="16" height="16" viewBox="0 0 24 24" fill="#0077B5">
                    <path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/>
                  </svg>
                  <span data-i18n="share.linkedin">LinkedIn</span>
                </button>
                <button class="share-platform-btn" data-sharer="reddit" data-title="Markdown 预览编辑转换工具" data-url="">
                  <svg width="16" height="16" viewBox="0 0 24 24" fill="#FF4500">
                    <path d="M12 0A12 12 0 0 0 0 12a12 12 0 0 0 12 12 12 12 0 0 0 12-12A12 12 0 0 0 12 0zm5.01 4.744c.688 0 1.25.561 1.25 1.249a1.25 1.25 0 0 1-2.498.056l-2.597-.547-.8 3.747c1.824.07 3.48.632 4.674 1.488.308-.309.73-.491 1.207-.491.968 0 1.754.786 1.754 1.754 0 .716-.435 1.333-1.01 1.614a3.111 3.111 0 0 1 .042.52c0 2.694-3.13 4.87-7.004 4.87-3.874 0-7.004-2.176-7.004-4.87 0-.183.015-.366.043-.534A1.748 1.748 0 0 1 4.028 12c0-.968.786-1.754 1.754-1.754.463 0 .898.196 1.207.49 1.207-.883 2.878-1.43 4.744-1.487l.885-4.182a.342.342 0 0 1 .14-.197.35.35 0 0 1 .238-.042l2.906.617a1.214 1.214 0 0 1 1.108-.701zM9.25 12C8.561 12 8 12.562 8 13.25c0 .687.561 1.248 1.25 1.248.687 0 1.248-.561 1.248-1.249 0-.688-.561-1.249-1.249-1.249zm5.5 0c-.687 0-1.248.561-1.248 1.25 0 .687.561 1.248 1.249 1.248.688 0 1.249-.561 1.249-1.249 0-.687-.562-1.249-1.25-1.249zm-5.466 3.99a.327.327 0 0 0-.231.094.33.33 0 0 0 0 .463c.842.842 2.484.913 2.961.913.477 0 2.105-.056 2.961-.913a.361.361 0 0 0 .029-.463.33.33 0 0 0-.464 0c-.547.533-1.684.73-2.512.73-.828 0-1.979-.196-2.512-.73a.326.326 0 0 0-.232-.095z"/>
                  </svg>
                  <span data-i18n="share.reddit">Reddit</span>
                </button>
                <!-- 国内平台 -->
                <button class="share-platform-btn" data-sharer="weibo" data-title="Markdown 预览编辑转换工具" data-url="">
                  <svg width="16" height="16" viewBox="0 0 24 24" fill="#E6162D">
                    <path d="M10.098 20.323c-3.977.391-7.414-1.406-7.672-4.02-.259-2.609 2.759-5.047 6.74-5.441 3.979-.394 7.413 1.404 7.671 4.018.259 2.6-2.759 5.049-6.739 5.443zm8.717-11.69c-.45-.12-.759-.2-.526-.73.51-1.15.562-2.141.034-2.851-1.016-1.36-3.783-.646-6.937 1.65 0 0-.992.725-.738-.298.488-2.021.415-3.716-.362-4.693C9.78.995 8.22 1.645 8.22 1.645s-2.603 1.114-3.874 4.177c-.9 2.166-.034 4.018 2.216 6.522 0 0 2.65 2.717 5.879 2.717 4.71 0 6.973-3.709 6.973-3.709 1.284-2.126.034-3.395-1.399-2.82z"/>
                  </svg>
                  <span data-i18n="share.weibo">微博</span>
                </button>
                <button class="share-platform-btn" data-sharer="qq" data-title="Markdown 预览编辑转换工具" data-url="">
                  <svg width="16" height="16" viewBox="0 0 24 24" fill="#12B7F5">
                    <path d="M21.395 15.035a39.798 39.798 0 0 0-.803-2.264l-1.079-2.695c.001-.032.014-.562.014-.836C19.526 4.632 16.52 0 12.017 0S4.507 4.632 4.507 9.241c0 .274.013.804.014.836l-1.08 2.695a39.798 39.798 0 0 0-.802 2.264c-1.021 3.283-.69 4.643-.438 4.673.54.065 2.103-2.472 2.103-2.472 1.080 1.897 3.145 3.222 5.713 3.222s4.632-1.325 5.713-3.222c0 0 1.563 2.537 2.103 2.472.252-.03.583-1.39-.438-4.673z"/>
                  </svg>
                  <span data-i18n="share.qq">QQ空间</span>
                </button>
                <button class="share-platform-btn" data-sharer="telegram" data-title="Markdown 预览编辑转换工具" data-url="">
                  <svg width="16" height="16" viewBox="0 0 24 24" fill="#0088CC">
                    <path d="M11.944 0A12 12 0 0 0 0 12a12 12 0 0 0 12 12 12 12 0 0 0 12-12A12 12 0 0 0 12 0a12 12 0 0 0-.056 0zm4.962 7.224c.1-.002.321.023.465.14a.506.506 0 0 1 .171.325c.016.093.036.306.02.472-.18 1.898-.962 6.502-1.36 8.627-.168.9-.499 1.201-.82 1.23-.696.065-1.225-.46-1.9-.902-1.056-.693-1.653-1.124-2.678-1.8-1.185-.78-.417-1.21.258-1.91.177-.184 3.247-2.977 3.307-3.23.007-.032.014-.15-.056-.212s-.174-.041-.249-.024c-.106.024-1.793 1.14-5.061 3.345-.48.33-.913.49-1.302.48-.428-.008-1.252-.241-1.865-.44-.752-.245-1.349-.374-1.297-.789.027-.216.325-.437.893-.663 3.498-1.524 5.83-2.529 6.998-3.014 3.332-1.386 4.025-1.627 4.476-1.635z"/>
                  </svg>
                  <span data-i18n="share.telegram">Telegram</span>
                </button>
                <button class="share-platform-btn" data-sharer="whatsapp" data-title="Markdown 预览编辑转换工具" data-url="">
                  <svg width="16" height="16" viewBox="0 0 24 24" fill="#25D366">
                    <path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893A11.821 11.821 0 0020.465 3.488"/>
                  </svg>
                  <span data-i18n="share.whatsapp">WhatsApp</span>
                </button>
              </div>
            </div>
          </div>

          <a
            href="https://github.com/blackmady/markdown-to-image/issues"
            target="_blank"
            class="github-star-link"
            title="GitHub Issues"
            data-i18n-title="toolbar.githubIssues"
          >
            <img
              src="https://img.shields.io/github/issues/blackmady/markdown-to-image?style=flat&logo=github"
              alt="GitHub Issues"
            />
          </a>
          <a
            href="https://github.com/blackmady/markdown-to-image"
            target="_blank"
            class="github-star-link"
            title="GitHub Star"
            data-i18n-title="toolbar.githubStar"
          >
            
            <img
              src="https://img.shields.io/github/stars/blackmady/markdown-to-image?style=flat&logo=github"
              alt="GitHub Stars"
            />
          </a>
          <div class="export-dropdown">
            <button
              id="exportBtn"
              class="toolbar-btn"
              title="导出"
              data-i18n-title="toolbar.export"
            >
              <svg
                width="16"
                height="16"
                viewBox="0 0 24 24"
                fill="currentColor"
              >
                <path
                  d="M14,2H6A2,2 0 0,0 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2M18,20H6V4H13V9H18V20Z"
                />
              </svg>
              <span data-i18n="toolbar.export">导出</span>
              <svg
                width="12"
                height="12"
                viewBox="0 0 24 24"
                fill="currentColor"
              >
                <path d="M7,10L12,15L17,10H7Z" />
              </svg>
            </button>
            <div class="export-menu">
              <button data-format="markdown" data-i18n="export.markdown">
                导出 Markdown
              </button>
              <button data-format="html" data-i18n="export.html">
                导出 HTML
              </button>
              <button data-format="pdf" data-i18n="export.pdf">导出 PDF</button>
              <button data-format="png" data-i18n="export.png">导出 PNG</button>
              <button data-format="jpg" data-i18n="export.jpg">导出 JPG</button>
              <button data-format="webp" data-i18n="export.webp">
                导出 WEBP
              </button>
            </div>
          </div>
          <div class="toolbar-divider"></div>
          <div class="language-selector">
            <button
              id="languageBtn"
              class="toolbar-btn"
              title="选择语言"
              data-i18n-title="toolbar.language"
            >
              <svg
                width="16"
                height="16"
                viewBox="0 0 24 24"
                fill="currentColor"
              >
                <path
                  d="M12.87,15.07L10.33,12.56L10.36,12.53C12.1,10.59 13.34,8.36 14.07,6H17V4H10V2H8V4H1V6H12.17C11.5,7.92 10.44,9.75 9,11.35C8.07,10.32 7.3,9.19 6.69,8H4.69C5.42,9.63 6.42,11.17 7.67,12.56L2.58,17.58L4,19L9,14L12.11,17.11L12.87,15.07Z"
                />
              </svg>
              <span id="currentLanguage">中文</span>
              <svg
                width="12"
                height="12"
                viewBox="0 0 24 24"
                fill="currentColor"
              >
                <path d="M7,10L12,15L17,10H7Z" />
              </svg>
            </button>
            <div class="language-menu">
              <button data-lang="zh-CN">简体中文</button>
              <button data-lang="zh-TW">繁體中文</button>
              <button data-lang="en">English</button>
            </div>
          </div>
          <div class="toolbar-divider"></div>
          <button
            id="toggleTheme"
            class="toolbar-btn"
            title="切换主题"
            data-i18n-title="toolbar.theme"
          >
            <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
              <path
                d="M17.75,4.09L15.22,6.03L16.13,9.09L13.5,7.28L10.87,9.09L11.78,6.03L9.25,4.09L12.44,4L13.5,1L14.56,4L17.75,4.09M21.25,11L19.61,12.25L20.2,14.23L18.5,13.06L16.8,14.23L17.39,12.25L15.75,11L17.81,10.95L18.5,9L19.19,10.95L21.25,11M18.97,15.95C19.8,15.87 20.69,17.05 20.16,17.8C19.84,18.25 19.5,18.67 19.08,19.07C15.17,23 8.84,23 4.94,19.07C1.03,15.17 1.03,8.83 4.94,4.93C5.34,4.53 5.76,4.17 6.21,3.85C6.96,3.32 8.14,4.21 8.06,5.04C7.79,7.9 8.75,10.87 10.95,13.06C13.14,15.26 16.1,16.22 18.97,15.95M17.33,17.97C14.5,17.81 11.7,16.64 9.53,14.5C7.36,12.31 6.2,9.5 6.04,6.68C3.23,9.82 3.34,14.4 6.35,17.41C9.37,20.43 14,20.54 17.33,17.97Z"
              />
            </svg>
          </button>
        </div>
      </div>
      <div class="editor-toolbar">
        <div class="toolbar-group">
          <button class="editor-toolbar-btn" data-action="bold" title="粗体" data-i18n-title="toolbar.bold">
            <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
              <path
                d="M13.5,15.5H10V12.5H13.5A1.5,1.5 0 0,1 15,14A1.5,1.5 0 0,1 13.5,15.5M10,6.5H13A1.5,1.5 0 0,1 14.5,8A1.5,1.5 0 0,1 13,9.5H10M15.6,10.79C16.57,10.11 17.25,9.02 17.25,8C17.25,5.74 15.5,4 13.25,4H7V18H14.04C16.14,18 17.75,16.3 17.75,14.21C17.75,12.69 16.89,11.39 15.6,10.79Z"
              />
            </svg>
          </button>
          <button class="editor-toolbar-btn" data-action="italic" title="斜体" data-i18n-title="toolbar.italic">
            <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
              <path
                d="M10,4V7H12.21L8.79,15H6V18H14V15H11.79L15.21,7H18V4H10Z"
              />
            </svg>
          </button>
          <button
            class="editor-toolbar-btn"
            data-action="strikethrough"
            title="删除线"
            data-i18n-title="toolbar.strikethrough"
          >
            <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
              <path
                d="M3,14H21V12H3M5,4V7H10V10H14V7H19V4M10,19H14V16H10V19Z"
              />
            </svg>
          </button>
          <button
            class="editor-toolbar-btn"
            data-action="code"
            title="行内代码"
            data-i18n-title="toolbar.inlineCode"
          >
            <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
              <path
                d="M14.6,16.6L19.2,12L14.6,7.4L16,6L22,12L16,18L14.6,16.6M9.4,16.6L4.8,12L9.4,7.4L8,6L2,12L8,18L9.4,16.6Z"
              />
            </svg>
          </button>
        </div>

        <div class="toolbar-divider"></div>

        <div class="toolbar-group">
          <button class="editor-toolbar-btn" data-action="h1" title="一级标题" data-i18n-title="toolbar.heading1">
            H1
          </button>
          <button class="editor-toolbar-btn" data-action="h2" title="二级标题" data-i18n-title="toolbar.heading2">
            H2
          </button>
          <button class="editor-toolbar-btn" data-action="h3" title="三级标题" data-i18n-title="toolbar.heading3">
            H3
          </button>
        </div>

        <div class="toolbar-divider"></div>

        <div class="toolbar-group">
          <button class="editor-toolbar-btn" data-action="ul" title="无序列表" data-i18n-title="toolbar.unorderedList">
            <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
              <path
                d="M7,5H21V7H7V5M7,13V11H21V13H7M4,4.5A1.5,1.5 0 0,1 5.5,6A1.5,1.5 0 0,1 4,7.5A1.5,1.5 0 0,1 2.5,6A1.5,1.5 0 0,1 4,4.5M4,10.5A1.5,1.5 0 0,1 5.5,12A1.5,1.5 0 0,1 4,13.5A1.5,1.5 0 0,1 2.5,12A1.5,1.5 0 0,1 4,10.5M7,19V17H21V19H7M4,16.5A1.5,1.5 0 0,1 5.5,18A1.5,1.5 0 0,1 4,19.5A1.5,1.5 0 0,1 2.5,18A1.5,1.5 0 0,1 4,16.5Z"
              />
            </svg>
          </button>
          <button class="editor-toolbar-btn" data-action="ol" title="有序列表" data-i18n-title="toolbar.orderedList">
            <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
              <path
                d="M7,13V11H21V13H7M7,19V17H21V19H7M7,7V5H21V7H7M3,8V5H2V4H4V8H3M2,17V16H5V20H2V19H4V18.5H3V17.5H4V17H2M4.25,10A0.75,0.75 0 0,1 5,10.75C5,10.95 4.92,11.14 4.79,11.27L3.12,13H5V14H2V13.08L4,11H2V10H4.25Z"
              />
            </svg>
          </button>
          <button class="editor-toolbar-btn" data-action="quote" title="引用" data-i18n-title="toolbar.blockquote">
            <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
              <path
                d="M14,17H17L19,13V7H13V13H16M6,17H9L11,13V7H5V13H8L6,17Z"
              />
            </svg>
          </button>
          <button
            class="editor-toolbar-btn"
            data-action="codeblock"
            title="代码块"
            data-i18n-title="toolbar.codeBlock"
          >
            <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
              <path
                d="M8,3A2,2 0 0,0 6,5V9A2,2 0 0,1 4,11H3V13H4A2,2 0 0,1 6,15V19A2,2 0 0,0 8,21H10V19H8V14A2,2 0 0,0 6,12A2,2 0 0,0 8,10V5H10V3M16,3A2,2 0 0,1 18,5V9A2,2 0 0,0 20,11H21V13H20A2,2 0 0,0 18,15V19A2,2 0 0,1 16,21H14V19H16V14A2,2 0 0,1 18,12A2,2 0 0,1 16,10V5H14V3H16Z"
              />
            </svg>
          </button>
        </div>

        <div class="toolbar-divider"></div>

        <div class="toolbar-group">
          <button class="editor-toolbar-btn" data-action="link" title="链接" data-i18n-title="toolbar.link">
            <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
              <path
                d="M3.9,12C3.9,10.29 5.29,8.9 7,8.9H11V7H7A5,5 0 0,0 2,12A5,5 0 0,0 7,17H11V15.1H7C5.29,15.1 3.9,13.71 3.9,12M8,13H16V11H8V13M17,7H13V8.9H17C18.71,8.9 20.1,10.29 20.1,12C20.1,13.71 18.71,15.1 17,15.1H13V17H17A5,5 0 0,0 22,12A5,5 0 0,0 17,7Z"
              />
            </svg>
          </button>
          <button class="editor-toolbar-btn" data-action="image" title="图片" data-i18n-title="toolbar.image">
            <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
              <path
                d="M8.5,13.5L11,16.5L14.5,12L19,18H5M21,19V5C21,3.89 20.1,3 19,3H5A2,2 0 0,0 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19Z"
              />
            </svg>
          </button>
          <button class="editor-toolbar-btn" data-action="table" title="表格" data-i18n-title="toolbar.table">
            <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
              <path
                d="M5,4H19A2,2 0 0,1 21,6V18A2,2 0 0,1 19,20H5A2,2 0 0,1 3,18V6A2,2 0 0,1 5,4M5,8V12H11V8H5M13,8V12H19V8H13M5,14V18H11V14H5M13,14V18H19V14H13Z"
              />
            </svg>
          </button>
        </div>

        <div class="toolbar-divider"></div>

        <div class="toolbar-group">
          <div class="dropdown">
            <button
              class="editor-toolbar-btn dropdown-btn"
              title="插入Mermaid图表"
              data-i18n-title="toolbar.mermaid"
            >
              <svg
                width="16"
                height="16"
                viewBox="0 0 24 24"
                fill="currentColor"
              >
                <path
                  d="M2,2V4H4V2H2M20,2V4H22V2H20M2,10V12H4V10H2M20,10V12H22V10H20M2,18V20H4V18H2M20,18V20H22V18H20M8,2V4H16V2H8M8,18V20H16V18H8M2,6V8H4V6H2M20,6V8H22V6H20M2,14V16H4V14H2M20,14V16H22V14H20M6,2V4H8V2H6M16,2V4H18V2H16M6,18V20H8V18H6M16,18V20H18V18H16M10,6H14V10H10V6M10,14H14V18H10V14Z"
                />
              </svg>
              Mermaid
            </button>
            <div class="dropdown-menu">
              <button class="dropdown-item" data-action="mermaid-flowchart" data-i18n="toolbar.mermaidFlowchart">
                流程图
              </button>
              <button class="dropdown-item" data-action="mermaid-sequence" data-i18n="toolbar.mermaidSequence">
                序列图
              </button>
              <button class="dropdown-item" data-action="mermaid-gantt" data-i18n="toolbar.mermaidGantt">
                甘特图
              </button>
              <button class="dropdown-item" data-action="mermaid-pie" data-i18n="toolbar.mermaidPie">
                饼图
              </button>
            </div>
          </div>

          <div class="dropdown">
            <button
              class="editor-toolbar-btn dropdown-btn"
              title="插入LaTeX公式"
              data-i18n-title="toolbar.latex"
            >
              <svg
                width="16"
                height="16"
                viewBox="0 0 24 24"
                fill="currentColor"
              >
                <path
                  d="M2,7L13,2L22,7L13,12L2,7M20,10V17L13,20L6,17V10L13,15L20,10Z"
                />
              </svg>
              LaTeX
            </button>
            <div class="dropdown-menu">
              <button class="dropdown-item" data-action="latex-inline" data-i18n="toolbar.latexInline">
                行内公式
              </button>
              <button class="dropdown-item" data-action="latex-block" data-i18n="toolbar.latexBlock">
                块级公式
              </button>
              <button class="dropdown-item" data-action="latex-fraction" data-i18n="toolbar.latexFraction">
                分数
              </button>
              <button class="dropdown-item" data-action="latex-integral" data-i18n="toolbar.latexIntegral">
                积分
              </button>
              <button class="dropdown-item" data-action="latex-matrix" data-i18n="toolbar.latexMatrix">
                矩阵
              </button>
            </div>
          </div>
        </div>
      </div>
      <!-- 主内容区域 -->
      <div class="main-content">
        <!-- 富文本编辑工具栏 -->

        <!-- 编辑器和预览区域 -->
        <div class="editor-container">
          <!-- 目录侧边栏 -->
          <div class="toc-sidebar" id="tocSidebar">
            <div class="toc-header">
              <h3 data-i18n="toc.title">目录</h3>
              <button id="closeToc" class="close-btn">×</button>
            </div>
            <div class="toc-content" id="tocContent">
              <p class="toc-empty" data-i18n="toc.empty">暂无目录</p>
            </div>
          </div>
          <div class="editor-panel">
            <div class="panel-header">
              <span data-i18n="editor.title">Markdown 编辑器</span>
              <div class="panel-actions">
                <button
                  id="wordWrap"
                  class="panel-btn"
                  title="自动换行"
                  data-i18n-title="editor.wordWrap"
                >
                  <svg
                    width="14"
                    height="14"
                    viewBox="0 0 24 24"
                    fill="currentColor"
                  >
                    <path
                      d="M4,6H20V4H4V6M4,11H15V9H4V11M4,16H20V14H4V16M4,21H15V19H4V21Z"
                    />
                  </svg>
                </button>
              </div>
            </div>
            <div class="editor-wrapper">
              <div id="editor"></div>
            </div>
          </div>

          <div class="preview-panel">
            <div class="panel-header">
              <span data-i18n="preview.title">预览</span>
              <div class="panel-actions">
                <button
                  id="syncScroll"
                  class="panel-btn active"
                  title="同步滚动"
                  data-i18n-title="preview.syncScroll"
                >
                  <svg
                    width="14"
                    height="14"
                    viewBox="0 0 24 24"
                    fill="currentColor"
                  >
                    <path
                      d="M12,18A6,6 0 0,1 6,12A6,6 0 0,1 12,6A6,6 0 0,1 18,12A6,6 0 0,1 12,18M12,16A4,4 0 0,0 16,12A4,4 0 0,0 12,8A4,4 0 0,0 8,12A4,4 0 0,0 12,16Z"
                    />
                  </svg>
                </button>
              </div>
            </div>
            <div class="preview-wrapper">
              <div id="preview" class="markdown-body"></div>
            </div>
          </div>
        </div>
      </div>
      
      <!-- 状态条 -->
      <div class="status-bar" id="statusBar">
        <div class="status-left">
          <span class="status-item" id="statusPosition">
            <span data-i18n="statusBar.position">位置</span>: 
            <span id="statusLine">1</span>:<span id="statusColumn">1</span>
          </span>
          <span class="status-item" id="statusSelection" style="display: none;">
            <span data-i18n="statusBar.selection">已选择</span>: 
            <span id="statusSelectionCount">0</span>
          </span>
        </div>
        <div class="status-right">
          <span class="status-item" id="statusWordCount">
            <span id="statusLines">0</span> <span data-i18n="statusBar.lines">行</span>, 
            <span id="statusWords">0</span> <span data-i18n="statusBar.words">字</span>, 
            <span id="statusCharacters">0</span> <span data-i18n="statusBar.characters">字符</span>
          </span>
          <span class="status-item" id="statusReadingTime">
            <span data-i18n="statusBar.readingTime">阅读时间</span>: 
            <span id="statusReadingTimeValue">0</span> <span data-i18n="statusBar.minutes">分钟</span>
          </span>
        </div>
      </div>
    </div>

    <!-- 文件输入 -->
    <input type="file" id="fileInput" accept=".md,.txt" style="display: none" />

    <!-- 自定义通知容器 -->
    <div id="notificationContainer" class="notification-container"></div>

    <script>
      const titleElement = document.querySelector(".app-title");
      if (titleElement) {
        // 检查是否是首次加载
        const isFirstVisit = !localStorage.getItem("hasVisited");

        if (isFirstVisit) {
          titleElement.textContent = "仅首次加载耗时较长，稍安勿躁...";
          // 标记已访问
          localStorage.setItem("hasVisited", "true");
        } else {
          titleElement.textContent = "Markdown 预览编辑转换工具-加载中...";
        }
      }
    </script>


    <!-- 国际化初始化 -->
    <script>
      // 页面加载完成后初始化国际化
      document.addEventListener("DOMContentLoaded", function () {
        // 等待i18n.js加载完成
        function waitForI18n() {
          if (typeof initI18n === "function") {
            initI18n();
          } else {
            // 如果i18n.js还没加载完成，等待100ms后重试
            setTimeout(waitForI18n, 100);
          }
        }
        waitForI18n();
      });
    </script>
  <!-- Cloudflare Pages Analytics --><script defer src='https://static.cloudflareinsights.com/beacon.min.js' data-cf-beacon='{"token": "ce14e02d132c4a51af653c308fc66e73"}'></script><!-- Cloudflare Pages Analytics --></body>
</html>
