Highlight head

resource/css/_wiki.scss

@@ -131,10 +131,12 @@ div.body {
     }
   }
 
-  em.highlighted {
-    padding: 2px;
-    margin: 0 -2px;
-    font-weight: bold;
+  .highlighted {
+    &em {
+      padding: 2px;
+      margin: 0 -2px;
+      font-weight: bold;
+    }
     font-style: normal;
     color: #333;
     background-color: rgba(255,255,140,0.5);

resource/css/crowi.scss

@@ -174,6 +174,13 @@ footer {
     box-shadow: 0 0 2px rgba(0,0,0,.3);
   }
 }
+
+.highlighted {
+  color: #333;
+  background-color: rgba(255,255,140,0.5);
+  border-radius: 3px;
+}
+
 // components
 .flip-container { // {{{
   perspective: 1000;

resource/js/crowi.js

@@ -921,9 +921,39 @@ $(function() {
   //
 });
 
+Crowi.findHashFromUrl = function(url)
+{
+  var match;
+  if (match = url.match(/#(.+)$/)) {
+    return '#' + match[1];
+  }
+
+  return "";
+}
+
+Crowi.unhighlightSelectedSection = function(hash)
+{
+  if (!hash || hash == "") {
+    return true;
+  }
+  $(hash).removeClass('highlighted');
+}
+
+Crowi.highlightSelectedSection = function(hash)
+{
+  if (!hash || hash == "") {
+    return true;
+  }
+  $(hash).addClass('highlighted');
+}
+
 window.addEventListener('load', function(e) {
+  Crowi.highlightSelectedSection(location.hash);
   Crowi.modifyScrollTop();
 });
+
 window.addEventListener('hashchange', function(e) {
+  Crowi.unhighlightSelectedSection(Crowi.findHashFromUrl(e.oldURL));
+  Crowi.highlightSelectedSection(Crowi.findHashFromUrl(e.newURL));
   Crowi.modifyScrollTop();
 });