☰

Github Word Wrapping for CODE blocks

Switches word wrapping for CODE blocks in comments on github.com

当前为 2022-07-05 提交的版本，查看 最新版本。

  1. // ==UserScript==
  2. // @name	Github Word Wrapping for CODE blocks
  3. // @namespace	gihubpre
  4. // @run-at	document-start
  5. // @description	Switches word wrapping for CODE blocks in comments on github.com
  6. // @author	Mak Alexey (S-ed, Sedokun)
  7. // @match	http://github.com/*
  8. // @match	https://github.com/*
  9. // @version	1.220705.1
  10. // @grant	none
  11. // @license	MIT License
  12. // ==/UserScript==
  13.  
  14. // if Local Storage used, uncomment to reset default setting or type line in console
  15. // localStorage.removeItem("wrapDefault")
  16.  
  17. // wrapDefault = true; if no Local Storage available, will enable word wrapping by default
  18. // will reset on script update obviously
  19.  
  20. var wrapDefault = false;
  21.  
  22. var preCSS = '\
  23. .preButtonDiv {\
  24. 	cursor: pointer;\
  25. 	display: block;\
  26. 	left: 0px;\
  27. 	margin: 2px 0 0 2px;\
  28. 	position: absolute;\
  29. 	width: 16px;\
  30. 	height: 16px;\
  31. 	line-height: 16px;\
  32. 	border-radius: 8px;\
  33. 	text-align: center;\
  34. 	transition: .5s;\
  35. }\
  36. .comment-body .preButtonDiv{\
  37. 	margin-left: 5px\
  38. }\
  39. .preButtonDiv:hover {\
  40. 	transition: .3s;\
  41. 	background-color: #ccc;\
  42. }'
  43.  
  44. if(typeof(localStorage) !== "undefined") {
  45. 	wrapDefault = localStorage.getItem("wrapDefault");
  46.     if( wrapDefault == null ){
  47. 		if(confirm("github-pre userscript:\nWould You like to set word wrapping to 'enabled' by default?")){
  48. 			wrapDefault = true;
  49. 		} else wrapDefault = false;
  50. 		localStorage.setItem("wrapDefault", wrapDefault);
  51. 	}
  52. } else { console.warn( "Sorry, no Local Storage Available\n\
  53. Hardcoded 'wrapDefault' variable will be used instead (edit script to set)" ); }
  54.  
  55.  
  56. //Intercepting fetch to trigger DOM parse on navigation events
  57. const { fetch: originalFetch } = window;
  58. window.fetch = async (...args) => {
  59.   let [resource, config] = args;
  60.  
  61.   let response = await originalFetch(resource, config);
  62.  
  63.   initGithubPre();
  64.  
  65.   return response;
  66. };
  67.  
  68.  
  69. var preStyleSheet = document.createElement("style");
  70. preStyleSheet.type = "text/css";
  71. preStyleSheet.appendChild(document.createTextNode(preCSS));
  72. document.head.appendChild(preStyleSheet);
  73.  
  74. //Trigger once on page load
  75. document.addEventListener("DOMContentLoaded", initGithubPreDOM());
  76.  
  77. function initGithubPreDOM(){
  78.     document.removeEventListener("DOMContentLoaded", initGithubPreDOM);
  79.     initGithubPre();
  80.     console.warn( "waka");
  81. }
  82.  
  83. //Parse the page, find all code containers change the wrap, and add swith buttons
  84. function initGithubPre(){
  85. 	var preCollection = document.querySelectorAll(".markdown-body pre");
  86. 	for (var i = 0; i < preCollection.length; ++i) {
  87. 		if( !preCollection[i].parentNode.firstChild.classList.contains('preButtonDiv') ) addPreButton(preCollection[i]);
  88. 		if (wrapDefault) preCollection[i].firstChild.style.whiteSpace = "pre-wrap";
  89. 	}
  90. }
  91.  
  92.  
  93. //Function to embed button switches in each code container
  94. function addPreButton(element){
  95. 	var preButtonDiv = document.createElement("div");
  96. 	var preButtonText = document.createTextNode("▾");
  97. 	preButtonDiv.appendChild(preButtonText);
  98. 	preButtonDiv.className = "preButtonDiv";
  99. 	element.parentNode.insertBefore(preButtonDiv, element);
  100. 	preButtonDiv.addEventListener("click", switchPreStyle, false);
  101. }
  102.  
  103. //Function to handle Click events
  104. function switchPreStyle(){
  105. 	var pre = this.nextSibling.firstChild.style;
  106. 	pre.whiteSpace = (pre.whiteSpace != "pre-wrap")?"pre-wrap":"pre";
  107.     this.style.transform = (this.style.transform != "rotate(-90deg)")?"rotate(-90deg)":"";
  108. }