SO Chat color parser

colors.css

code .color-hightlight{color:inherit !important;}

.content > .color-highlight span{
  color:#ddd;
  margin-left:.25em;
}
.content > .color-highlight::before{
  content:'';
  display:inline-block;
  width:16px;
  height:16px;
  background:currentColor;
  vertical-align:text-bottom;
  border-radius:2px;
  box shadow: 1px 1px rgba(0,0,0,.3);
}

colors.js

var chat = document.getElementById('chat');
function parseNode(node) {
    if (node.classList && node.classList.contains('message') && !node.classList.contains('pending')) {
        [].forEach.call(node.childNodes, function(child) {
            if (/#(?:[0-9a-f]{3}){1,2}/ig.test(child.textContent)) {
                child.innerHTML = child.innerHTML.replace(/#(?:[0-9a-f]{3}){1,2}/ig, function(match) {
                    return '<span class=\"color-highlight\" style=\"color:'+match+';\"><span>' + match + '</span></span>';
                });
            }
        });
    }
}
[].forEach.call(chat.querySelectorAll('.user-container .message'), parseNode);
new MutationObserver(function(records) {
    records.forEach(function(record) {
        [].forEach.call(record.addedNodes, parseNode);
    });
}).observe(chat, {
    childList: true,
    subtree: true
});