What exactly is this code doing?

What exactly is this code doing?

  1. <script type="text/javascript">
  2. $(document).ready(function() {
  3.  $("*").each(function(e) {
  4.   this.style.color = this.nodeName;
  5.   });
  6.  });
    </script>
Basically, when it identifies stuff like <red>Test</red> and the output would be the color red. I am trying to create custom html tags, so that people can type <pink>My test</pink> and their text would come out pink! Its a neat idea, but there are two problems: I don't understand how this code works (it makes no sense to me and i was hoping someone could explain it) and secondly, is there a way that I can make this code pick up on html entities instead? For example:

&lt;pink&rt;My test&lt/pink&rt; - Can this code be modified to pick up on this too? I don't want to comprise security by allowing unsanitized strings to be posted.