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>

1 files changed, 11 insertions, 9 deletions

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;