☰

Revert StackExchange Formatting

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

当前为 2020-09-01 提交的版本，查看 最新版本。

  1. // ==UserScript==
  2. // @name         Revert StackExchange Formatting
  3. // @namespace    https://github.com/Prid13/Revert-StackExchange-Formatting
  4. // @version      1.1.1
  5. // @history      1.1.1 added downloadURL and update URL to meta
  6. // @history      1.1.0 fully implemented old paragraph spacing
  7. // @history      1.0.8 added old compact paragraph spacing (margin-bottom)
  8. // @history      1.0.5 fixed bug: first line in code blocks being indented
  9. // @description  Brings back the old line-height, colors, padding, borders, etc. of StackExchange websites like StackOverflow, SuperUser, ServerFault, etc.
  10. // @author       Prid
  11. // @include      /^https://(?:[^/]+\.)?(?:(?:stackoverflow|serverfault|superuser|stackexchange|askubuntu|stackapps)\.com|mathoverflow\.net)//
  12. // @run-at       document-start
  13. // @grant        none
  14. // ==/UserScript==
  15.  
  16. (function() {
  17.     'use strict';
  18.  
  19.     var style = "";
  20.  
  21.     var values = {
  22.         line_height: 1.3,
  23.         
  24.         paragraph_spacing: "15px",
  25.  
  26.         code_block_bgcol: "#eff0f1",
  27.         code_block_padding: "12px 8px",
  28.         code_block_radius: "3px",
  29.  
  30.         inline_code_bgcol: "#e4e6e8",
  31.         inline_code_padding: "1px 5px",
  32.         inline_code_radius: "0px",
  33.  
  34.         comment_code_bgcol: "#eff0f1",
  35.         comment_code_padding: "1px 5px",
  36.     };
  37.  
  38.     buildCSS();
  39.     injectCSS();
  40.  
  41.     function buildCSS(){
  42.         var line_height = values.line_height;
  43.  
  44.         // paragraphs (revert line-height)
  45.         style += ".s-prose { line-height: " + line_height + "!important; }";
  46.         
  47.         // OLD PARAGRAPH SPACING
  48.     		style += ".s-prose p, .s-prose ol, .s-prose ul, .s-prose blockquote, .s-prose hr { ";
  49.     		style += 	"margin-bottom: "		+ values.paragraph_spacing + "!important;"; // 15px
  50.     		style += "}";
  51.     		
  52.     		// margin-bottom for <pre>
  53.     		style += ".s-prose pre { ";
  54.     		style += 	"margin-bottom: "		+ "13px!important;";
  55.     		style += "}";
  56.     		
  57.     		// margin-bottom for ul li, ol li
  58.     		style += ".s-prose ol li, .s-prose ul li { ";
  59.     		style += 	"margin-bottom: "		+ "7.5px!important;";
  60.     		style += "}";
  61.     		// fix margin-bottom for last element in ol and ul
  62.     		style += ".s-prose ol li:last-child, .s-prose ul li:last-child { ";
  63.     		style += 	"margin-bottom: "		+ "0!important;";
  64.     		style += "}";
  65.     		
  66.     		// heading margin-bottom
  67.     		style += ".s-prose h1 { margin-bottom: 21px!important; }";
  68.     		style += ".s-prose h2 { margin-bottom: 19px!important; }";
  69.     		style += ".s-prose h3 { margin-bottom: 17px!important; }";
  70.     		style += ".s-prose h4 { margin-bottom: 15px!important; }";
  71.     		
  72.     		// fix margin-bottom for last element in blockquote
  73.     		style += ".s-prose blockquote *:last-child { ";
  74.     		style += 	"margin-bottom: "		+ "0!important;"; // don't apply to blockquotes
  75.     		style += "}";
  76.  
  77.         // ADDITIONAL REVERSIONS
  78.             // code blocks
  79.             style += ".s-prose pre:not(.s-code-block) { ";
  80.             style += 	"line-height: " 		+ line_height + "!important;";
  81.             style += 	"background-color: " 		+ values.code_block_bgcol + "!important;";
  82.             style += 	"padding: " 			+ values.code_block_padding + "!important;";
  83.             style += 	"border-radius: " 		+ values.code_block_radius + "!important;";
  84.             style += "}";
  85.  
  86.             // fix inline code styling overriding code blocks (add transparent bg, remove padding)
  87. 			style += ".s-prose pre:not(.s-code-block) code { ";
  88. 			style += 	"background-color: transparent!important;";
  89. 			style += 	"padding: 0!important;";
  90. 			style += "}";
  91.  
  92.             // inline code
  93.             style += ".s-prose code:not(.s-code-block) {";
  94.             style += 	"background-color: " 		+ values.inline_code_bgcol + "!important;";
  95.             style += 	"padding: " 			+ values.inline_code_padding + "!important;";
  96.             style += 	"border-radius: " 		+ values.inline_code_radius + "!important;";
  97.             style += "}";
  98.  
  99.             // comment inline code
  100.             style += ".comment-text code {";
  101.             style += 	"background-color: " 		+ values.comment_code_bgcol + "!important;";
  102.             style += 	"padding: " 			+ values.comment_code_padding + "!important;"; // padding is same
  103.             style += "}";
  104.  
  105.     }
  106.  
  107.     function injectCSS(){
  108.         // credit: https://stackoverflow.com/a/13436780/3705191
  109.         var cssStyle = document.createElement('style');
  110.         cssStyle.type = 'text/css';
  111.         var rules = document.createTextNode(style);
  112.         cssStyle.appendChild(rules);
  113.         document.getElementsByTagName("head")[0].appendChild(cssStyle);
  114.     }
  115. })();