一鍵將HTML網頁選中區塊複製轉換爲Markdown格式

工具

瀏覽器插件：tampermonkey 油猴
JS腳本：nameldk 的《複製爲Markdown格式》 0.3.1版本
基礎上添加代碼。

需求

看到網頁中想要保存的內容，複製保存，樣式經常會變形。
帶上樣式的複製，相當於保存了很多無用的樣式，後續編輯也會變得複雜。
程序員做筆記最簡潔的就是markdown了，如果能直接轉存爲markdown格式就好了，樣式統一，編輯也方便。

於是乎找了上面的工具和腳本，實現html轉markdown。
其支持標籤區塊識別(像是印象筆記或有道雲筆記的網頁剪輯那種)，隨選隨轉，十分方便。
轉換代碼塊、圖片、超鏈接文字都很好，
唯一的缺點就是不支持table轉換。

table在網頁中可是太常見了，
尤其是程序員列個清單用法什麼的，基本都用表格形式。
所以需要讓現有的工具，支持table標籤轉換。

實現

下面就是需要添加的內容，使其在原有的基礎上，支持了table轉換。
測試了幾個我想保存的頁面，沒什麼問題。至於其他網頁碰到再說，暫不確定兼容情況。

在轉換規則中，添加tr、td&th、table規則

刪掉頂部的// @require那句，將其引用的turndown.js內容完整複製，粘貼到在JS腳本頭部，然後在其中添加table轉換的部分。

  // // ==============================================================================
  // // 在turndown中添加的轉換table部分(author:watfe)
  // // ==============================================================================

  rules.td = {
    filter: ['td','th'],
    replacement: function (content, node, options) {
      content = content.replace('|','/');
      content = content.replace('\n','; ');
      return '|'+content
    }
  };

  rules.tr = {
    filter: ['tr'],
    replacement: function (content, node, options) {
      return '|\n'+content
    }
  };

  function repeatStringNumTimes(str, num) { //字符串重複N次
    let repeatStr = '';
    for(let i = 0; i < num; i++){
      repeatStr += str;
    }
    return repeatStr;
  }

  rules.table = {
    filter: ['table'],
    replacement: function (content, node, options) {
      // 刪首尾空，刪除最前面多餘的|，並在最後補全|
      content = content.trim();
      content = content.replace(/\n+/g, '\n');
      if (content.indexOf('|')===0){
        content = content.substring(1, content.length)+'|';
      }
      // 檢查表格包含幾個|，數字減1就是列數，模擬出markdown表格中間的---：
      var verticalLineCount = content.substring(content.lastIndexOf("\n") + 1, content.length).match(/\|/ig).length
      var tableMDLine = '|'+repeatStringNumTimes('---|',verticalLineCount-1);
      // 檢查是否包含表頭
      if (content.indexOf('\n|\n')>0){
          content = content.replace('\n|\n', '|\n'+tableMDLine+'\n');
      }
      else{
          content = repeatStringNumTimes('|',verticalLineCount)+'\n'+ content;
      }
      //console.log(content);
      return content
    }
  };
  // // ==============================================================================
  // // 添加完畢
  // // ==============================================================================

調整markdown輸出格式

比如：h1用#而不是下劃線，代碼塊用```等等。
在JS腳本建立TurndownService實例前，加入這些配置。

    // ==============================================================================
    // 根據turndown文檔，調整一些參數，讓轉化出來的markdown格式，滿足自己的需要
    // https://github.com/domchristie/turndown
    // ==============================================================================
    let options = {
      headingStyle: 'atx',
      bulletListMarker: '+',
      codeBlockStyle: 'fenced',
      emDelimiter: '*'
    };
    // ==============================================================================
    // 添加完畢
    // ==============================================================================
    let turndownService = new TurndownService(options);

測試

轉換成功