From 894ff7f76af4eada7d6efd3b46aeaaf3290024d9 Mon Sep 17 00:00:00 2001
From: Panos Sakkos <panos.sakkos@gmail.com>
Date: Thu, 19 Nov 2015 23:54:55 +0100
Subject: [PATCH] Fixes #50

---
 README.md                                    |  1 +
 _config.yml                                  |  2 ++
 _includes/head.html                          | 21 ++++++++++++---
 _includes/js.html                            | 11 +++++++-
 _posts/2015-06-05-404-page.md                |  6 ++---
 _posts/2015-06-11-social-buttons-tutorial.md |  4 +--
 _posts/2015-06-12-timeline-tutorial.md       |  4 +--
 _posts/2015-06-19-writing-posts.md           | 28 +++++++++++++++-----
 _posts/2015-06-20-blog-tutorial.md           | 16 +++++------
 _posts/2015-06-22-web-app-mode.md            |  4 +--
 _posts/2015-06-24-intro-layout-tutorial.md   | 20 +++++++-------
 _posts/2015-06-25-html-head-tutorial.md      | 12 ++++-----
 css/grayscale.scss                           |  2 ++
 13 files changed, 88 insertions(+), 43 deletions(-)

diff --git a/README.md b/README.md
index f16df62286ec9..288e0932557e4 100755
--- a/README.md
+++ b/README.md
@@ -30,6 +30,7 @@ You can watch it in action [here](https://panossakkos.github.io/personal-jekyll-
   * RSS feed
 * Cool (anti-procrastinating) 404 page
 * [Android Web App mode](https://developer.chrome.com/multidevice/android/installtohomescreen)
+* Syntax highlighting
 * Forcing of https protocol
 * Protection from Email harvesting
 * Travis CI integration with [html-proofer](https://github.com/gjtorikian/html-proofer)
diff --git a/_config.yml b/_config.yml
index 3f97af812ebb8..73179e2560e9d 100755
--- a/_config.yml
+++ b/_config.yml
@@ -20,6 +20,8 @@ google-tracking-id: "UA-35880426-4"
 
 force-https: True
 
+syntax-highlight: True
+
 # Sections shown in the index page
 
 pages_list:
diff --git a/_includes/head.html b/_includes/head.html
index d88aa78564872..902ce8305b478 100755
--- a/_includes/head.html
+++ b/_includes/head.html
@@ -16,9 +16,6 @@
   <meta name="author" content="{{site.author}}">
   <meta name="keywords" content="{{site.keyword}}">
   <link rel="canonical" href="{{page.url | replace:'index.html','' | prepend: site.baseurl}}">
-  {% if page.url == "/404.html" | prepend: {{site.baseurl}} %}
-    <meta http-equiv="refresh" content="20; url={{site.baseurl}}/">
-  {% endif %}
   <title>{{site.title}} {% if page.title %} | {{page.title}}{% endif %}</title>
 
   <!-- Bootstrap Core CSS -->
@@ -44,9 +41,27 @@
   {% if site.favicon %}
     <link rel="shortcut icon" type="image/x-icon" href="{{site.baseurl}}{{site.favicon}}">
   {% endif %}
+
+  {% if page.url == "/404.html" | prepend: {{site.baseurl}} %}
+    <meta http-equiv="refresh" content="20; url={{site.baseurl}}/">
+  {% endif %}
+
   {% if site.web-app-mode %}
+
+    <!-- Android Web App mode -->
+
     <link rel="manifest" href="{{site.baseurl}}/manifest.json">
+
+  {% endif %}
+
+  {% if site.syntax-highlight and page.section-type == "post"%}
+
+    <!-- Syntax highlight in post pages -->
+
+    <link rel="stylesheet" type="text/css" href="{{asset "css/screen.css"}}" />
+    <link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.2/styles/monokai_sublime.min.css">
   {% endif %}
+
 </head>
 
 <!-- HEAD End -->
diff --git a/_includes/js.html b/_includes/js.html
index 20e0764ebd9d7..0cf5af1d51199 100755
--- a/_includes/js.html
+++ b/_includes/js.html
@@ -22,7 +22,7 @@
 
 {% if page.section-type == "index" %}
 
-  <!-- Collapse navbar when navvar-brand is clicked -->
+  <!-- Collapse navbar when navbar-brand is clicked -->
 
   <script>
   $(function(){$(".navbar-brand").click(function(){$(".collapse.in")&&$(".collapse.in").animate({height:"1px"},500,function(){$(".collapse.in").removeClass("in")})})});
@@ -30,6 +30,15 @@
 
 {% endif %}
 
+{% if site.syntax-highlight and page.section-type == "post" %}
+
+  <!-- Syntax highlight in post pages-->
+
+  <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.2/highlight.min.js"></script>
+  <script>hljs.initHighlightingOnLoad();</script>
+
+{% endif %}
+
 {% if site.google-tracking-id %}
 
   <!-- Google Tracking Id Start -->
diff --git a/_posts/2015-06-05-404-page.md b/_posts/2015-06-05-404-page.md
index ca02c78a85777..8d3c5bb9b3ba8 100644
--- a/_posts/2015-06-05-404-page.md
+++ b/_posts/2015-06-05-404-page.md
@@ -6,12 +6,12 @@ category: tech
 tags: [ 'tutorial' ]
 ---
 
-You can change the text from the 404.html file and set the image from the _config.yml:
+You can change the text from the 404.html file and set the image from the \_config.yml:
 
-<pre style="text-align: left">
+<pre><code data-trim class="yaml">
 ############
 # 404 page #
 ############
 
 404-img: "/img/labtocat.png"
-</pre>
+</code></pre>
diff --git a/_posts/2015-06-11-social-buttons-tutorial.md b/_posts/2015-06-11-social-buttons-tutorial.md
index 3678fbeb2af90..3543a0c750930 100644
--- a/_posts/2015-06-11-social-buttons-tutorial.md
+++ b/_posts/2015-06-11-social-buttons-tutorial.md
@@ -9,7 +9,7 @@ tags: [ 'tutorial' ]
 Social buttons (rendered in the footer) are great for having a small hub with all your social footprint.
 In order to change them, jump to \_config.yml and edit the social list:
 
-<pre style="text-align: left">
+<pre><code data-trim class="yaml">
 social:
   - title: "github"
     url: "https://github.com/"
@@ -19,7 +19,7 @@ social:
     url: "http://youtube.com/"
   - title: "rss"
     url: "/feed.xml"
-</pre>
+</code></pre>
 
 The titles of the social link are used to find the icon in Font Awesome.
 
diff --git a/_posts/2015-06-12-timeline-tutorial.md b/_posts/2015-06-12-timeline-tutorial.md
index abe0fe822b31d..2c53f1330c3d3 100644
--- a/_posts/2015-06-12-timeline-tutorial.md
+++ b/_posts/2015-06-12-timeline-tutorial.md
@@ -10,7 +10,7 @@ the form of a timeline of photos, dates and text descriptions. Let's see how it
 
 Open the \_config.yml and find the events list definition, it should look like this:
 
-<pre style="text-align: left">
+<pre><code data-trim class="yaml">
 events:
   - image: "/img/career/spidertocat.png"
     date: "September 2013 - Today"
@@ -18,7 +18,7 @@ events:
   - image: "/img/career/baracktocat.jpg"
     date: "September 2007 - August 2013"
     description: "Started coding"
-</pre>
+</code></pre>
 
 For each event of your life, add a tuple of image, date and description to the events, and the timeline will be automatically generated!
 
diff --git a/_posts/2015-06-19-writing-posts.md b/_posts/2015-06-19-writing-posts.md
index 96af9ed017ac6..bd1d9670bdf4d 100644
--- a/_posts/2015-06-19-writing-posts.md
+++ b/_posts/2015-06-19-writing-posts.md
@@ -10,10 +10,10 @@ tags: [ 'tutorial' ]
 
 Run the ./scripts/newpost script with the file name of the post as an argument:
 
-<pre style="text-align: left">
+<pre><code data-trim class="bash">
 cd <your { Personal } repo>
 ./scripts/newpost hello-world
-</pre>
+</code></pre>
 
 A a new post template with name YYYY-MM-DD-hello-world.md will be created under ./\_posts, with the current date.
 
@@ -25,7 +25,7 @@ post, with publication date <i>YYYY-MM-DD</i>.
 
 The content starts with:
 
-<pre style="text-align: left">
+<pre><code data-trim class="yaml">
 ---
 layout: post
 section-type: post
@@ -33,7 +33,7 @@ title: Title
 category: Category
 tags: [ 'tag1', 'tag2' ]
 ---
-</pre>
+</code></pre>
 
 The *layout* and *section-type* are used by the theme.
 
@@ -48,10 +48,26 @@ As a result we have to create the tag pages before building and publishing the s
 
 In order to generate the tag pages, simply run the *generate-tags* script from the repo's root directory:
 
-<pre style="text-align: left">
+<pre><code data-trim class="bash">
 ./scripts/generate-tags
-</pre>
+</code></pre>
 
 The script will parse all your posts, and generate the tag pages for the newly added tags.
 
 If you are not using Github Pages, you can automate the execution of this script during build time.
+
+### Syntax highlighting
+
+If you want to include a code snippet in your post, simply use the following syntax:
+
+<pre><code data-trim class="c">
+#include<stdio.h>
+
+int main()
+{
+  printf("Hello, world of syntax highlighting!");
+  return 0;
+}
+</code></pre>
+
+<small>If you don't need syntax highlight in your website you can disable it by setting the syntax-highlight variable to False</small>
diff --git a/_posts/2015-06-20-blog-tutorial.md b/_posts/2015-06-20-blog-tutorial.md
index e7e3cd51874ad..5b564139642df 100644
--- a/_posts/2015-06-20-blog-tutorial.md
+++ b/_posts/2015-06-20-blog-tutorial.md
@@ -12,9 +12,9 @@ A website is truly personal if it's your blog as well, this place of the interne
 
 First of all, you get a preview of the latest post in the index, in order to attract the visitor to visit your blog. The size of this preview is defined by:
 
-<pre style="text-align: left">
+<pre><code data-trim class="yaml">
 post-preview-words: 96
-</pre>
+</code></pre>
 
 Feel free to experiment with different sizes, and pick the best for you.
 
@@ -24,9 +24,9 @@ A blog is expected to host many posts, so you will need an archive with paginati
 which in a nutshell it's a grouping of your posts in pages, in reverse chronological
 order. You can define the number of posts that are displayed per page by changing:
 
-<pre style="text-align: left">
+<pre><code data-trim class="yaml">
 paginate: 5
-</pre>
+</code></pre>
 
 Note that you can navigate the pages of the Archive by swiping left/right!
 
@@ -34,7 +34,7 @@ Note that you can navigate the pages of the Archive by swiping left/right!
 
 Facebook, Twitter, Reddit, LinkedIn, Google+, Pinterest, VKontakte share buttons are available which can be enabled or disabled by setting the following:
 
-<pre style="text-align: left">
+<pre><code data-trim class="yaml">
 fb-share: True
 twitter-share: True
 reddit-share: True
@@ -42,12 +42,12 @@ google-plus-share: True
 linkedin-share: True
 pinterest-share: True
 vkontakte-share: True
-</pre>
+</code></pre>
 
 ### Comments
 
 And you can enable <a href="http://www.disqus.com" target="\_blank">Disqus</a> comments by just setting your Disqus username here:
 
-<pre style="text-align: left">
+<pre><code data-trim class="yaml">
 disqus-shortname: "YOUR DISQUS USERNAME"
-</pre>
+</code></pre>
diff --git a/_posts/2015-06-22-web-app-mode.md b/_posts/2015-06-22-web-app-mode.md
index a704183150727..f26d2ab52216a 100644
--- a/_posts/2015-06-22-web-app-mode.md
+++ b/_posts/2015-06-22-web-app-mode.md
@@ -10,7 +10,7 @@ You can make your website behave like a native web app in
 devices by setting the web-app-mode variable to True and providing links for the
 icons for each resolution:
 
-<pre style="text-align: left">
+<pre><code data-trim class="yaml">
 web-app-mode: True
 
 # Icons for Chrome Web App mode https://developer.chrome.com/multidevice/android/installtohomescreen
@@ -20,7 +20,7 @@ icon-72p: "/img/web-app/icon-72p.png"
 icon-96p: "/img/web-app/icon-96p.png"
 icon-144p: "/img/web-app/icon-144p.png"
 icon-192p: "/img/web-app/icon-192p.png"
-</pre>
+</code></pre>
 
 This is how the website will look when added to the homescreen:
 
diff --git a/_posts/2015-06-24-intro-layout-tutorial.md b/_posts/2015-06-24-intro-layout-tutorial.md
index ed1a7d98ca5dc..a8f8d4f5a9e4b 100644
--- a/_posts/2015-06-24-intro-layout-tutorial.md
+++ b/_posts/2015-06-24-intro-layout-tutorial.md
@@ -21,32 +21,32 @@ If you want to disable the dynamic typing, set the site.dynamic-typing to false
 
 You can add your desired dynamically typed text in the lines list:
 
-<pre style="text-align: left">
+<pre><code data-trim class="yaml">
 ##############################
 # Dynamic Text on the header #
 ##############################
 
 dynamic-typing: True
-shuffle: True	# Shuffle the lines.
+shuffle: True # Shuffle the lines.
 loop: True
-loop-count:	False # Set False for infinite loop, or set any number for finite loop.
-type-speed:	10		# Default 10
-start-delay: 200	# Default 200
-delete-delay: 5000	# Default 5000
-lines:			# You can add HTML Tags in the Text
+loop-count: False # Set False for infinite loop, or set any number for finite loop.
+type-speed: 10 # Default 10
+start-delay: 200 # Default 200
+delete-delay: 5000 # Default 5000
+lines: # You can add HTML Tags in the Text
   - text: "The lower you fall, the higher you'll fly."
   - text: "Where’s your will to be weird?"
-</pre>
+</code></pre>
 
 <small>Many thanks to <a href="https://github.com/prashantsolanki3" target="blank">@prashantsolanki3</a> for this feature!</small>
 
 In order to set the background and your image, modify the following variables in \_config:
 
-<pre style="text-align: left">
+<pre><code data-trim class="yaml">
 black-favicon: "/img/black-lab-glass.ico"
 background-img: "../img/intro-bg.jpg"
 me-img: "/img/jetpacktocat.png"
-</pre>
+</code></pre>
 
 The black favicon is an image on the left of the navigation bar.
 Preferably it should be a black and white version of your favicon.
diff --git a/_posts/2015-06-25-html-head-tutorial.md b/_posts/2015-06-25-html-head-tutorial.md
index cc325371e261a..da3808a728ba4 100644
--- a/_posts/2015-06-25-html-head-tutorial.md
+++ b/_posts/2015-06-25-html-head-tutorial.md
@@ -8,7 +8,7 @@ tags: [ 'tutorial' ]
 
 In the \_config.yml, find and set the variables of the Head section:
 
-<pre style="text-align: left">
+<pre><code data-trim class="yaml">
 #############
 # HTML Head #
 #############
@@ -19,16 +19,16 @@ title: "{ John Smith }"
 favicon: "/img/favicon.ico"
 description: "Blog and website of John Smith, blogging mainly for tech. Opinions expressed are mine."
 keywords: "smith, jones, personal, Jekyll, theme"
-</pre>
+</code></pre>
 
 The values that you set, will be placed in the head section of every generated HTML page.
 
 Don't forget to set the configurations for your site's url and Google tracking id:
 
-<pre style="text-align: left">
+<pre><code data-trim class="yaml">
 url: "http://panossakkos.github.io/personal-jekyll-theme/"
 google-tracking-id: ""
-</pre>
+</code></pre>
 
 The url is essential to be set, because it's used in many places across the theme.
 
@@ -39,8 +39,8 @@ If you are using *{ Personal }* as a Github repository theme, set the repository
 This step is essential, since its related to file paths!
 In order to serve the website locally just run:
 
-<pre style="text-align: left">
+<pre><code data-trim class="bash">
 ./scripts/serve
-</pre>
+</code></pre>
 
 <small>Many thanks to <a href="https://github.com/joariasl" target="\_blank">@joariasl</a> for the language support! </small>
diff --git a/css/grayscale.scss b/css/grayscale.scss
index 7d8d90169f0cf..3fc511962b4c8 100644
--- a/css/grayscale.scss
+++ b/css/grayscale.scss
@@ -314,3 +314,5 @@ body {
     100% { opacity:1; }
 }
 /* END Added in { Personal } for Typed Cursor in Header */
+
+code { text-align: left; }