Merge pull request #2342 from jekyll/anchor-links

site/_config.yml

@@ -1,3 +1,4 @@
+markdown: kramdown
 highlighter: pygments
 relative_permalinks: false
 gauges_id: 503c5af6613f5d0f19000027

site/_includes/anchor_links.html

@@ -0,0 +1,27 @@
+<script type="text/javascript" charset="utf-8">
+var anchorForId = function(id){
+
+  var anchor = document.createElement("a");
+  anchor.className = "header-link";
+  anchor.href      = "#" + id;
+  anchor.innerHTML = '<i class="fa fa-link"></i>';
+  return anchor;
+}
+var linkifyAnchors = function(level, containingElement) {
+
+  var headers = containingElement.getElementsByTagName("h"+level);
+  for(var h=0; h<headers.length; h++){
+    var header = headers[h];
+
+    if( typeof(header.id) !== "undefined" && header.id !== "" )
+      header.appendChild(anchorForId(header.id));
+  }
+};
+document.onreadystatechange = function(){
+  if(this.readyState === "complete"){
+    var contentBlock = document.getElementsByClassName("docs")[0] || document.getElementsByClassName("news")[0]
+    for(var level=1; level<=6; level++)
+      linkifyAnchors(level, contentBlock);
+  }
+}
+</script>

site/_includes/css/font-awesome.css

@@ -0,0 +1,44 @@
+/*!
+ *  Font Awesome 4.0.3 by @davegandy - http://fontawesome.io - @fontawesome
+ *  License - http://fontawesome.io/license (Font: SIL OFL 1.1, CSS: MIT License)
+ */
+@font-face {
+  font-family: 'FontAwesome';
+  src: url('../fonts/fontawesome-webfont.eot?v=4.0.3');
+  src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.0.3') format('embedded-opentype'), url('../fonts/fontawesome-webfont.woff?v=4.0.3') format('woff'), url('../fonts/fontawesome-webfont.ttf?v=4.0.3') format('truetype'), url('../fonts/fontawesome-webfont.svg?v=4.0.3#fontawesomeregular') format('svg');
+  font-weight: normal;
+  font-style: normal;
+}
+.fa {
+  display: inline-block;
+  font-family: FontAwesome;
+  font-style: normal;
+  font-weight: normal;
+  line-height: 1;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+.fa-link:before {
+  content: "\f0c1";
+}
+/*
+ * This code is courtesy Ben Balter, modified by Parker Moore for jekyllrb.com
+ * http://ben.balter.com/2014/03/13/pages-anchor-links/
+ */
+.header-link {
+  position: relative;
+  left: 0.5em;
+  opacity: 0;
+  font-size: 0.8em;
+
+  -webkit-transition: opacity 0.2s ease-in-out 0.1s;
+  -moz-transition: opacity 0.2s ease-in-out 0.1s;
+  -ms-transition: opacity 0.2s ease-in-out 0.1s;
+}
+h2:hover .header-link,
+h3:hover .header-link,
+h4:hover .header-link,
+h5:hover .header-link,
+h6:hover .header-link {
+  opacity: 1;
+}

site/_includes/top.html

@@ -10,6 +10,7 @@
   <link rel="stylesheet" href="//fonts.googleapis.com/css?family=Lato:300,300italic,400,400italic,700,700italic,900">
   <link rel="stylesheet" href="/css/screen.css">
   <link rel="icon" type="image/x-icon" href="/favicon.ico">
+  {% include anchor_links.html %}
   <!--[if lt IE 9]>
   <script src="/js/html5shiv.min.js"></script>
   <script src="/js/respond.min.js"></script>

site/css/screen.css

@@ -18,6 +18,10 @@
  * $pygments.css  *
 \*                */
 {% include css/pygments.css %}
+/*                *\
+ * $font-awesome.css  *
+\*                */
+{% include css/font-awesome.css %}
 {% endcapture %}
 
 {% if site.GH_ENV %}