☰

Revert StackExchange Formatting

Brings back the old line-height, colors, padding, borders, etc. of StackExchange websites like StackOverflow, SuperUser, ServerFault, etc.

As of 2020-09-01. See the latest version.

  1. // ==UserScript==
  2. // @name         Revert StackExchange Formatting
  3. // @namespace    https://github.com/Prid13/Revert-StackExchange-Formatting
  4. // @version      1.0.5
  5. // @history      1.0.5 fixed bug: first line in code blocks being indented
  6. // @description  Brings back the old line-height, colors, padding, borders, etc. of StackExchange websites like StackOverflow, SuperUser, ServerFault, etc.
  7. // @author       Prid
  8. // @include      /^https://(?:[^/]+\.)?(?:(?:stackoverflow|serverfault|superuser|stackexchange|askubuntu|stackapps)\.com|mathoverflow\.net)//
  9. // @run-at       document-start
  10. // @grant        none
  11. // ==/UserScript==
  12.  
  13. (function() {
  14.     'use strict';
  15.  
  16.     var style = "";
  17.  
  18.     var values = {
  19.         line_height: 1.3,
  20.  
  21.         code_block_bgcol: "#eff0f1",
  22.         code_block_padding: "12px 8px",
  23.         code_block_radius: "3px",
  24.  
  25.         inline_code_bgcol: "#e4e6e8",
  26.         inline_code_padding: "1px 5px",
  27.         inline_code_radius: "0px",
  28.  
  29.         comment_code_bgcol: "#eff0f1",
  30.         comment_code_padding: "1px 5px",
  31.     };
  32.  
  33.     buildCSS();
  34.     injectCSS();
  35.  
  36.     function buildCSS(){
  37.         var line_height = values.line_height;
  38.  
  39.         // paragraphs (revert line-height)
  40.         style += ".s-prose { line-height: " + line_height + "!important; }";
  41.  
  42.         // ADDITIONAL REVERSIONS
  43.             // code blocks
  44.             style += ".s-prose pre:not(.s-code-block) { ";
  45.             style += 	"line-height: " 		+ line_height + "!important;";
  46.             style += 	"background-color: " 		+ values.code_block_bgcol + "!important;";
  47.             style += 	"padding: " 			+ values.code_block_padding + "!important;";
  48.             style += 	"border-radius: " 		+ values.code_block_radius + "!important;";
  49.             style += "}";
  50.  
  51.             // fix inline code styling overriding code blocks (add transparent bg, remove padding)
  52. 			style += ".s-prose pre:not(.s-code-block) code { ";
  53. 			style += 	"background-color: transparent!important;";
  54. 			style += 	"padding: 0!important;";
  55. 			style += "}";
  56.  
  57.             // inline code
  58.             style += ".s-prose code:not(.s-code-block) {";
  59.             style += 	"background-color: " 		+ values.inline_code_bgcol + "!important;";
  60.             style += 	"padding: " 			+ values.inline_code_padding + "!important;";
  61.             style += 	"border-radius: " 		+ values.inline_code_radius + "!important;";
  62.             style += "}";
  63.  
  64.             // comment inline code
  65.             style += ".comment-text code {";
  66.             style += 	"background-color: " 		+ values.comment_code_bgcol + "!important;";
  67.             style += 	"padding: " 			+ values.comment_code_padding + "!important;"; // padding is same
  68.             style += "}";
  69.  
  70.     }
  71.  
  72.     function injectCSS(){
  73.         // credit: https://stackoverflow.com/a/13436780/3705191
  74.         var cssStyle = document.createElement('style');
  75.         cssStyle.type = 'text/css';
  76.         var rules = document.createTextNode(style);
  77.         cssStyle.appendChild(rules);
  78.         document.getElementsByTagName("head")[0].appendChild(cssStyle);
  79.     }
  80. })();