☰

CSOZ Copy Code Button

Add a copy button to code blocks with improved styling

当前为 2024-11-19 提交的版本，查看 最新版本。

  1. // ==UserScript==
  2. // @name         CSOZ Copy Code Button
  3. // @namespace    http://tampermonkey.net/
  4. // @version      0.3
  5. // @description  Add a copy button to code blocks with improved styling
  6. // @author       Y.V
  7. // @license      AGPL-3.0-or-later
  8. // @match        https://oj.czos.cn/*
  9. // @grant        none
  10. // ==/UserScript==
  11. (function() {
  12.     'use strict';
  13.  
  14.     // 等待页面加载完成
  15.     window.addEventListener('load', function() {
  16.         // 添加全局样式
  17.         const style = document.createElement('style');
  18.         style.innerHTML = `
  19.             .copy-btn {
  20.                 position: absolute;
  21.                 top: 8px;
  22.                 right: 8px;
  23.                 background-color: #007bff;
  24.                 color: white;
  25.                 border: none;
  26.                 padding: 5px 10px;
  27.                 cursor: pointer;
  28.                 border-radius: 5px;
  29.                 font-size: 12px;
  30.                 transition: background-color 0.3s ease, transform 0.2s ease;
  31.                 z-index: 1000;
  32.             }
  33.             .copy-btn:hover {
  34.                 background-color: #0056b3;
  35.                 transform: scale(1.1);
  36.             }
  37.             .code-container {
  38.                 position: relative;
  39.             }
  40.             .copy-notification {
  41.                 position: fixed;
  42.                 top: 20px;    /* 距离顶部20px */
  43.                 right: 20px;  /* 距离右侧20px */
  44.                 background-color: #28a745;
  45.                 color: white;
  46.                 padding: 10px 15px;
  47.                 border-radius: 5px;
  48.                 font-size: 14px;
  49.                 box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  50.                 opacity: 0;
  51.                 transform: translateY(-20px); /* 向上淡入 */
  52.                 transition: opacity 0.5s ease, transform 0.5s ease;
  53.                 z-index: 9999;
  54.             }
  55.             .copy-notification.show {
  56.                 opacity: 1;
  57.                 transform: translateY(0);
  58.             }
  59.         `;
  60.         document.head.appendChild(style);
  61.  
  62.         // 创建通知框
  63.         const notification = document.createElement('div');
  64.         notification.className = 'copy-notification';
  65.         notification.innerText = '代码已复制到剪贴板！';
  66.         document.body.appendChild(notification);
  67.  
  68.         function showNotification() {
  69.             notification.classList.add('show');
  70.             setTimeout(() => notification.classList.remove('show'), 2000);
  71.         }
  72.  
  73.         // 查找所有代码块
  74.         const codeBlocks = document.querySelectorAll('div.markdown pre code');
  75.         codeBlocks.forEach(codeBlock => {
  76.             // 包裹代码块以添加相对定位
  77.             const container = document.createElement('div');
  78.             container.className = 'code-container';
  79.             codeBlock.parentNode.replaceChild(container, codeBlock);
  80.             container.appendChild(codeBlock);
  81.  
  82.             // 创建复制按钮
  83.             const copyButton = document.createElement('button');
  84.             copyButton.innerText = '复制';
  85.             copyButton.className = 'copy-btn';
  86.  
  87.             // 将按钮插入到代码块右上角
  88.             container.appendChild(copyButton);
  89.  
  90.             // 添加点击事件
  91.             copyButton.addEventListener('click', function() {
  92.                 const codeText = codeBlock.innerText;
  93.                 navigator.clipboard.writeText(codeText).then(function() {
  94.                     showNotification();
  95.                 }).catch(function(err) {
  96.                     console.error('复制失败: ', err);
  97.                 });
  98.             });
  99.         });
  100.     });
  101. })();