☰

Blogger HTML Editor Code Prettify 添加器

在 Blogger 背景HTML 编辑器中添加代码美化功能

目前为 2025-02-23 提交的版本，查看 最新版本。

  1. // ==UserScript==
  2. // @name         Blogger HTML Editor Code Prettify 添加器
  3. // @namespace    http://tampermonkey.net/
  4. // @version      0.1
  5. // @description  在 Blogger 背景HTML 编辑器中添加代码美化功能
  6. // @author       moran
  7. // @match        https://www.blogger.com/blog/themes/*
  8. // @grant        none
  9. // @license MIT
  10. // ==/UserScript==
  11.  
  12. (function() {
  13.     'use strict';
  14.  
  15.     // 创建一个按钮，用于插入代码
  16.     const button = document.createElement('button');
  17.     button.textContent = '插入 Code Prettify';
  18.     button.style.position = 'fixed';
  19.     button.style.top = '50px';  // 调整到顶部50px
  20.     button.style.right = '10px';
  21.     button.style.zIndex = '9999';
  22.     button.style.padding = '8px 16px';
  23.     button.style.backgroundColor = '#2196F3';  // 改为蓝色
  24.     button.style.color = 'white';
  25.     button.style.border = 'none';
  26.     button.style.borderRadius = '4px';
  27.     button.style.cursor = 'pointer';
  28.  
  29.     // 要插入的 HTML 代码
  30.     const codeToInsert = `<!-- Code Prettify Resources -->
  31. <script src='https://cdn.jsdelivr.net/gh/google/code-prettify@master/loader/run_prettify.js'></script>
  32. <link href='https://cdn.jsdelivr.net/gh/google/code-prettify@master/styles/sunburst.css' rel='stylesheet' />
  33. <style type='text/css'>
  34. .copy-code-button {
  35.   background-color: #f1f1f1;
  36.   border: 1px solid #ccc;
  37.   border-radius: 4px;
  38.   color: #333;
  39.   cursor: pointer;
  40.   font-size: 12px;
  41.   margin: 5px 0 0;
  42.   padding: 3px 8px;
  43.   position: absolute;
  44.   right: 10px;
  45.   top: 10px;
  46. }
  47. .copy-code-button:hover {
  48.   background-color: #ddd;
  49. }
  50. .prettyprint {
  51.   position: relative;
  52.   padding: 20px 10px 10px;
  53. }</style>`;
  54.  
  55.     const scriptToInsert = `<script>
  56. document.addEventListener('DOMContentLoaded', function() {
  57.   var prettyPrintBlocks = document.querySelectorAll('.prettyprint');
  58.   prettyPrintBlocks.forEach(function(block) {
  59.     // 为每个代码块添加复制按钮
  60.     var copyButton = document.createElement('button');
  61.     copyButton.className = 'copy-code-button';
  62.     copyButton.textContent = '复制代码';
  63.     block.appendChild(copyButton);
  64.   });
  65.  
  66.   var copyButtons = document.querySelectorAll('.prettyprint .copy-code-button');
  67.   copyButtons.forEach(function(button) {
  68.     button.addEventListener('click', function() {
  69.       var codeBlock = this.parentNode.querySelector('code');
  70.       var codeText = codeBlock.textContent;
  71.       
  72.       var textarea = document.createElement('textarea');
  73.       textarea.value = codeText;
  74.       textarea.setAttribute('readonly', '');
  75.       textarea.style.position = 'absolute';
  76.       textarea.style.left = '-9999px';
  77.       document.body.appendChild(textarea);
  78.       
  79.       textarea.select();
  80.       document.execCommand('copy');
  81.       document.body.removeChild(textarea);
  82.       
  83.       var originalText = this.textContent;
  84.       this.textContent = '已复制!';
  85.       
  86.       setTimeout(function() {
  87.         button.textContent = originalText;
  88.       }, 2000);
  89.     });
  90.   });
  91. });</script>`;
  92.  
  93.     // 监听HTML编辑器的出现
  94.     const observer = new MutationObserver(function(mutations) {
  95.         mutations.forEach(function(mutation) {
  96.             if (document.querySelector('.CodeMirror')) {
  97.                 observer.disconnect();
  98.                 document.body.appendChild(button);
  99.             }
  100.         });
  101.     });
  102.  
  103.     observer.observe(document.body, {
  104.         childList: true,
  105.         subtree: true
  106.     });
  107.  
  108.     // 按钮点击事件
  109.     button.addEventListener('click', function() {
  110.         const editor = document.querySelector('.CodeMirror').CodeMirror;
  111.         if (editor) {
  112.             const currentContent = editor.getValue();
  113.             
  114.             // 检查是否已经插入了代码
  115.             if (currentContent.includes('code-prettify@master')) {
  116.                 alert('代码已经插入过了！');
  117.                 return;
  118.             }
  119.  
  120.             // 找到合适的插入位置
  121.             let headStart = currentContent.indexOf('<head>');
  122.             let headEnd = currentContent.indexOf('</head>');
  123.             
  124.             if (headStart === -1 || headEnd === -1) {
  125.                 alert('未找到 head 标签，请检查 HTML 结构');
  126.                 return;
  127.             }
  128.             
  129.             // 在head标签内的最后插入代码
  130.             let newContent = currentContent.slice(0, headEnd) + 
  131.                            '\n' + codeToInsert + '\n' +
  132.                            currentContent.slice(headEnd);
  133.             
  134.             // 在</body>前插入复制功能脚本
  135.             newContent = newContent.replace('</body>', scriptToInsert + '\n</body>');
  136.             
  137.             // 更新编辑器内容
  138.             editor.setValue(newContent);
  139.             
  140.             // 提示成功
  141.             alert('代码已成功插入！');
  142.         } else {
  143.             alert('未找到编辑器！请确保你在HTML编辑模式。');
  144.         }
  145.     });
  146. })();