Fixes barryclark#50

tonymaibox · Nov 19, 2015 · 894ff7f · 894ff7f
1 parent 80c9c06
commit 894ff7f
Show file tree

Hide file tree

Showing 13 changed files with 88 additions and 43 deletions.
diff --git 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
@@ -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
@@ -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
@@ -22,14 +22,23 @@
 
 {% 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")})})});
   </script>
 
 {% 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
@@ -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
@@ -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
@@ -10,15 +10,15 @@ 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"
     description: "Saving the neighborhood!"
   - 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
@@ -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,15 +25,15 @@ 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
 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
@@ -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,30 +24,30 @@ 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!
 
 ### Share buttons
 
 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
 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
@@ -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
@@ -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
@@ -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
@@ -314,3 +314,5 @@ body {
     100% { opacity:1; }
 }
 /* END Added in { Personal } for Typed Cursor in Header */
+
+code { text-align: left; }