Fix double linebreaks when copying code in firefox

Apparently firefox doesn't like html code in <pre> and adds incorrect
linebreaks when copying the code. This does not happen with chromium.

Fix it by switching to <code> instead of <pre>. Also change the CSS to
refer to the element by class instead of by type so future changes are
simpler.

Not sure why, but in chroium changing the container element type breaks
the ordering of the lines. Adding display: table to the .code-container
fixes this.

References:
http://stackoverflow.com/questions/24851173/why-does-text-copied-from-a-set-of-pre-tags-have-double-line-breaks#comment41552816_26408656

Signed-off-by: Florian Pritz <bluewind@xinu.at>

2 files changed, 14 insertions, 12 deletions

diff --git a/application/controllers/file.php b/application/controllers/file.php
index e1f37e0e8..e1196940c 100644
--- a/application/controllers/file.php
+++ b/application/controllers/file.php
@@ -256,7 +256,7 @@ class File extends MY_Controller {
 		$lines_to_remove = 0;
 
 		$output .= '<div class="code content table">'."\n";
-		$output .= '<div class="highlight"><pre>'."\n";
+		$output .= '<div class="highlight"><code class="code-container">'."\n";
 
 		if ($lexer == "ascii") {
 			// TODO: use exec safe and catch exception
@@ -293,7 +293,7 @@ class File extends MY_Controller {
 				$anchor = "n-$anchor_id-$line_number";
 			}
 
-			// Be careful not to add superflous whitespace here (we are in a <pre>)
+			// Be careful not to add superflous whitespace here (we are in a <code>)
 			$output .= "<div class=\"table-row\">"
 							."<a href=\"#$anchor\" class=\"linenumber table-cell\">"
 								."<span class=\"anchor\" id=\"$anchor\"> </span>"
@@ -302,7 +302,7 @@ class File extends MY_Controller {
 			$output .= "</div>";
 		}
 
-		$output .= "</pre></div>";
+		$output .= "</code></div>";
 		$output .= "</div>";
 
 		return array(
diff --git a/public_html/data/css/style.css b/public_html/data/css/style.css
index 48bebdb12..4d29e89fd 100644
--- a/public_html/data/css/style.css
+++ b/public_html/data/css/style.css
@@ -236,7 +236,7 @@ body {
 	background: #eee;
 }
 
-.code pre {
+.code .code-container {
 	counter-reset: line-numbering;
 }
 
@@ -244,7 +244,7 @@ body {
 .code .table-row {display: table-row;}
 .code .table-cell {display: table-cell;}
 
-.code pre a.linenumber {
+.code .code-container a.linenumber {
 	-webkit-touch-callout: none;
 	-webkit-user-select: none;
 	-khtml-user-select: none;
@@ -253,12 +253,12 @@ body {
 	user-select: none;
 }
 
-.code pre a.linenumber::before {
+.code .code-container a.linenumber::before {
 	content: counter(line-numbering);
 	counter-increment: line-numbering;
 }
 
-.code pre a.linenumber {
+.code .code-container a.linenumber {
 	padding: 0 6px 0 16px;
 	text-align: right;
 	background: #ececec;
@@ -269,20 +269,20 @@ body {
 	word-break: normal;
 }
 
-.code pre :last-child a {
+.code .code-container :last-child a {
 	padding-bottom: 10px;
 }
 
-.code pre :first-child a {
+.code .code-container :first-child a {
 	padding-top: 10px;
 }
 
-.code pre .table-row .line {
+.code .code-container .table-row .line {
 	padding-left: 10px;
 	width: 100%
 }
 
-.content .highlight > pre {
+.content .highlight > .code-container {
 	background-color: transparent;
 	border: 0;
 	border-radius: 0;
@@ -302,8 +302,10 @@ body {
 	position: relative;
 	padding-left: 0;
 }
-.code .highlight pre {
+.code .highlight .code-container {
 	position: relative;
+	display: table;
+	color: inherit;
 }
 .highlight_line {
 	background: #ffffcc;