☰

TPT Syntax Highlighted Code Boxes

Syntax highlights <code> boxes on the powder toy forums.

目前为 2014-12-02 提交的版本。查看 最新版本。

  1. // ==UserScript==
  2. // @name TPT Syntax Highlighted Code Boxes
  3. // @version 1.2.0
  4. // @description Syntax highlights <code> boxes on the powder toy forums.
  5. // @author boxmein
  6. // @match *://powdertoy.co.uk/Discussions/Thread/*
  7. // @namespace http://boxmein.net
  8. // ==/UserScript==
  9. // last updated: Tue Dec 02 2014 21:16:57 GMT+0200 (FLE Standard Time)
  10.  
  11. /*
  12. Note to moderators / anyone interested:
  13. =====
  14.  
  15. The following libraries are served off of a well-known provider of Javascript 
  16. libraries called [cdnjs][1], which happens to be in your whitelist of usable
  17. CDNs.
  18.  
  19. I have refrained from using @require in the script manifest in order to fully 
  20. support Google Chrome, a browser used by more than half of Internet users [(StatCounter Oct 2014)][2]. 
  21. This is a [known issue][3] which means that @require support has been willingly
  22. left out of Chrome. I hope that this is more than enough reasons to 'break' the
  23. rules of having to use @require.
  24.  
  25. ~boxmein
  26.  
  27. [1]: http://cdnjs.cloudflare.com
  28. [2]: http://gs.statcounter.com/#desktop-browser-ww-monthly-201410-201410-bar
  29. [3]: http://www.chromium.org/developers/design-documents/user-scripts
  30. */
  31.  
  32.  
  33. // Highlight.js is the highlighting library.
  34. var HLJS = "//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.4/highlight.min.js";
  35.  
  36. // Language support for Lua isn't included in ^that distribution by default
  37. var LUA = "//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.4/languages/lua.min.js";
  38.  
  39. // Highlight.js only slaps on class names, you also need to style the classes! 
  40. var HL_STYLE = "//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.4/styles/github.min.css";
  41.  
  42.  
  43. (function() {
  44.   'use strict';
  45.  
  46.   // Runs a function in the document. Basically like a Content Script.
  47.   // http://wiki.greasespot.net/Content_Script_Injection
  48.   function contentEval(source) {
  49.  
  50.     // Check for function input.
  51.     if ('function' == typeof source) {
  52.       // Execute this function with no arguments, by adding parentheses.
  53.       // One set around the function, required for valid syntax, and a
  54.       // second empty set calls the surrounded function.
  55.       source = '(' + source + ')();'
  56.     }
  57.  
  58.     // Create a script node holding this  source code.
  59.     var script = document.createElement('script');
  60.     script.setAttribute("type", "application/javascript");
  61.     script.textContent = source;
  62.  
  63.     // Insert the script node into the page, so it will run, and immediately
  64.     // remove it to clean up.
  65.     document.body.appendChild(script);
  66.     //document.body.removeChild(script);
  67.   }
  68.  
  69.  
  70.   // Given a src attribute, makes a <script> tag into the end of <body>
  71.   function contentScript(source) {
  72.     var tag = document.createElement('script');
  73.     tag.setAttribute('type', 'application/javascript');
  74.     tag.src = source;
  75.  
  76.     document.body.appendChild(tag);
  77.     //document.body.removeChild(tag);
  78.     return tag;
  79.   }
  80.  
  81.   var hl = contentScript(HLJS);
  82.  
  83.   hl.onload = function() {
  84.  
  85.     // Set an ID, because after *that* loads, hljs is finally ready to highlight
  86.     // Lua as well as C++.
  87.     var lu = contentScript(LUA);
  88.     lu.id = "luaapi";
  89.  
  90.  
  91.     // Add the CSS for good measure too
  92.     var st = document.createElement('link');
  93.     st.type = 'text/css';
  94.     st.rel = 'stylesheet';
  95.     st.href = HL_STYLE;
  96.     document.head.appendChild(st);
  97.  
  98.     contentEval(function() {
  99.  
  100.       hljs.configure({useBR: true});
  101.  
  102.       function highlightCode(){
  103.         // by default hljs highlights <pre><code>, have to override
  104.         var ds = document.querySelectorAll('code');
  105.         for(var d = 0; d < ds.length; d++)
  106.           window.hljs.highlightBlock(ds[d]);  
  107.       }
  108.       
  109.       window.highlightCode = highlightCode;
  110.  
  111.       document.getElementById('luaapi').onload = highlightCode;
  112.     });
  113.  
  114.   };
  115. })();