☰

Github Word Wrapping for CODE blocks

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

As of 2015-06-06. See the latest version.

How to install

You will need to install an extension such as Tampermonkey, Greasemonkey or Violentmonkey to install this script.

You will need to install an extension such as Tampermonkey or Violentmonkey to install this script.

You will need to install an extension such as Tampermonkey or Violentmonkey to install this script.

You will need to install an extension such as Tampermonkey or Userscripts to install this script.

You will need to install an extension such as Tampermonkey to install this script.

You will need to install a user script manager extension to install this script.

(I already have a user script manager, let me install it!)

How to install

You will need to install an extension such as Stylus to install this style.

You will need to install an extension such as Stylus to install this style.

You will need to install an extension such as Stylus to install this style.

You will need to install a user style manager extension to install this style.

You will need to install a user style manager extension to install this style.

You will need to install a user style manager extension to install this style.

(I already have a user style manager, let me install it!) 

  1. // ==UserScript==
  2. // @name        Github Word Wrapping for CODE blocks
  3. // @namespace   gihubpre
  4. // @description Switches word wrapping for CODE blocks in comments on github.com
  5. // @author		Mak Alexey (S-ed, Sedokun)
  6. // @include     http://github.com/*
  7. // @include     https://github.com/*
  8. // @version     0.150606.3
  9. // @grant       none
  10. // @license		MIT License
  11. // ==/UserScript==
  12.  
  13. // if Local Storage used, uncomment to reset default setting or type line in console
  14. // localStorage.removeItem("wrapDefault")
  15.  
  16. // wrapDefault = true; if no Local Storage available, will enable word wrapping by default
  17. // will reset on script update obviously
  18.  
  19. var wrapDefault = false;
  20.  
  21. preCSS = '\
  22. .preButtonDiv {\
  23. 	cursor: pointer;\
  24. 	display: block;\
  25. 	right: 0px;\
  26. 	margin: 5px 35px 0 0;\
  27. 	position: absolute;\
  28. 	width: 16px;\
  29. 	height: 16px;\
  30. 	line-height: 16px;\
  31. 	border-radius: 8px;\
  32. 	text-align: center;\
  33. 	transition: .5s;\
  34. }\
  35. .comment-body .preButtonDiv{\
  36. 	margin-right: 20px\
  37. }\
  38. .preButtonDiv:hover {\
  39. 	transition: .3s;\
  40. 	background-color: #ccc;\
  41. }'
  42.  
  43. if(typeof(localStorage) !== "undefined") {
  44. 	wrapDefault = localStorage.getItem("wrapDefault");
  45.     if( wrapDefault == null ){
  46. 		if(confirm("github-pre userscript:\nWould You like to set word wrapping to 'enabled' by default?")){
  47. 			wrapDefault = true;
  48. 		} else wrapDefault = false;
  49. 		localStorage.setItem("wrapDefault", wrapDefault);
  50. 	}
  51. } else console.warn("Sorry, no Local Storage Available\n\
  52. Hardcoded 'wrapDefault' variable will be used instead (edit script to set)");
  53.  
  54. var preStyleSheet = document.createElement("style");
  55. preStyleSheet.type = "text/css";
  56. preStyleSheet.appendChild(document.createTextNode(preCSS));
  57. document.head.appendChild(preStyleSheet);
  58.  
  59. document.addEventListener("DOMContentLoaded", initGithubPre);
  60.  
  61. function initGithubPre(){
  62. 	document.removeEventListener("DOMContentLoaded", initGithubPre);
  63. 	var preCollection = document.querySelectorAll(".markdown-body pre");
  64. 	for (var i = 0; i < preCollection.length; ++i) {
  65. 		addPreButton(preCollection[i]);
  66. 		if (wrapDefault) preCollection[i].firstChild.style.whiteSpace = "pre-wrap";
  67. 	}
  68. }
  69.  
  70. function addPreButton(element){
  71. 	var preButtonDiv = document.createElement("div");
  72. 	var preButtonText = document.createTextNode("▾");
  73. 	preButtonDiv.appendChild(preButtonText);
  74. 	preButtonDiv.className = "preButtonDiv";
  75. 	element.parentNode.insertBefore(preButtonDiv, element);
  76. 	preButtonDiv.addEventListener("click", switchPreStyle, false);
  77. }
  78.  
  79. function switchPreStyle(){
  80. 	var pre = this.nextSibling.firstChild.style;
  81. 	pre.whiteSpace = (pre.whiteSpace != "pre-wrap")?"pre-wrap":"pre";
  82. }