Enable syntax highlighting for PRE blocks.

_config.yml

@@ -6,6 +6,8 @@ kramdown:
   hard_wrap: false
   syntax_highlighter: rouge
 
+highlighter: rouge
+
 baseurl:
 
 liquid:

_docs/tasks/installing-istio.md

@@ -17,14 +17,13 @@ This page shows how to install and configure Istio in a Kubernetes cluster.
 
 * If you are using [Google Container Engine](https://cloud.google.com/container-engine), please make sure you are using static client certificates before fetching cluster credentials:
 
-   ```bash
+  ```bash
-   gcloud config set container/use_client_certificate True
+  gcloud config set container/use_client_certificate True
-   ```
+  ```
-
   Find out your cluster name and zone, and fetch credentials:
-   ```bash
+  ```bash
-   gcloud container clusters get-credentials <cluster-name> --zone <zone> --project <project-name>
+  gcloud container clusters get-credentials <cluster-name> --zone <zone> --project <project-name>
-   ```
+  ```
 
 * Install the Kubernetes client [kubectl](https://kubernetes.io/docs/tasks/tools/install-kubectl/), or upgrade to the latest version supported by your cluster.
 
@@ -164,9 +163,9 @@ When deploying the application, you must
 use [istioctl kube-inject]({{home}}/docs/reference/commands/istioctl.html#istioctl-kube-inject) to automatically inject
 Envoy containers in your application pods:
 
-   ```bash
+```bash
-   kubectl create -f <(istioctl kube-inject -f <your-app-spec>.yaml)
+kubectl create -f <(istioctl kube-inject -f <your-app-spec>.yaml)
-   ```
+```
 
 ## Uninstalling
 

_includes/source-file.html

@@ -0,0 +1,26 @@
+{% capture samplecode %}{% include_relative {{include.file}} %}{% endcapture %}
+{% if include.k8slink %}{% capture ghlink %}https://raw.githubusercontent.com/istio/{{page.githubrepo}}/blob/{{page.githubbranch}}{{include.istiolink}}{% endcapture %}{% endif %}
+{% if include.ghlink %}{% capture ghlink %}https://raw.githubusercontent.com/istio/istio.github.io/{{page.docsbranch}}{{include.ghlink}}{% endcapture %}{% endif %}
+{% capture mysample %}
+```{{include.language}}
+{{ samplecode | raw | strip }}
+```
+{: id="{{include.file | handleize}}"}
+{% endcapture %}
+<table class="includecode">
+	<thead>
+	<tr>
+		<th>
+			{% if ghlink %}<a href="{{ghlink}}" download="{{include.file}}">{% endif %}
+			<code>{{include.file}}</code>
+			{% if ghlink %}</a>{% endif %}
+			<img src="/img/clipboard.svg" style="max-height:24px" onclick="copyCode('{{include.file | handleize}}')" title="Copy {{include.file}} to clipboard">
+		</th>
+	</tr>
+	</thead>
+	<tbody>
+	<tr>
+		<td>{{ mysample | markdownify }}</td>
+	</tr>
+	</tbody>
+</table>

_sass/base/_override.scss

@@ -37,7 +37,7 @@ code {
   font-size: $font-size--primary;
 }
 
-pre, pre.prettyprint {
+pre {
   background-color: $codeBkColor;
   color: #000000;
   border: none !important;

_sass/modules/_syntax-highlighting.scss

@@ -0,0 +1,62 @@
+.highlight
+{
+    .c { color: #999988; font-style: italic } /* Comment */
+    .err { color: #a61717; background-color: #e3d2d2 } /* Error */
+    .k { font-weight: bold } /* Keyword */
+    .o { font-weight: bold } /* Operator */
+    .cm { color: #999988; font-style: italic } /* Comment.Multiline */
+    .cp { color: #999999; font-weight: bold } /* Comment.Preproc */
+    .c1 { color: #999988; font-style: italic } /* Comment.Single */
+    .cs { color: #999999; font-weight: bold; font-style: italic } /* Comment.Special */
+    .gd { color: #000000; background-color: #ffdddd } /* Generic.Deleted */
+    .gd .x { color: #000000; background-color: #ffaaaa } /* Generic.Deleted.Specific */
+    .ge { font-style: italic } /* Generic.Emph */
+    .gr { color: #aa0000 } /* Generic.Error */
+    .gh { color: #999999 } /* Generic.Heading */
+    .gi { color: #000000; background-color: #ddffdd } /* Generic.Inserted */
+    .gi .x { color: #000000; background-color: #aaffaa } /* Generic.Inserted.Specific */
+    .go { color: #888888 } /* Generic.Output */
+    .gp { color: #555555 } /* Generic.Prompt */
+    .gs { font-weight: bold } /* Generic.Strong */
+    .gu { color: #aaaaaa } /* Generic.Subheading */
+    .gt { color: #aa0000 } /* Generic.Traceback */
+    .kc { font-weight: bold } /* Keyword.Constant */
+    .kd { font-weight: bold } /* Keyword.Declaration */
+    .kp { font-weight: bold } /* Keyword.Pseudo */
+    .kr { font-weight: bold } /* Keyword.Reserved */
+    .kt { color: #445588; font-weight: bold } /* Keyword.Type */
+    .m { color: #009999 } /* Literal.Number */
+    .s { color: #d14 } /* Literal.String */
+    .na { color: #008080 } /* Name.Attribute */
+    .nb { color: #0086B3 } /* Name.Builtin */
+    .nc { color: #445588; font-weight: bold } /* Name.Class */
+    .no { color: #008080 } /* Name.Constant */
+    .ni { color: #800080 } /* Name.Entity */
+    .ne { color: #990000; font-weight: bold } /* Name.Exception */
+    .nf { color: #990000; font-weight: bold } /* Name.Function */
+    .nn { color: #555555 } /* Name.Namespace */
+    .nt { color: #000080 } /* Name.Tag */
+    .nv { color: #008080 } /* Name.Variable */
+    .ow { font-weight: bold } /* Operator.Word */
+    .w { color: #bbbbbb } /* Text.Whitespace */
+    .mf { color: #009999 } /* Literal.Number.Float */
+    .mh { color: #009999 } /* Literal.Number.Hex */
+    .mi { color: #009999 } /* Literal.Number.Integer */
+    .mo { color: #009999 } /* Literal.Number.Oct */
+    .sb { color: #d14 } /* Literal.String.Backtick */
+    .sc { color: #d14 } /* Literal.String.Char */
+    .sd { color: #d14 } /* Literal.String.Doc */
+    .s2 { color: #d14 } /* Literal.String.Double */
+    .se { color: #d14 } /* Literal.String.Escape */
+    .sh { color: #d14 } /* Literal.String.Heredoc */
+    .si { color: #d14 } /* Literal.String.Interpol */
+    .sx { color: #d14 } /* Literal.String.Other */
+    .sr { color: #009926 } /* Literal.String.Regex */
+    .s1 { color: #d14 } /* Literal.String.Single */
+    .ss { color: #990073 } /* Literal.String.Symbol */
+    .bp { color: #999999 } /* Name.Builtin.Pseudo */
+    .vc { color: #008080 } /* Name.Variable.Class */
+    .vg { color: #008080 } /* Name.Variable.Global */
+    .vi { color: #008080 } /* Name.Variable.Instance */
+    .il { color: #009999 } /* Literal.Number.Integer.Long */
+}

css/all.scss

@@ -16,6 +16,7 @@ sitemap_exclude: y
 @import "modules/_nav";
 @import "modules/_search-box";
 @import "modules/_section-index";
+@import "modules/_syntax-highlighting";
 
 @import "layouts/_about";
 @import "layouts/_blog";

js/common.js

@@ -2,100 +2,11 @@
 sitemap_exclude: y
 ---
 
-// Youtube Player API
-// create script tag and add to DOM
-var tag = document.createElement('script');
-tag.src = "https://www.youtube.com/iframe_api";
-var firstScriptTag = document.getElementsByTagName('script')[0];
-firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
-
-// Array of videoIds
-// The key corresponds to the data attributes in about/index.html
-var playerInfoList = [
-    {type: 'yt', key: 'UOIJNygDNlE'}, 
-    {type: 'yt', key: 'nz-LcdoMYWA'}, 
-    {type: 'yt', key: 'sZx3oZt7LVg'}, 
-    {type: 'yt', key: 'RvUP7vX2P4s'}, 
-    {type: 'slideshare', key: 'http://www.slideshare.net/sujatatibre/g-rpc-talk-with-intel-3'}, 
-    {type: 'slideshare', key: 'http://www.slideshare.net/VarunTalwar4/grpc-design-and-implementation'},
-    {type: 'slideshare', key: 'http://www.slideshare.net/VarunTalwar4/grpc-overview'},
-    {type: 'slideshare', key: 'http://www.ustream.tv/recorded/86187859'}
-];  
-
-function createPlayer(key) {
-  $('#player').append('<iframe id="ytplayer" type="text/html" width="640" height="390" src="https://www.youtube.com/embed/'+key+'" frameborder="0" allowfullscreen>');
-}
-
-// click event for presentations/talks in about 
-$('.pt').on('click', function() {
-  var self = this,
-      video = playerInfoList.filter(function(obj) {
-        return obj.key == $(self).data('key'); 
-      })[0];
-
-
-  if (video.type == 'yt') {
-    createPlayer(video.key);
-  } else {
-    window.open(video.key);
-  }
-
-  resizePlayer();
-  $('#player iframe').on('load', function() {
-    $('.pt-lightbox').addClass('active');
-  });
-});
-
-
-// Close lightbox when clicking anywhere on overlay
-$('.pt-lightbox').on('click', function() {
-  if ($(this).hasClass('active')) {
-    $(this).removeClass('active');
-    $(this).find('iframe').remove();
-    $('body, html').removeClass('noscroll');
-  }
-});
-
-// Resize Player 
-function resizePlayer() {
-  var $inner = $('.pt-player'),
-      defaultHeight = window.innerHeight || document.documentElement.clientHeight,
-      defaultWidth = window.innerWidth || document.documentElement.clientWidth,
-      maxHeight = defaultHeight*.75,
-      maxWidth = defaultWidth*.75,
-      newWidth = maxWidth,
-      newHeight = 16 * maxWidth / 9;
-
-  if (defaultWidth > defaultHeight){
-      if (newHeight > maxHeight){
-        newWidth = 16 * maxHeight / 9;
-        newHeight = maxHeight;
-      }   
-  } else {
-      newWidth = 16 * maxHeight / 9;
-      newHeight = maxHeight;
-      if (newWidth > maxWidth){
-          newHeight = 9 * maxWidth / 16; 
-          newWidth = maxWidth;
-      }   
-  }   
-
-  $inner.css({"width": newWidth, "height": newHeight});
-}
-
-
-
 // Jquery UI for tabbed panes
 $.getScript("https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js", function(){
   setupTabs();
 });
 
-// Add the 'external' class to every outbound link on the site.
-// The css will add a small right arrow after the link.
-$('a').filter(function() {
-   return this.hostname && this.hostname !== location.hostname;
-}).addClass("external");
-
 //Set up tabs
 function setupTabs(rootElement) {
       rootElement = rootElement || document;
@@ -225,11 +136,6 @@ $(document).ready(function() {
     });
 });
 
-// Prettyprint
-$('pre').addClass("prettyprint");
-$.getScript("https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js", function(){
-});
-
 // Collapsible navbar menu, using https://github.com/jordnkr/collapsible
 $.getScript("{{ site.baseurl }}/js/jquery.collapsible.js", function(){
   highlightActive();