CC98 HighLight

highlight code in www.cc98.org

当前为 2024-09-28 提交的版本,查看 最新版本

  1. // ==UserScript==
  2. // @name CC98 HighLight
  3. // @namespace http://tampermonkey.net/
  4. // @version 2.2
  5. // @description highlight code in www.cc98.org
  6. // @author Slowist
  7. // @match https://www.cc98.org/*
  8. // @grant none
  9. // @run-at document-end
  10. // @license Apache 2.0
  11. // ==/UserScript==
  12.  
  13. (function() {
  14. 'use strict';
  15.  
  16. function loadHighlightJs(callback) {
  17. const script = document.createElement('script');
  18. script.src = 'https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/highlight.min.js';
  19. script.onload = callback;
  20.  
  21. const style = document.createElement('link');
  22. style.rel = 'stylesheet';
  23. style.href = 'https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/kimbie-light.min.css';
  24. document.head.appendChild(style);
  25. document.head.appendChild(script);
  26. }
  27.  
  28. function loadClipboardJs(callback) {
  29. const script = document.createElement('script');
  30. script.src = 'https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.8/clipboard.min.js';
  31. script.onload = callback;
  32. document.head.appendChild(script);
  33. }
  34.  
  35. // Highlight and add copy buttons
  36. function AddCopyButtons() {
  37. const codeBlocks = document.querySelectorAll('pre code');
  38. codeBlocks.forEach((codeBlock, index) => {
  39. if (!codeBlock.nextSibling || !codeBlock.nextSibling.matches('button')) {
  40. const copyButton = document.createElement('button');
  41. copyButton.textContent = 'Copy'; //modify the text
  42. copyButton.style.position = 'absolute';
  43. copyButton.style.top = '5px';
  44. copyButton.style.right = '10px';
  45. copyButton.style.zIndex = '9999'; //ensure it's on the top
  46. copyButton.style.backgroundColor = '#E8E8E8'; //modify RGB to change the color of the button
  47. copyButton.style.color = '#616161'; //modify RGB to change the color of the text
  48. copyButton.style.cursor = 'pointer';
  49. copyButton.style.padding = '5px 10px';
  50. copyButton.style.border = 'none';
  51. copyButton.style.borderRadius = '3px';
  52.  
  53. // Set code block ID
  54. const codeId = `code-block-${index}`;
  55. codeBlock.id = codeId;
  56. copyButton.setAttribute('data-clipboard-target', `#${codeId}`);
  57. codeBlock.parentNode.style.position = 'relative';
  58. codeBlock.parentNode.appendChild(copyButton);
  59.  
  60. // Initialize Clipboard.js
  61. const clipboard = new ClipboardJS(copyButton);
  62.  
  63. clipboard.on('success', function(e) {
  64. copyButton.textContent = 'Copied!';
  65. e.clearSelection();
  66. setTimeout(() => {
  67. copyButton.textContent = 'Copy';
  68. }, 2000);
  69. });
  70.  
  71. clipboard.on('error', function(e) {
  72. copyButton.textContent = 'Failed';
  73. setTimeout(() => {
  74. copyButton.textContent = 'Copy';
  75. }, 2000);
  76. });
  77. }
  78. });
  79. }
  80.  
  81. function observeDomChanges() {
  82. const observer = new MutationObserver((mutations) => {
  83. mutations.forEach(() => {
  84. AddCopyButtons(); // Add buttons on DOM changes
  85. });
  86. });
  87. observer.observe(document.body, { childList: true, subtree: true });
  88. }
  89.  
  90. // HighLight
  91. loadHighlightJs(() => {
  92. hljs.configure({ ignoreUnescapedHTML: true });
  93. hljs.highlightAll();
  94. setInterval(() => {
  95. hljs.highlightAll();
  96. }, 100);
  97. // ClipButton
  98. loadClipboardJs(AddCopyButtons);
  99. observeDomChanges(); // DOM changes
  100. });
  101. })();