html复制转markdown

wwwwwllllk

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

写的时候遇到了一些坑，比如转出来的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

wwwwwllllk

代码有个问题，因为使用的字符串，监听到字符串发生变化才会触发复制时间，所以同一个点击多次只会复制一次，对我使用没有什么影响，所以我就不改了

wwwwwllllk

https://mixmark-io.github.io/turndown/

李恒道

其实这类才是我理想中的油猴脚本范畴
脚本不光用于刷课
也可以极大的去优化自己的网上冲浪体验
或者实现自己的一些奇奇怪怪的想法

wwwwwllllk

李恒道 发表于 2023-1-28 22:42
其实这类才是我理想中的油猴脚本范畴
脚本不光用于刷课
也可以极大的去优化自己的网上冲浪体验

还是道哥教的好，才有能力实现自己的东西。

shabby

也可以直接到 web-interview/docs/vue3/treeshaking.md 去复制

wwwwwllllk

shabby 发表于 2023-1-29 02:44
[md]也可以直接到 [web-interview/docs/vue3/treeshaking.md](https://github.com/febobo/web-interview/bl ...

就是因为麻烦，布局没有直接在文档网页看清晰才写的