☰

TPT Syntax Highlighted Code Boxes

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

  1. // ==UserScript==
  2. // @name TPT Syntax Highlighted Code Boxes
  3. // @version 1.3.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.   // Don't run inside iframes (Looking at you GreaseMonkey + TinyMCE)
  47.   if (window.top !== window.self) return; 
  48.  
  49.   // Runs a function in the document. Basically like a Content Script.
  50.   // http://wiki.greasespot.net/Content_Script_Injection
  51.   function contentEval(source) {
  52.  
  53.     // Check for function input.
  54.     if ('function' == typeof source) {
  55.       // Execute this function with no arguments, by adding parentheses.
  56.       // One set around the function, required for valid syntax, and a
  57.       // second empty set calls the surrounded function.
  58.       source = '(' + source + ')();'
  59.     }
  60.  
  61.     // Create a script node holding this  source code.
  62.     var script = document.createElement('script');
  63.     script.setAttribute("type", "application/javascript");
  64.     script.textContent = source;
  65.  
  66.     // Insert the script node into the page, so it will run, and immediately
  67.     // remove it to clean up.
  68.     document.body.appendChild(script);
  69.     //document.body.removeChild(script);
  70.   }
  71.  
  72.  
  73.   // Given a src attribute, makes a <script> tag into the end of <body>
  74.   function contentScript(source) {
  75.     var tag = document.createElement('script');
  76.     tag.setAttribute('type', 'application/javascript');
  77.     tag.src = source;
  78.  
  79.     document.body.appendChild(tag);
  80.     //document.body.removeChild(tag);
  81.     return tag;
  82.   }
  83.  
  84.   var hl = contentScript(HLJS);
  85.  
  86.   hl.onload = function() {
  87.  
  88.     // Set an ID, because after *that* loads, hljs is finally ready to highlight
  89.     // Lua as well as C++.
  90.     var lu = contentScript(LUA);
  91.     lu.id = "luaapi";
  92.  
  93.  
  94.     // Add the CSS for good measure too
  95.     var st = document.createElement('link');
  96.     st.type = 'text/css';
  97.     st.rel = 'stylesheet';
  98.     st.href = HL_STYLE;
  99.     document.head.appendChild(st);
  100.  
  101.     contentEval(function() {
  102.  
  103.       hljs.configure({useBR: true});
  104.  
  105.       function highlightCode(){
  106.         // by default hljs highlights <pre><code>, have to override
  107.         var ds = document.querySelectorAll('code');
  108.         for(var d = 0; d < ds.length; d++)
  109.           window.hljs.highlightBlock(ds[d]);  
  110.       }
  111.       
  112.       window.highlightCode = highlightCode;
  113.  
  114.       document.getElementById('luaapi').onload = highlightCode;
  115.     });
  116.  
  117.   };
  118. })();