CODE
BÀI VIẾT
<!DOCTYPE html> <html lang="vi"> <head> <meta charset="UTF-8"> <title>HTML ⇄ Markdown - Chuyển đổi 2 chiều</title> <script src="https://unpkg.com/turndown/dist/turndown.js"></script> <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script> <style> body { font-family: Arial, sans-serif; max-width: 1200px; margin: 0 auto; padding: 20px; background-color: #f5f5f5; } .container { background: white; padding: 30px; border-radius: 10px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); } h1 { color: #333; text-align: center; margin-bottom: 30px; } .conversion-header { display: flex; align-items: center; justify-content: center; margin: 20px 0; gap: 20px; } .mode-indicator { font-size: 18px; font-weight: bold; color: #007acc; padding: 10px 20px; border: 2px solid #007acc; border-radius: 25px; background: linear-gradient(135deg, #e8f4fd, #f0f8ff); } .swap-button { background: linear-gradient(135deg, #ff6b35, #f39c12); color: white; border: none; padding: 12px 20px; font-size: 20px; border-radius: 50%; cursor: pointer; transition: all 0.3s ease; box-shadow: 0 2px 5px rgba(0,0,0,0.2); width: 50px; height: 50px; display: flex; align-items: center; justify-content: center; } .swap-button:hover { background: linear-gradient(135deg, #e74c3c, #d68910); transform: rotate(180deg) scale(1.1); box-shadow: 0 4px 10px rgba(0,0,0,0.3); } .input-section, .output-section { margin-bottom: 25px; } h2 { color: #444; font-size: 18px; margin-bottom: 10px; border-bottom: 2px solid #007acc; padding-bottom: 5px; } textarea { width: 100%; margin-top: 10px; font-family: 'Courier New', monospace; border: 2px solid #ddd; border-radius: 5px; padding: 15px; font-size: 14px; line-height: 1.4; resize: vertical; box-sizing: border-box; } textarea:focus { border-color: #007acc; outline: none; box-shadow: 0 0 5px rgba(0,122,204,0.3); } .convert-button { background: linear-gradient(135deg, #007acc, #005aa3); color: white; border: none; padding: 12px 30px; font-size: 16px; border-radius: 25px; cursor: pointer; margin: 15px 0; transition: all 0.3s ease; box-shadow: 0 2px 5px rgba(0,0,0,0.2); } .convert-button:hover { background: linear-gradient(135deg, #005aa3, #004080); transform: translateY(-2px); box-shadow: 0 4px 10px rgba(0,0,0,0.3); } .copy-button { background: linear-gradient(135deg, #28a745, #20c997); color: white; border: none; padding: 10px 25px; font-size: 14px; border-radius: 20px; cursor: pointer; margin: 10px 0; transition: all 0.3s ease; box-shadow: 0 2px 5px rgba(0,0,0,0.2); } .copy-button:hover { background: linear-gradient(135deg, #218838, #1e7e34); transform: translateY(-1px); box-shadow: 0 3px 8px rgba(0,0,0,0.3); } .options { margin: 15px 0; padding: 15px; background: #f8f9fa; border-radius: 5px; border-left: 4px solid #007acc; } .options label { display: block; margin: 8px 0; font-weight: 500; color: #555; } .options input[type="checkbox"] { margin-right: 8px; transform: scale(1.1); } .example { background: #e8f4fd; padding: 15px; border-radius: 5px; margin-top: 10px; font-size: 13px; color: #666; } .conversion-buttons { display: flex; gap: 15px; align-items: center; flex-wrap: wrap; } </style> </head> <body> <div class="container"> <h1>🔄 HTML ⇄ Markdown Converter</h1> <div class="conversion-header"> <div class="mode-indicator" id="modeIndicator">HTML → Markdown</div> <button class="swap-button" onclick="swapMode()" title="Đổi chế độ chuyển đổi">⇄</button> </div> <div class="input-section"> <h2 id="inputTitle">📝 Nhập HTML:</h2> <textarea id="inputTextarea" rows="12" placeholder="Dán HTML code của bạn vào đây... Ví dụ: <h2>Tiêu đề</h2> <p>Đoạn văn bản</p> <ul><li>Danh sách</li></ul>"></textarea> <div class="options" id="optionsSection"> <h3 style="margin-top: 0; color: #007acc; font-size: 16px;">⚙️ Tùy chọn chuyển đổi:</h3> <label> <input type="checkbox" id="removeEmpty" checked> Loại bỏ các thẻ trống </label> <label> <input type="checkbox" id="keepSpans"> Giữ lại thẻ span (mặc định sẽ loại bỏ) </label> <label> <input type="checkbox" id="cleanIds"> Xóa tất cả id và class </label> <label> <input type="checkbox" id="preserveHeadings" checked> Bảo toàn cấu trúc heading (h1, h2, h3...) </label> </div> <div class="conversion-buttons"> <button class="convert-button" onclick="convert()" id="convertButton">🚀 Chuyển đổi sang Markdown</button> </div> </div> <div class="output-section"> <h2 id="outputTitle">📄 Kết quả Markdown:</h2> <textarea id="outputTextarea" rows="12" readonly placeholder="Kết quả Markdown sẽ hiển thị ở đây..."></textarea> <button class="copy-button" onclick="copyToClipboard()">📋 Copy kết quả</button> <div class="example" id="exampleTip"> <strong>💡 Mẹo:</strong> Nếu h2, h3 không hiển thị đúng, hãy thử bật tùy chọn "Xóa tất cả id và class" để loại bỏ các thuộc tính có thể gây nhiễu. </div> </div> </div> <script> let isHtmlToMarkdown = true; // Trạng thái chuyển đổi hiện tại function swapMode() { isHtmlToMarkdown = !isHtmlToMarkdown; // Lấy nội dung hiện tại của cả hai textarea const inputContent = document.getElementById("inputTextarea").value; const outputContent = document.getElementById("outputTextarea").value; // Hoán đổi nội dung document.getElementById("inputTextarea").value = outputContent; document.getElementById("outputTextarea").value = inputContent; updateUI(); // Hiệu ứng xoay cho nút swap const swapBtn = event.target; swapBtn.style.transform = 'rotate(180deg) scale(1.2)'; setTimeout(() => { swapBtn.style.transform = ''; }, 300); } function updateUI() { const modeIndicator = document.getElementById("modeIndicator"); const inputTitle = document.getElementById("inputTitle"); const outputTitle = document.getElementById("outputTitle"); const convertButton = document.getElementById("convertButton"); const inputTextarea = document.getElementById("inputTextarea"); const outputTextarea = document.getElementById("outputTextarea"); const optionsSection = document.getElementById("optionsSection"); const exampleTip = document.getElementById("exampleTip"); if (isHtmlToMarkdown) { // Chế độ HTML → Markdown modeIndicator.textContent = "HTML → Markdown"; inputTitle.innerHTML = "📝 Nhập HTML:"; outputTitle.innerHTML = "📄 Kết quả Markdown:"; convertButton.innerHTML = "🚀 Chuyển đổi sang Markdown"; inputTextarea.placeholder = "Dán HTML code của bạn vào đây...\n\nVí dụ:\n<h2>Tiêu đề</h2>\n<p>Đoạn văn bản</p>\n<ul><li>Danh sách</li></ul>"; outputTextarea.placeholder = "Kết quả Markdown sẽ hiển thị ở đây..."; optionsSection.style.display = "block"; exampleTip.innerHTML = '<strong>💡 Mẹo:</strong> Nếu h2, h3 không hiển thị đúng, hãy thử bật tùy chọn "Xóa tất cả id và class" để loại bỏ các thuộc tính có thể gây nhiễu.'; } else { // Chế độ Markdown → HTML modeIndicator.textContent = "Markdown → HTML"; inputTitle.innerHTML = "📝 Nhập Markdown:"; outputTitle.innerHTML = "📄 Kết quả HTML:"; convertButton.innerHTML = "🚀 Chuyển đổi sang HTML"; inputTextarea.placeholder = "Dán Markdown code của bạn vào đây...\n\nVí dụ:\n## Tiêu đề\n\nĐoạn văn bản\n\n- Danh sách\n- Mục 2"; outputTextarea.placeholder = "Kết quả HTML sẽ hiển thị ở đây..."; optionsSection.style.display = "none"; // Ẩn tùy chọn cho Markdown → HTML exampleTip.innerHTML = '<strong>💡 Mẹo:</strong> Markdown sẽ được chuyển thành HTML sạch và chuẩn. Hỗ trợ đầy đủ cú pháp Markdown chuẩn.'; } } function convert() { const input = document.getElementById("inputTextarea").value.trim(); if (!input) { alert('Vui lòng nhập nội dung để chuyển đổi!'); return; } try { let result; if (isHtmlToMarkdown) { result = convertHtmlToMarkdown(input); } else { result = convertMarkdownToHtml(input); } document.getElementById("outputTextarea").value = result; // Hiệu ứng thành công const button = event.target; const originalText = button.textContent; button.textContent = '✅ Chuyển đổi thành công!'; button.style.background = 'linear-gradient(135deg, #28a745, #20c997)'; setTimeout(() => { button.textContent = originalText; button.style.background = 'linear-gradient(135deg, #007acc, #005aa3)'; }, 2000); } catch (error) { alert('Có lỗi xảy ra khi chuyển đổi: ' + error.message); console.error('Conversion error:', error); } } function convertHtmlToMarkdown(html) { // Lấy các tùy chọn const removeEmpty = document.getElementById("removeEmpty").checked; const keepSpans = document.getElementById("keepSpans").checked; const cleanIds = document.getElementById("cleanIds").checked; const preserveHeadings = document.getElementById("preserveHeadings").checked; // Xử lý HTML trước khi chuyển đổi if (cleanIds) { html = html.replace(/\s*(id|class)="[^"]*"/g, ''); } if (!keepSpans) { html = html.replace(/<span[^>]*>/g, '').replace(/<\/span>/g, ''); } if (removeEmpty) { html = html.replace(/<([^>]+)>\s*<\/\1>/g, ''); } // Cấu hình TurndownService const turndownService = new TurndownService({ headingStyle: 'atx', hr: '---', bulletListMarker: '-', codeBlockStyle: 'fenced', fence: '```', emDelimiter: '_', strongDelimiter: '**', linkStyle: 'inlined', linkReferenceStyle: 'full' }); if (preserveHeadings) { turndownService.addRule('headings', { filter: ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'], replacement: function (content, node, options) { const hLevel = parseInt(node.nodeName.charAt(1)); const hPrefix = '#'.repeat(hLevel); return '\n' + hPrefix + ' ' + content + '\n'; } }); } turndownService.addRule('spans', { filter: 'span', replacement: function (content) { return content; } }); return turndownService.turndown(html); } function convertMarkdownToHtml(markdown) { // Sử dụng marked.js để chuyển Markdown sang HTML if (typeof marked !== 'undefined') { return marked.parse(markdown); } else { throw new Error('Thư viện marked.js chưa được tải'); } } function copyToClipboard() { const output = document.getElementById("outputTextarea"); if (!output.value.trim()) { alert('Chưa có nội dung để copy!'); return; } output.select(); output.setSelectionRange(0, 99999); try { document.execCommand('copy'); const button = event.target; const originalText = button.textContent; button.textContent = '✅ Đã copy!'; button.style.background = 'linear-gradient(135deg, #28a745, #20c997)'; setTimeout(() => { button.textContent = originalText; button.style.background = 'linear-gradient(135deg, #28a745, #20c997)'; }, 2000); } catch (err) { alert('Không thể copy. Hãy chọn và copy thủ công.'); } } // Khởi tạo UI updateUI(); </script> </body> </html>
Code chuyển Html sang Markdow
Html & Css
,
Javascript
ihoan
đã viết 7 tháng trước
Code chuyển Html sang Markdow
473
Bài viết cùng chủ đề
Chia cột bằng thuộc tính display grid trong CSS
Crop hình ảnh bằng CSS đơn giản và cần thiết
Hiệu ứng zoom, phóng to hình ảnh khi đưa chuột vào
Xóa bỏ gạch chân cho link trong html css
Hiển thị menu khi click chuột phải như ở màn hình máy tính
Nhập vào input hiển thị số dạng rút ngắn theo đơn vị
Thay đổi màu link khi di chuột vào
Căn giữa Hình ảnh, thẻ Div, Text trong CSS
Đọc text trong hình ảnh
Chia cột bằng thuộc tính display flex trong CSS