summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
-rw-r--r--application/controllers/file.php40
-rw-r--r--application/views/file/html_footer.php3
-rw-r--r--application/views/file/html_header.php2
-rw-r--r--data/css/style.css82
-rw-r--r--data/js/script.js17
5 files changed, 94 insertions, 50 deletions
diff --git a/application/controllers/file.php b/application/controllers/file.php
index 333602fbf..5bd829713 100644
--- a/application/controllers/file.php
+++ b/application/controllers/file.php
@@ -203,19 +203,43 @@ class File extends CI_Controller {
private function _pygmentize($file, $lexer)
{
$return_value = 0;
+ $output = "";
- ob_start();
+ $output .= '<div class="code content table">'."\n";
+ $output .= '<div class="highlight"><pre>'."\n";
- echo '<table class="content"><tr>';
- echo '<td class="numbers"><pre>';
- // generate line numbers (links)
- passthru('perl -ne \'print "<a href=\"#n$.\" ><span class=\"anchor\" id=\"n$.\"> </span>$.</a>\n"\' '.escapeshellarg($file), $return_value);
- echo '</pre></td><td class="code">'."\n";
+ ob_start();
passthru('pygmentize -F codetagify -O encoding=guess,outencoding=utf8 -l '.escapeshellarg($lexer).' -f html '.escapeshellarg($file), $return_value);
-
- $output = ob_get_contents();
+ $buf = ob_get_contents();
ob_end_clean();
+
+ $buf = explode("\n", $buf);
+ $line_count = count($buf);
+
+ // Last 2 items are just "</pre></div>" and ""
+ // We don't need those
+ unset($buf[$line_count - 2]);
+ unset($buf[$line_count - 1]);
+
+ foreach ($buf as $key => $line) {
+ $line_number = $key + 1;
+ if ($key == 0) {
+ $line = str_replace("<div class=\"highlight\"><pre>", "", $line);
+ }
+
+ // Be careful not to add superflous whitespace here (we are in a <pre>)
+ $output .= "<div class=\"table-row\">"
+ ."<a href=\"#n$line_number\" class=\"linenumber table-cell\">"
+ ."<span class=\"anchor\" id=\"n$line_number\"> </span>"
+ ."</a>"
+ ."<span class=\"line table-cell\">".$line."</span>\n";
+ $output .= "</div>";
+ }
+
+ $output .= "</pre></div>";
+ $output .= "</div>";
+
return array(
"return_value" => $return_value,
"output" => $output
diff --git a/application/views/file/html_footer.php b/application/views/file/html_footer.php
index 3a4b05505..bbec7ebd1 100644
--- a/application/views/file/html_footer.php
+++ b/application/views/file/html_footer.php
@@ -1,6 +1,3 @@
- </td>
- </tr>
- </table>
</div>
</div>
diff --git a/application/views/file/html_header.php b/application/views/file/html_header.php
index e14bad6f5..b861e0a39 100644
--- a/application/views/file/html_header.php
+++ b/application/views/file/html_header.php
@@ -74,7 +74,7 @@ include(FCPATH."application/views/header.php"); ?>
</li>
</ul>
<div class="btn-group pull-right" style="margin-top: 7px; margin-right:-10px;">
- <a id="linewrap" class="btn btn-small" rel="tooltip" title="Wrap long lines">Linewrap</a>
+ <a id="linewrap" class="btn btn-small" rel="tooltip" title="Toggle wrapping of long lines">Linewrap</a>
<a href="<?php echo site_url($id."/plain") ?>" class="btn btn-small" rel="tooltip" title="View as plain text">Plain</a>
<a href="<?php echo site_url($id) ?>" class="btn btn-small" rel="tooltip" title="View as raw file (org. mime type)">Raw</a>
<?php if ($current_highlight === 'rmd') { ?>
diff --git a/data/css/style.css b/data/css/style.css
index ce8052142..454d7f9ea 100644
--- a/data/css/style.css
+++ b/data/css/style.css
@@ -54,7 +54,53 @@ code, pre, textarea {
margin-right: 20px;
}
-.content .numbers > pre, .content .highlight > pre {
+.code pre {
+ counter-reset: line-numbering;
+}
+
+.code {display: table; margin: 0;}
+.code .table-row {display: table-row;}
+.code .table-cell {display: table-cell;}
+
+.code pre a.linenumber {
+ -webkit-touch-callout: none;
+ -webkit-user-select: none;
+ -khtml-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
+}
+
+.code pre a.linenumber::before {
+ content: counter(line-numbering);
+ counter-increment: line-numbering;
+}
+
+.code pre a.linenumber {
+ padding: 0 6px; /* space after numbers */
+ text-align: right;
+
+ background: #ececec;
+ border-right: 1px solid #ddd;
+ text-align: right;
+ margin-left: -2px;
+ color: #aaa;
+ word-break: normal;
+}
+
+.code pre :last-child a {
+ padding-bottom: 10px;
+}
+
+.code pre :first-child a {
+ padding-top: 10px;
+}
+
+.code pre .table-row .line {
+ padding-left: 10px;
+}
+
+.content .highlight > pre {
background-color: transparent;
border: 0;
border-radius: 0;
@@ -62,41 +108,23 @@ code, pre, textarea {
padding: 0;
font-size: 12px;
line-height: 1.4;
- white-space: pre;
- word-break: normal;
+ white-space: pre-wrap;
+ word-break: break-all;
word-wrap: normal;
}
-.content .numbers {
- background: #ececec;
- border-right: 1px solid #ddd;
- text-align: right;
- padding: 10px 6px;
- vertical-align: top;
-}
-.content .numbers a {
- color: #aaa;
-}
-.content .code {
+.code {
width: 100%;
- vertical-align: top;
- padding-top: 10px;
+ padding-top: 0;
}
-.content .code > .highlight {
+.code .highlight {
position: relative;
- padding-left: 10px;
+ padding-left: 0;
}
-.content .code > .highlight > pre {
+.code .highlight pre {
position: relative;
- z-index: 2;
}
-#highlight_line {
+.highlight_line {
background: #ffffcc;
- position: absolute;
- left: 0;
- right: 0;
- width: 100%;
- height: 16px;
- z-index: 1;
}
#file-info {
display: none;
diff --git a/data/js/script.js b/data/js/script.js
index ffa036280..7d84eb9a1 100644
--- a/data/js/script.js
+++ b/data/js/script.js
@@ -9,17 +9,14 @@ function fixedEncodeURIComponent (str) {
$(window).bind('hashchange', function(e) {
var hash = window.location.hash;
- $('#highlight_line').remove();
+ $('.highlight_line').removeClass("highlight_line");
if (hash.match(/^#n\d+$/) === null) {
return;
}
- var link = $(hash);
-
- $('<div id="highlight_line" />').prependTo('.highlight').css({
- top: link.get(0).offsetTop - 10 + parseInt(link.css("padding-top")) + 'px'
- });
+ var line = $(hash).parent().parent();
+ line.addClass("highlight_line");
});
$(window).trigger('hashchange');
@@ -59,14 +56,12 @@ function fixedEncodeURIComponent (str) {
return this;
});
- window.lines_wrapped = false;
+ window.lines_wrapped = true;
$('#linewrap').click(function() {
if (window.lines_wrapped == true) {
- $(".content .numbers").show();
- $(".content .code > .highlight > pre").css("white-space", "pre");
+ $(".highlight > pre").css("white-space", "pre");
} else {
- $(".content .numbers").hide();
- $(".content .code > .highlight > pre").css("white-space", "pre-wrap");
+ $(".highlight > pre").css("white-space", "pre-wrap");
}
window.lines_wrapped = !window.lines_wrapped;
});