html复制转markdown

wwwwwllllk · 发表于 2023-1-28 22:04:22

这个网站分享的很好，所以自己想把自己容易忘记的，搞混的写到自己的笔记中，选中复制太麻烦了，所以写了下脚本，点击即可复制。

写的时候遇到了一些坑，比如转出来的md文件多出斜杠，不换行(这两个问题，我看了一下github的demo,然后通过尝试取不同的标签，最后解决掉了),复制以后格式没了的问题。

import { useEffect, useState } from 'react';
import { Fragment } from 'react';
import TurndownService from 'turndown'
import { gfm, tables, strikethrough } from 'turndown-plugin-gfm'
import { Button, message } from 'antd';
import './App.css'

function App() {
  const [copyContent, setCopyContent] = useState("")

  useEffect(() => {
    // 拿到当前页面的所有的js代码
    let jsCodeList = document.querySelectorAll('pre')
    // 拿到当前页面的所有js代码的div
    let jsCodeDivList = document.querySelectorAll('.line-numbers-mode')
    jsCodeDivList.forEach((item, index) => {
      item.onclick = function() {
        // console.log('你点击到我了',item.children[0]);
        let turndownService = new TurndownService()
        turndownService.use(gfm)
        turndownService.use([tables, strikethrough])
        let markdown = turndownService.turndown(item.children[0])
        console.log(markdown)
        setCopyContent(markdown)
      }
    })

  }, [])

  useEffect(() => {
    console.log('jinru')
    onCopy(copyContent)
  }, [copyContent])

  // 复制内容
  const onCopy = (copyContent) => {
    if(copyContent) {
      let oInput = document.createElement('textarea')
      oInput.value = copyContent
      document.body.appendChild(oInput)
      oInput.select() // 选择对象;
      document.execCommand('Copy') // 执行浏览器复制命令
      message.success('复制成功!');
      oInput.remove()
    }
  }
  return (
    <div>
      你好
    </div>
  )
}

export default App;

利用JS进行复制文本（保留样式和不保留样式）https://blog.csdn.net/csder_xj/article/details/112786060
HTML 转 Markdown 如此简单
https://juejin.cn/post/7067854925899759624