HTML 转 Markdown

🏷️ 工具 Markdown

本站地址

HTML 转 Markdown

复制以下代码贴到一个 HTML 文件中就可以实现 HTML 转 Markdown 的功能啦~~

<script src="https://unpkg.com/turndown/dist/turndown.js"></script>
<script src="https://unpkg.com/turndown-plugin-gfm/dist/turndown-plugin-gfm.js"></script>

<div class="row">
<div class="col-lg-6">
<h2>输入 HTML</h2>
<textarea id="htmlInput" rows="15" cols="50" class="form-control mb-3"></textarea>
<div class="input-group mb-3">
  <button type="button" onclick="convertToMarkdown()" class="btn btn-primary col-12">转换</button>
</div>
</div>

<div class="col-lg-6">
<h2>转换后的 Markdown</h2>
<textarea id="markdownContent" rows="15" cols="50" class="form-control mb-3" readonly></textarea>
<div class="input-group mb-3">
  <button type="button" onclick="copyMarkdown()" class="btn btn-primary col-12">复制 Markdown</button>
</div>
</div>
</div>

<script>    
    function convertToMarkdown() {
        var html = document.getElementById("htmlInput").value;
        var options = {
            headingStyle: 'atx',
            bulletListMarker: '-',
            codeBlockStyle: 'fenced',
            emDelimiter: '*'
        };
        var turndownService = new TurndownService(options);
        turndownService.use([window.turndownPluginGfm.gfm, window.turndownPluginGfm.tables, window.turndownPluginGfm.strikethrough]);
        var markdown = turndownService.turndown(html);
        document.getElementById("markdownContent").value = markdown;
    }
    
    function copyMarkdown() {
        var markdownContent = document.getElementById("markdownContent");
        
        markdownContent.select();
        markdownContent.setSelectionRange(0, 99999);
        
        document.execCommand("copy");
    }
</script>