notes: highlight notes linked via /posts/456#note-123.

app/assets/javascripts/notes.js

@@ -137,6 +137,14 @@ Danbooru.Note = {
       return $("#note-container div.note-box[data-id=" + id + "]");
     },
 
+    show_highlighted: function($note_box) {
+      var note_id = $note_box.data("id");
+
+      Danbooru.Note.Body.show(note_id);
+      $note_box.addClass("note-box-highlighted");
+      Danbooru.scroll_to($note_box);
+    },
+
     resize_inner_border: function($note_box) {
       var $inner_border = $note_box.find("div.note-box-inner-border");
       $inner_border.css({
@@ -789,6 +797,7 @@ Danbooru.Note = {
     Danbooru.Note.load_all();
 
     this.initialize_shortcuts();
+    this.initialize_highlight();
   },
 
   initialize_shortcuts: function() {
@@ -799,6 +808,15 @@ Danbooru.Note = {
 
     $("#image").click(Danbooru.Note.Box.toggle_all);
   },
+
+  initialize_highlight: function() {
+    var matches = window.location.hash.match(/^#note-(\d+)$/);
+
+    if (matches) {
+      var $note_box = Danbooru.Note.Box.find(matches[1]);
+      Danbooru.Note.Box.show_highlighted($note_box);
+    }
+  },
 }
 
 $(function() {

app/assets/stylesheets/common/000_vars.scss

@@ -27,6 +27,8 @@ $preview_flagged_color: #F00;
 $preview_sample_warning_color:  hsl(0,  100%, 90%); // light red
 $preview_quality_warning_color: hsl(50, 100%, 90%); // light yellow
 
+$note_highlight_color: $preview_pending_color;
+
 $error_color: hsl(0, 100%, 95%); // light red
 $success_color: hsl(120, 100%, 95%); // light green
 

app/assets/stylesheets/specific/notes.scss

@@ -92,6 +92,10 @@ div#note-container {
         vertical-align: middle;
       }
     }
+
+    &.note-box-highlighted {
+      outline: 2px solid $note_highlight_color;
+    }
   }
 }