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 = "
" + container.innerHTML' +
+ '.replace(/^(.*)$/gm, function(_, line) {\n' +
+ ' return \' | \' + line + \' |
\';\n' +
+ '}) + "
";\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 = '' +
+ codeEl.innerHTML.replace(/^(.*)$/gm, function(_, line) {
+ return ' | ' + line + ' |
';
+ }) + "
";
+ }
+ }
+ },
+ 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 @@ Select your font size
Line numbers:
+ Word wrap:
package main