codepen 代码提取器

提取 codepen 上的代码并转换成 Markdown 格式，从而实现一键迁移至code-flux平台。
换行
// ==UserScript==
// @name         codepen 代码提取器
// @namespace    https://xxxily.
// @version      0.0.1
// @license      MIT
// @description  提取 codepen 上的代码并转换成 Markdown 格式，从而实现一键迁移至code-flux平台。
// @author       Blaze
// @match        *://*.codepen.io/*
// @match        *://*.jsbin.com/*
// @match        *://*.jsfiddle.net/*
// @grant        GM_setClipboard
// @grant        GM_addStyle
// ==/UserScript==

(function () {
  'use strict'

  // 添加样式
  GM_addStyle(`
        .code-extractor-btn {
            background-color: #4CAF50;
            border: none;
            color: white;
            padding: 5px 10px;
            text-align: center;
            text-decoration: none;
            display: inline-block;
            font-size: 14px;
            margin: 4px 10px;
            cursor: pointer;
            border-radius: 4px;
            line-height: 32px;
        }
        .code-extractor-btn:hover {
            background-color: #45a049;
        }
        .code-extractor-message {
            position: fixed;
            top: 20px;
            right: 20px;
            background-color: #4CAF50;
            color: white;
            padding: 15px;
            border-radius: 4px;
            z-index: 9999;
            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
            transition: opacity 0.3s;
        }
    `)

  // 检查页面上是否有 CodeMirror 实例
  function checkForCodeMirror () {
    const codeMirrors = document.querySelectorAll('.CodeMirror')
    if (codeMirrors.length > 0) {
      // 检查是否存在指定的 DOM 元素
      const targetButton = document.querySelector('#main-header button[title="Love"]')
      if (targetButton) {
        // 检查是否已经插入了提取按钮
        if (!document.querySelector('.code-extractor-btn')) {
          // 创建提取按钮
          const extractButton = document.createElement('button')
          extractButton.className = 'code-extractor-btn'
          extractButton.textContent = '提取代码'
          extractButton.addEventListener('click', extractCodeToMarkdown)

          // 插入按钮到目标按钮前面
          targetButton.parentNode.insertBefore(extractButton, targetButton)
        }
      } else {
        // 如果没有找到目标按钮，可以考虑添加一个悬浮按钮或其他方式
        console.log('未找到目标按钮，但页面上存在 CodeMirror 实例')
      }
    }
  }

  // 显示消息提示
  function showMessage (message) {
    // 移除可能存在的旧消息
    const oldMessage = document.querySelector('.code-extractor-message')
    if (oldMessage) {
      oldMessage.remove()
    }

    // 创建新消息元素
    const messageEl = document.createElement('div')
    messageEl.className = 'code-extractor-message'
    messageEl.textContent = message
    document.body.appendChild(messageEl)

    // 2秒后自动消失
    setTimeout(() => {
      messageEl.style.opacity = '0'
      setTimeout(() => {
        messageEl.remove()
      }, 300)
    }, 2000)
  }

  // 从 HTML 代码中提取 title
  function extractTitleFromHtml (htmlCode) {
    const titleMatch = htmlCode.match(/<title>(.*?)<\/title>/i)
    return titleMatch ? titleMatch[1].trim() : null
  }

  // 获取代码的语言
  function getLanguageFromMode (mode) {
    if (!mode) return ''

    // 处理可能的对象形式
    if (typeof mode === 'object' && mode.name) {
      mode = mode.name
    }

    // 映射 CodeMirror 模式到 Markdown 语言标识符
    const modeMap = {
      javascript: 'javascript',
      'text/javascript': 'javascript',
      js: 'javascript',
      html: 'html',
      htmlmixed: 'html',
      'text/html': 'html',
      css: 'css',
      'text/css': 'css',
      xml: 'xml',
      python: 'python',
      ruby: 'ruby',
      php: 'php',
      clike: 'c',
      java: 'java'
      // 可以根据需要添加更多映射
    }

    return modeMap[mode] || ''
  }

  // 提取代码并转换为 Markdown
  function extractCodeToMarkdown () {
    const codeMirrors = document.querySelectorAll('.CodeMirror')
    if (codeMirrors.length === 0) {
      showMessage('未找到 CodeMirror 实例')
      return
    }

    const pageTitle = document.title
    let markdownContent = `# ${pageTitle}\n\n`

    codeMirrors.forEach((cm, index) => {
      if (cm && cm.CodeMirror) {
        const editor = cm.CodeMirror
        const code = editor.getValue()
        const mode = editor.getMode ? editor.getMode() : (editor.options ? editor.options.mode : '')
        const language = getLanguageFromMode(mode)

        // 如果是 HTML 代码，尝试提取 title
        if (language === 'html' && index === 0) {
          const htmlTitle = extractTitleFromHtml(code)
          if (htmlTitle) {
            markdownContent = `# ${htmlTitle}\n\n`
          }
        }

        markdownContent += `\`\`\`${language}\n${code}\n\`\`\`\n\n`
      } else if (cm.__vue__ && cm.__vue__.cminstance) {
        // 处理某些 Vue 封装的 CodeMirror
        const editor = cm.__vue__.cminstance
        const code = editor.getValue()
        const mode = editor.getMode ? editor.getMode() : (editor.options ? editor.options.mode : '')
        const language = getLanguageFromMode(mode)

        if (language === 'html' && index === 0) {
          const htmlTitle = extractTitleFromHtml(code)
          if (htmlTitle) {
            markdownContent = `# ${htmlTitle}\n\n`
          }
        }

        markdownContent += `\`\`\`${language}\n${code}\n\`\`\`\n\n`
      } else {
        // 尝试其他可能的 CodeMirror 实例获取方式
        try {
          const instance = cm.querySelector('.CodeMirror-code')
          if (instance) {
            const code = Array.from(instance.querySelectorAll('.CodeMirror-line'))
              .map(line => line.textContent)
              .join('\n')

            markdownContent += `\`\`\`\n${code}\n\`\`\`\n\n`
          }
        } catch (e) {
          console.error('提取代码时出错:', e)
        }
      }
    })

    // 复制到剪贴板
    GM_setClipboard(markdownContent)
    showMessage('代码已成功复制到剪贴板！')
  }

  // 页面加载完成后检查 CodeMirror
  window.addEventListener('load', checkForCodeMirror)

  // 定期检查 CodeMirror 是否被动态加载，最多检查10次
  let checkCount = 0
  const checkInterval = setInterval(() => {
    checkForCodeMirror()
    checkCount++

    // 如果已经找到 CodeMirror 实例或者已经检查了10次，则停止检查
    if (document.querySelectorAll('.CodeMirror').length > 0 || checkCount >= 10) {
      clearInterval(checkInterval)
    }
  }, 1000)
})()
欢迎访问Greasy Fork镜像
