CSOZ Copy Code Button

Add a copy button to code blocks with improved styling

  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. })();