Markdown编辑器

实时预览Markdown文本的渲染效果。

Markdown 编辑

</div>
        <div class="editor-panel">
          <div class="editor-header">实时预览</div>
          <div id="markdownPreview" class="preview-content"></div>
        </div>
      </div>

<div class="form-row">
        <button type="button" class="btn" id="copyBtn">复制Markdown</button>
        <button type="button" class="btn btn-secondary" id="copyHtmlBtn">复制HTML</button>
        <button type="button" class="btn btn-secondary" id="clearBtn">清空</button>
      </div>
    </div>
  </main>

<footer class="site-footer">
    <div class="container">
      <p>纯前端工具，数据仅在本机处理，不经过服务器。</p>
    </div>
  </footer>

// Markdown转HTML
      function markdownToHtml(markdown) {
        // 标题
        markdown = markdown.replace(/^(#+)(.*$)/gm, function (match, hashes, text) {
          const level = hashes.length;
          return `<h${level}>${text.trim()}</h${level}>`;
        });

// 粗体
        markdown = markdown.replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>');
        markdown = markdown.replace(/__(.*?)__/g, '<strong>$1</strong>');

// 斜体
        markdown = markdown.replace(/\*(.*?)\*/g, '<em>$1</em>');
        markdown = markdown.replace(/_(.*?)_/g, '<em>$1</em>');

// 代码
        markdown = markdown.replace(/`(.*?)`/g, '<code>$1</code>');

// 代码块
        markdown = markdown.replace(/```([\s\S]*?)```/g, '<pre><code>$1</code></pre>');

// 引用
        markdown = markdown.replace(/^>(.*$)/gm, '<blockquote>$1</blockquote>');

// 链接
        markdown = markdown.replace(/\[(.*?)\]$(.*?)$/g, '<a href="$2" target="_blank">$1</a>');

// 图片
        markdown = markdown.replace(/!\[(.*?)\]$(.*?)$/g, '<img src="$2" alt="$1">');

// 无序列表
        markdown = markdown.replace(/^- (.*$)/gm, '<li>$1</li>');
        markdown = markdown.replace(/(<li>.*<\/li>)/gs, '<ul>$1</ul>');

// 有序列表
        markdown = markdown.replace(/^\d+\. (.*$)/gm, '<li>$1</li>');
        markdown = markdown.replace(/(<li>.*<\/li>)/gs, function (match) {
          if (!match.includes('<ul>')) {
            return '<ol>' + match + '</ol>';
          }
          return match;
        });

// 表格
        markdown = markdown.replace(/\|(.*?)\|\n\|(.*?)\|\n((?:\|.*?\|\n)*)/g, function (match, headers, separator, rows) {
          const headerCells = headers.split('|').map(cell => cell.trim()).filter(Boolean);
          const rowCells = rows.split('\n').map(row => {
            return row.split('|').map(cell => cell.trim()).filter(Boolean);
          }).filter(row => row.length > 0);

let tableHtml = '<table><thead><tr>';
          headerCells.forEach(cell => {
            tableHtml += `<th>${cell}</th>`;
          });
          tableHtml += '</tr></thead><tbody>';

rowCells.forEach(row => {
            tableHtml += '<tr>';
            row.forEach(cell => {
              tableHtml += `<td>${cell}</td>`;
            });
            tableHtml += '</tr>';
          });

tableHtml += '</tbody></table>';
          return tableHtml;
        });

// 段落
        markdown = markdown.replace(/^(?!<h|</h|<!|<|.*<ul|<ul|<ol|<ol|<li|<li|<pre|<pre|<code|<code|<blockquote|<blockquote|<table|<table).+$/gm, '<p>$&</p>');

// 移除多余的空行
        markdown = markdown.replace(/\n{3,}/g, '\n\n');

return markdown;
      }

// 实时预览
      function updatePreview() {
        const markdown = markdownInput.value;
        const html = markdownToHtml(markdown);
        markdownPreview.innerHTML = html;
      }

// 复制Markdown
      function copyMarkdown() {
        markdownInput.select();
        document.execCommand('copy');
        alert('Markdown已复制到剪贴板');
      }

// 复制HTML
      function copyHtml() {
        const markdown = markdownInput.value;
        const html = markdownToHtml(markdown);
        const textArea = document.createElement('textarea');
        textArea.value = html;
        document.body.appendChild(textArea);
        textArea.select();
        document.execCommand('copy');
        document.body.removeChild(textArea);
        alert('HTML已复制到剪贴板');
      }

// 清空
      function clearEditor() {
        markdownInput.value = '';
        updatePreview();
      }

// 事件监听
      markdownInput.addEventListener('input', updatePreview);
      copyBtn.addEventListener('click', copyMarkdown);
      copyHtmlBtn.addEventListener('click', copyHtml);
      clearBtn.addEventListener('click', clearEditor);

// 初始预览
      updatePreview();
    })();

// 记录工具使用历史
    function recordToolUsage(toolId) {
      const recentTools = JSON.parse(localStorage.getItem('recentTools') || '[]');
      // 移除已存在的工具，将新使用的工具添加到开头
      const updatedTools = recentTools.filter(id => id !== toolId);
      updatedTools.unshift(toolId);
      // 只保留最近5个使用的工具
      const limitedTools = updatedTools.slice(0, 5);
      localStorage.setItem('recentTools', JSON.stringify(limitedTools));
    }

// 记录当前工具的使用
    recordToolUsage('markdown-editor');
  </script>