From c3532718a79f102f4e19c11868a2c618b482eb6a Mon Sep 17 00:00:00 2001
From: slene <vslene@gmail.com>
Date: Thu, 20 Mar 2014 17:25:48 +0800
Subject: [PATCH] add anchor

---
 public/css/markdown.css | 59 ++++++++++++++++++++++++++++++++++++++---
 public/js/app.js        | 21 ++++++++++++++-
 2 files changed, 76 insertions(+), 4 deletions(-)

diff --git a/public/css/markdown.css b/public/css/markdown.css
index 9283fb847c..1edc3b626c 100644
--- a/public/css/markdown.css
+++ b/public/css/markdown.css
@@ -15,7 +15,8 @@
   line-height: 1.7;
   padding: 15px 0 0;
   margin: 0 0 15px;
-  color: #666;
+  color: #444;
+  font-weight: bold;
 }
 
 .markdown h1,
@@ -86,6 +87,10 @@
   margin-top: 6px;
 }
 
+.markdown li:first-child {
+  margin-top: 0;
+}
+
 .markdown dl dt {
   font-style: italic;
   margin-top: 9px;
@@ -130,11 +135,11 @@
 }
 
 .markdown > pre > ol.linenums > li:first-child {
-  padding-top: 6px;
+  padding-top: 12px;
 }
 
 .markdown > pre > ol.linenums > li:last-child {
-  padding-bottom: 6px;
+  padding-bottom: 12px;
 }
 
 .markdown > pre > ol.linenums > li {
@@ -163,6 +168,54 @@
   color: #fff;
 }
 
+.markdown .anchor-wrap {
+  /*margin-top: -50px;*/
+  /*padding-top: 50px;*/
+}
+
+.markdown h1 a, .markdown h2 a, .markdown h3 a {
+  text-decoration: none;
+}
+
+.markdown h1 a.anchor,
+.markdown h2 a.anchor,
+.markdown h3 a.anchor,
+.markdown h4 a.anchor,
+.markdown h5 a.anchor,
+.markdown h6 a.anchor {
+  text-decoration:none;
+  line-height:1;
+  padding-left:0;
+  margin-left:5px;
+  top:15%;
+}
+.markdown a span.octicon {
+  font-size: 16px;
+  font-family: "FontAwesome";
+  line-height: 1;
+  display: inline-block;
+  text-decoration: none;
+  -webkit-font-smoothing: antialiased;
+}
+
+.markdown a span.octicon-link {
+  display: none;
+  color: #000;
+}
+
+.markdown a span.octicon-link:before {
+  content: "\f0c1";
+}
+
+.markdown h1:hover .octicon-link,
+.markdown h2:hover .octicon-link,
+.markdown h3:hover .octicon-link,
+.markdown h4:hover .octicon-link,
+.markdown h5:hover .octicon-link,
+.markdown h6:hover .octicon-link {
+  display:inline-block
+}
+
 /* Author: jmblog */
 /* Project: https://github.com/jmblog/color-themes-for-google-code-prettify */
 /* GitHub Theme */
diff --git a/public/js/app.js b/public/js/app.js
index 30296bc337..f3e8d6d1d2 100644
--- a/public/js/app.js
+++ b/public/js/app.js
@@ -66,9 +66,28 @@ var Gogits = {
 
     // render markdown
     Gogits.renderMarkdown = function () {
-        var $pre = $('.markdown').find('pre > code').parent();
+        var $md = $('.markdown');
+        var $pre = $md.find('pre > code').parent();
         $pre.addClass("prettyprint");
         prettyPrint();
+
+        // Set anchor.
+        var headers = {};
+        $md.find('h1, h2, h3, h4, h5, h6').each(function () {
+            var node = $(this);
+            var val = encodeURIComponent(node.text().toLowerCase().replace(/[^\w\- ]/g, '').replace(/[ ]/g, '-'));
+            var name = val;
+            if(headers[val] > 0){
+                name = val + '-' + headers[val];
+            }
+            if(headers[val] == undefined){
+                headers[val] = 1;
+            }else{
+                headers[val] += 1;
+            }
+            node = node.wrap('<div id="' + name + '" class="anchor-wrap" ></div>');
+            node.append('<a class="anchor" href="#' + name + '"><span class="octicon octicon-link"></span></a>');
+        });
     }
 
 })(jQuery);