From 06eec2a98d02a223198af4a8f29b0dc151f5995d Mon Sep 17 00:00:00 2001
From: YellowAfterlife <yellowafterlife@ymail.com>
Date: Sat, 5 Nov 2016 14:09:17 +0200
Subject: [PATCH] Implemented a "word wrap" option.

---
 css/main.css     | 32 +++++++++++++++++++++-----------
 js/background.js | 26 ++++++++++++++++----------
 js/options.js    | 18 +++++++++++++++++-
 options.html     |  1 +
 4 files changed, 55 insertions(+), 22 deletions(-)

diff --git a/css/main.css b/css/main.css
index 9dcefc6..8132670 100644
--- a/css/main.css
+++ b/css/main.css
@@ -74,10 +74,8 @@ body {
   -webkit-font-smoothing: subpixel-antialiased;
 }
 
-pre {
+.hljs {
   counter-reset: lines;
-  word-wrap: normal !important;
-  white-space: pre !important;
   font-family: inherit;
   line-height: normal;
   outline: none;
@@ -85,19 +83,31 @@ pre {
   display: block;
   overflow: visible;
 }
+.hljs:not(.word-wrap) {
+  word-wrap: normal !important;
+  white-space: pre !important;
+}
 
-pre .line {
+.hljs .line-number {
   counter-increment: lines;
   -webkit-user-select: none;
+  border-right: solid 1px;
+  color: #BBB;
+  padding-right: 0.5em;
+  min-width: 2em;
+  text-align: right;
 }
 
-pre .line::before {
+.hljs .line-number::before {
   content: counter(lines);
-  text-align: right;
   display: inline-block;
-  width: 2em;
-  padding-right: 0.5em;
-  margin-right: 0.5em;
-  color: #BBB;
-  border-right: solid 1px;
+}
+
+.hljs .line-content {
+  padding-left: 0.5em;
+  word-wrap: normal;
+  white-space: pre;
+}
+.hljs.word-wrap .line-content {
+  white-space: pre-wrap;
 }
diff --git a/js/background.js b/js/background.js
index 6192283..a652646 100644
--- a/js/background.js
+++ b/js/background.js
@@ -77,7 +77,8 @@
     theme: 'sunburst',
     font: 'Inconsolata',
     fontSize: 'medium',
-    lineNumbers: true
+    lineNumbers: true,
+    wordWrap: false
   };
 
   const OPTIONS = Object.keys(OPTIONS_DEFAULTS);
@@ -135,14 +136,19 @@
                                                   EXT_LANG_MAP[filename];
   }
 
-  function getHighlightingCode(font, fontSize, lineNumbers, language) {
-    return 'document.body.style.fontFamily = "' + font + '";' +
-      'document.body.style.fontSize = "' + fontSize + '";' +
-      'var container = document.querySelector("pre");' +
-      'container.classList.add("' + language + '");' +
-      'hljs.configure({ lineNumbers: ' + lineNumbers + ' });' +
-      'hljs.highlightBlock(container);' +
-      'document.body.style.backgroundColor = getComputedStyle(container).backgroundColor;';
+  function getHighlightingCode(font, fontSize, lineNumbers, wordWrap, language) {
+    return 'document.body.style.fontFamily = "' + font + '";\n' +
+      'document.body.style.fontSize = "' + fontSize + '";\n' +
+      'var container = document.querySelector("pre");\n' +
+      'container.classList.add("' + language + '");\n' +
+      'if (' + wordWrap + ') container.classList.add("word-wrap");\n'+
+      'hljs.highlightBlock(container);\n' +
+      'var containerStyle = getComputedStyle(container);\n' +
+      'if (' + lineNumbers + ') container.innerHTML = "<table style=\'color:inherit\'>" + container.innerHTML' +
+      '.replace(/^(.*)$/gm, function(_, line) {\n' +
+      '  return \'<tr><td class="line-number"></td><td class="line-content">\' + line + \'</td></tr>\';\n' +
+      '}) + "</table>";\n' +
+      'document.body.style.backgroundColor = containerStyle.backgroundColor;';
   }
 
   const JS_BEUTIFY_CODE =
@@ -179,7 +185,7 @@
     }
 
     scripts.push({
-      code: getHighlightingCode.apply(this, ['font', 'fontSize', 'lineNumbers'].
+      code: getHighlightingCode.apply(this, ['font', 'fontSize', 'lineNumbers', 'wordWrap'].
         map(localStorage.getItem.bind(localStorage)).concat(language))
     });
 
diff --git a/js/options.js b/js/options.js
index d5272ec..8cfd55c 100644
--- a/js/options.js
+++ b/js/options.js
@@ -39,9 +39,25 @@
       decode: eq('true'),
       render: function(value) {
         var codeEl = doc.getElementById('code');
-        hljs.configure({ lineNumbers: value });
         codeEl.innerHTML = codeEl.textContent;
         hljs.highlightBlock(codeEl);
+        if (value) {
+          codeEl.innerHTML = '<table style="color:inherit">' +
+          codeEl.innerHTML.replace(/^(.*)$/gm, function(_, line) {
+            return '<tr><td class="line-number"></td><td class="line-content">' + line + '</td></tr>';
+          }) + "</table>";
+        }
+      }
+    },
+    wordWrap: {
+      selector: '#word-wrap',
+      value: 'checked',
+      decode: eq('true'),
+      render: function(value) {
+        var codeEl = doc.getElementById('code');
+        if (value) {
+          codeEl.classList.add("word-wrap");
+        } else codeEl.classList.remove("word-wrap");
       }
     }
   };
diff --git a/options.html b/options.html
index d1b00fc..7e16d13 100644
--- a/options.html
+++ b/options.html
@@ -92,6 +92,7 @@ <h3>Select your font size</h3>
         <option value="xx-large">xx-large</option>
       </select>
       <h3>Line numbers:<input id="line-numbers" type="checkbox"></h3>
+      <h3>Word wrap:<input id="word-wrap" type="checkbox"></h3>
       <pre id="code" class="go">
 package main