☰

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