论坛 › 油猴脚本 › html复制转markdown

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

html复制转markdown

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

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


```javascript
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 = 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);
      let turndownService = new TurndownService()
      turndownService.use(gfm)
      turndownService.use()
      let markdown = turndownService.turndown(item.children)
      console.log(markdown)
      setCopyContent(markdown)
      }
    })
   
}, [])

useEffect(() => {
    console.log('jinru')
    onCopy(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 发表于 2023-1-28 22:05:41

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

wwwwwllllk 发表于 2023-1-28 22:11:34

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

李恒道 发表于 2023-1-28 22:42:11

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

wwwwwllllk 发表于 2023-1-28 22:43:37

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


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

shabby 发表于 2023-1-29 02:44:19

也可以直接到 (https://github.com/febobo/web-interview/blob/fa8ee108359fc9fac213b677bcdfd065a16a7ead/docs/vue3/treeshaking.md?plain=1#L70)去复制

wwwwwllllk 发表于 2023-1-29 18:21:23

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

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

查看完整版本: html复制转markdown