Fix display of code samples which got wonky with the switch from Pygm…

…ents to Rouge. Jekyll 3.0 forces switching from Pygments to Rouge for code highlighting. Using the Rouge native linenr feature screws up the layout of our code samples - see screenshots below. This PR fixes that by: * turning off the Rouge line nr feature. * using Liquid to add empty linenr spans at the beginning of each line * using CSS with :before to add the actual line numbers This PR also includes some additional HTML source code compression, getting rid of extraneous new lines caused by Liquid parsing (outside of `<pre>` tags). Both the linenrs as well as the blank line removal can be turned on/off via a configuration feature in `_config.yml`. Additionally, the syntax highlight styling has been synced with the GH native syntax highlight styles. ##### How it used to display ![screenshot Pygments](http://snag.gy/GSRNu.jpg) ##### Display after switching to Rouge ![screenshot Rouge](http://snag.gy/bX0BD.jpg)
TGMPA · Feb 12, 2016 · f052cf2 · f052cf2
1 parent 16af2ef
commit f052cf2
Show file tree

Hide file tree

Showing 15 changed files with 215 additions and 92 deletions.
diff --git a/04-Configuration.md b/04-Configuration.md
@@ -16,7 +16,7 @@ The **{{ site.tgmpa.name }}** library has an easy to use API to reference plugin
 
 
 
-{% highlight php linenos %}
+{% highlight php %}
 <?php
 /**
  * Include the TGM_Plugin_Activation class.

diff --git a/_config.yml b/_config.yml
@@ -44,6 +44,10 @@ collections:
         output: true
         permalink: /faq/:title/
 
+compress_html:
+    blanklines: true
+    codelinespans: true
+
 defaults:
     -
       scope:

diff --git a/_drafts/example-blog.md b/_drafts/example-blog.md
@@ -44,9 +44,9 @@ The section text. You can use all normal [GitHub flavoured markdown syntaxes](ht
 
 However for multi-line code samples this syntax is preferred - don't forget to make sure that the code sample starts with `<?php` !
 
-	{% highlight php linenos %}
-	<?php
-	// some PHP code
-	{% endhighlight %}
+{% highlight php %}
+<?php
+// some PHP code
+{% endhighlight %}
 
 There are also a number of variables available for use in all documents. It is strongly advised to use these when appropriate. For a list of these with some explanations, see example-page.md
diff --git a/_drafts/example-faq.md b/_drafts/example-faq.md
@@ -44,9 +44,9 @@ You can use all normal [GitHub flavoured markdown syntaxes](https://guides.githu
 
 However for multi-line code samples this syntax is preferred - don't forget to make sure that the code sample starts with `<?php` !
 
-	{% highlight php linenos %}
-	<?php
-	// some PHP code
-	{% endhighlight %}
+{% highlight php %}
+<?php
+// some PHP code
+{% endhighlight %}
 
 There are also a number of variables available for use in all documents. It is strongly advised to use these when appropriate. For a list of these with some explanations, see example-page.md
diff --git a/_drafts/example-homepage-section.md b/_drafts/example-homepage-section.md
@@ -30,9 +30,9 @@ The section text. You can use all normal [GitHub flavoured markdown syntaxes](ht
 
 However for multi-line code samples this syntax is preferred - don't forget to make sure that the code sample starts with `<?php` !
 
-	{% highlight php linenos %}
-	<?php
-	// some PHP code
-	{% endhighlight %}
+{% highlight php %}
+<?php
+// some PHP code
+{% endhighlight %}
 
 There are also a number of variables available for use in all documents. It is strongly advised to use these when appropriate. For a list of these with some explanations, see example-page.md
diff --git a/_drafts/example-page.md b/_drafts/example-page.md
@@ -60,10 +60,10 @@ You can use all normal [GitHub flavoured markdown syntaxes](https://guides.githu
 
 However for multi-line code samples this syntax is preferred - don't forget to make sure that the code sample starts with `<?php` !
 
-	{% highlight php linenos %}
-	<?php
-	// some PHP code
-	{% endhighlight %}
+{% highlight php %}
+<?php
+// some PHP code
+{% endhighlight %}
 
 There are also a number of variables available for use in all documents. It is strongly advised to use these when appropriate.
 - {{ site.baseurl }}     "/", i.e. the relative root url

diff --git a/_faqs/03-uninstalling-tgmpa.md b/_faqs/03-uninstalling-tgmpa.md
@@ -9,43 +9,43 @@ If your theme or plugin no longer needs **{{ site.tgmpa.name }}** (TGMPA) suppor
 <ol>
 <li>Find and delete the plugin registration function. It will look something like:
 
-	{% highlight php linenos %}
-	<?php
+{% highlight php %}
+<?php
+/**
+ * Required and Recommended Plugins
+ */
+function prefix_register_plugins() {
+
 	/**
-	 * Required and Recommended Plugins
+	 * Array of plugin arrays. Required keys are name and slug.
+	 * If the source is NOT from the .org repo, then source is also required.
 	 */
-	function prefix_register_plugins() {
-
-		/**
-		 * Array of plugin arrays. Required keys are name and slug.
-		 * If the source is NOT from the .org repo, then source is also required.
-		 */
-		$plugins = array(
-
-			// WordPress SEO
-			array(
-				'name'     => 'WordPress SEO by Yoast',
-				'slug'     => 'wordpress-seo',
-				'required' => false,
-			),
-			...
-		);
-
-		tgmpa( $plugins );
-	}
-	add_action( 'tgmpa_register', 'prefix_register_plugins' );
-	{% endhighlight %}
+	$plugins = array(
+
+		// WordPress SEO
+		array(
+			'name'     => 'WordPress SEO by Yoast',
+			'slug'     => 'wordpress-seo',
+			'required' => false,
+		),
+		...
+	);
+
+	tgmpa( $plugins );
+}
+add_action( 'tgmpa_register', 'prefix_register_plugins' );
+{% endhighlight %}
 
 	There should only be one instance of <code>tgmpa(</code> or <code>tgmpa_register</code> in your theme or plugin (other than the TGMPA class file), so search for that. The registration function may be with other code in <code>functions.php</code>, <code>init.php</code> or a separate file such as <code>include/tgmpa.php</code> or other file.</li>
 <li>Find and delete the <code>require_once()</code> call that references the TGMPA class file:
 
-	{% highlight php linenos %}
-	<?php
-	/**
-	 * Include the TGM_Plugin_Activation class.
-	 */
-	require_once dirname( __FILE__ ) . '/class-tgm-plugin-activation.php';
-	{% endhighlight %}
+{% highlight php %}
+<?php
+/**
+ * Include the TGM_Plugin_Activation class.
+ */
+require_once dirname( __FILE__ ) . '/class-tgm-plugin-activation.php';
+{% endhighlight %}
 
 	The file name is almost certainly unique, so search your theme or plugin for that. The theme or plugin author may have used <code>require</code>, <code>include</code> or <code>include_once</code> instead of <code>require_once</code>, and they may have added extra <code>( )</code> around the file path.</li>
 <li>Find and delete the TGMPA class file. Since the class file is no longer referenced, the whole <code>class-tgm-plugin-activation.php</code> file (or equivalent if renamed) can be deleted from your theme or plugin.</li>

diff --git a/_layouts/compress.html b/_layouts/compress.html
@@ -0,0 +1,2 @@
+{% capture _LINE_FEED %}
+{% endcapture %}{% capture _TAB %}	{% endcapture %}{% capture _content %}{{ content }}{% endcapture %}{% assign _pre_befores = _content | split: "<pre" %}{% assign _content = "" %}{% for _pre_before in _pre_befores %}{% assign _pres = _pre_before | split: "</pre>" %}{% assign _pres_after = "" %}{% assign _pre_content = "" %}{% if _pres.size == 2 %}{% if site.compress_html.codelinespans and _pres.first contains ' data-lang=' %}{% assign _lines = _pres.first | split: _LINE_FEED %}{% capture _pre_content %}{% for _line in _lines %}{% if forloop.first %}{{ _line | replace: 'data-lang="php">', 'data-lang="php"><span class="lineno"></span>' }}{{ _LINE_FEED }}{% elsif forloop.last %}{% assign _trimmed = _line | split: _TAB | join: "" | split: " " | join: "" %}{% if _trimmed != empty and trimmed != '</code>' %}<span class="lineno"></span>{% endif %}{{ _line }}{{ _LINE_FEED }}{% else %}<span class="lineno"></span>{{ _line }}{{ _LINE_FEED }}{% endif %}{% endfor %}{% endcapture %}{% endif %}{% endif %}{% if _pres.size != 0 %}{% if site.compress_html.blanklines %}{% assign _lines = _pres.last | split: _LINE_FEED %}{% capture _pres_after %}{% for _line in _lines %}{% assign _trimmed = _line | split: " " | join: " " %}{% if _trimmed != empty or forloop.last %}{% unless forloop.first %}{{ _LINE_FEED }}{% endunless %}{{ _line }}{% endif %}{% endfor %}{% endcapture %}{% else %}{% assign _pres_after = _pres.last | split: " " | join: " " %}{% endif %}{% endif %}{% capture _content %}{{ _content }}{% if _pre_before contains "</pre>" %}<pre{{ _pre_content }}</pre>{% endif %}{% unless _pre_before contains "</pre>" and _pres.size == 1 %}{{ _pres_after }}{% endunless %}{% endcapture %}{% endfor %}{{ _content }}
diff --git a/_layouts/compress.src.html b/_layouts/compress.src.html
@@ -0,0 +1,76 @@
+{% capture _LINE_FEED %}
+{% endcapture %}
+
+{% capture _TAB %}	{% endcapture %}
+
+{% capture _content %}{{ content }}{% endcapture %}
+
+{% assign _pre_befores = _content | split: "<pre" %}
+{% assign _content = "" %}
+{% for _pre_before in _pre_befores %}
+	{% assign _pres = _pre_before | split: "</pre>" %}
+	{% assign _pres_after = "" %}
+	{% assign _pre_content = "" %}
+
+
+	{% comment %}Add line nr spans within <pre> tags{% endcomment %}
+
+	{% if _pres.size == 2 %}
+		{% if site.compress_html.codelinespans and _pres.first contains ' data-lang=' %}
+			{% assign _lines = _pres.first | split: _LINE_FEED %}
+			{% capture _pre_content %}
+				{% for _line in _lines %}
+					{% if forloop.first %}
+						{{ _line | replace: 'data-lang="php">', 'data-lang="php"><span class="lineno"></span>' }}
+						{{ _LINE_FEED }}
+					{% elsif forloop.last %}
+						{% assign _trimmed = _line | split: _TAB | join: "" | split: " " | join: "" %}
+						{% if _trimmed != empty and trimmed != '</code>' %}
+							<span class="lineno"></span>
+						{% endif %}
+						{{ _line }}
+						{{ _LINE_FEED }}
+					{% else %}
+						<span class="lineno"></span>
+						{{ _line }}
+						{{ _LINE_FEED }}
+					{% endif %}
+				{% endfor %}
+			{% endcapture %}
+		{% endif %}
+	{% endif %}
+
+
+	{% comment %}Remove superfluous blank lines outside of <pre> tags{% endcomment %}
+
+	{% if _pres.size != 0 %}
+		{% if site.compress_html.blanklines %}
+			{% assign _lines = _pres.last | split: _LINE_FEED %}
+			{% capture _pres_after %}
+				{% for _line in _lines %}
+					{% assign _trimmed = _line | split: " " | join: " " %}
+					{% if _trimmed != empty or forloop.last %}
+						{% unless forloop.first %}
+							{{ _LINE_FEED }}
+						{% endunless %}
+						{{ _line }}
+					{% endif %}
+				{% endfor %}
+			{% endcapture %}
+		{% else %}
+			{% assign _pres_after = _pres.last | split: " " | join: " " %}
+		{% endif %}
+	{% endif %}
+
+
+	{% capture _content %}
+		{{ _content }}
+
+		{% if _pre_before contains "</pre>" %}<pre{{ _pre_content }}</pre>{% endif %}
+		{% unless _pre_before contains "</pre>" and _pres.size == 1 %}{{ _pres_after }}{% endunless %}
+	{% endcapture %}
+{% endfor %}
+
+{% comment %}Output{% endcomment %}
+
+{{ _content }}
diff --git a/_layouts/default.html b/_layouts/default.html
@@ -1,3 +1,6 @@
+---
+layout: compress
+---
 <!doctype html>
 <html lang="en">
 {% include header.html %}

diff --git a/_layouts/faq-question.html b/_layouts/faq-question.html
@@ -1,3 +1,6 @@
+---
+layout: compress
+---
 <!doctype html>
 <html lang="en">
 {% include header.html %}

diff --git a/_layouts/single-post.html b/_layouts/single-post.html
@@ -1,3 +1,6 @@
+---
+layout: compress
+---
 <!doctype html>
 <html lang="en">
 {% include header.html %}

diff --git a/css/style.css b/css/style.css
@@ -39,11 +39,11 @@ ol li {
 }
 
 blockquote {
-    border-left: 5px double #E73A74;
-    border-right: 5px double #E73A74;
-    margin: 1em 5px 2em;
-    padding: 0 30px;
-    font-style: italic;
+	border-left: 5px double #E73A74;
+	border-right: 5px double #E73A74;
+	margin: 1em 5px 2em;
+	padding: 0 30px;
+	font-style: italic;
 }
 
 h1,
@@ -201,24 +201,49 @@ code {
 	font-size: 110%;
 }
 
+.highlight {
+	margin: 0;
+}
+
 .highlight pre {
 	background: #F6F6F6;
 	border: 1px solid #EEE;
 	border-radius: 5px;
 	color: #440;
-	margin: 1em 0;
-	padding: 0.5em;
+	margin: 1em 3em 1em 0;
+	padding: 0.5em 0;
 	overflow: auto;
 	max-height: 40em;
 }
 
-.highlight .lineno {
-    background-color: #555555;
-    border-right: 1px solid #E73A74;
-    color: #FFFFFF;
-    display: inline-block;
-    margin-right: 3px;
-    padding: 2px 10px 1px;
+.highlight pre code {
+	counter-reset: line;
+}
+
+.highlight pre code span.lineno {
+	counter-increment: line;
+	position: relative;
+	left: -2em;
+	margin-left: 2em;
+}
+
+.highlight pre code span.lineno:before {
+	content: counter(line);
+	background-color: #555555;
+	border-right: 1px solid #E73A74;
+	color: #FFFFFF;
+	display: inline-block;
+	margin: 0;
+	padding: 2px 10px 1px;
+	text-align: right;
+	min-width: 2em;
+	font-style: normal;
+	-webkit-user-select: none;
+	-webkit-touch-callout: none;
+	-khtml-user-select: none;
+	-moz-user-select: none;
+	-ms-user-select: none;
+	user-select: none;
 }
 
 
@@ -315,7 +340,7 @@ a.top {
 
 /* Styling for the configuration tables on the configuration page and the releases table on the download page. */
 table {
-    border-collapse: collapse;
+	border-collapse: collapse;
 }
 table, th, td {
    border: 1px solid #cccccc;
@@ -369,16 +394,16 @@ div#download table {
 }
 
 .contributor {
-    float: left;
-    margin: 0.3em 0;
-    padding-right: 5px;
-    vertical-align: top;
-    width: 165px;
+	float: left;
+	margin: 0.3em 0;
+	padding-right: 5px;
+	vertical-align: top;
+	width: 165px;
 	font-size: 90%;
 }
 .contributor img {
-    margin-right: 5px;
-    vertical-align: -25%;
+	margin-right: 5px;
+	vertical-align: -25%;
 }
 
 /* Styling for the site last-update date at the bottom of the page */
@@ -430,7 +455,7 @@ div#download table {
 }
 
 .post-meta img {
-    vertical-align: -20%;
+	vertical-align: -20%;
 }
 
 .post-meta .post-category-tags {