         file.textContent += 'in ' + @message.displayFile
     else
       file = null
-    @appendChild ribbon
-    @appendChild theMessage
+    @appendChild Message.renderRibbon(@message.type)
+    @appendChild Message.renderMessage(@message)
     @appendChild file if file
-  onClick: ->
-    atom.workspace.open(@message.file).then =>
-      return unless @message.position
+
+  @renderRibbon: (Type)->
+    El = document.createElement 'span'
+    El.classList.add 'badge'
+    El.classList.add 'badge-flexible'
+    El.classList.add "badge-#{Type.toLowerCase()}"
+    El.textContent = Type
+    El
+
+  @renderMessage: (message)->
+    El = document.createElement 'span'
+    if message.html
+      El.innerHTML = message.html
+    else
+      El.textContent = message.message
+    El
+
+  @onClick: (file, position)->
+    atom.workspace.open(file).then ->
+      return unless position
       atom.workspace.getActiveTextEditor().setCursorBufferPosition(
-        [@message.position[0][0] - 1, @message.position[0][1] - 1]
+        [position[0][0] - 1, position[0][1] - 1]
       )
 
-module.exports = Message = document.registerElement('linter-message', {prototype: Message.prototype})+module.exports = document.registerElement('linter-message', {prototype: Message.prototype})
          @message.displayFile = @message.file.substr( path.length + 1 ) # Remove the trailing slash as well
          throw null
      file = document.createElement 'a'
      file.addEventListener 'click', @onClick.bind(this, @message.file, @message.position)
      if @message.position
        file.textContent =
          'at line ' + @message.position[0][0] + ' col ' + @message.position[0][1] + ' '

  initialize: (@message, @addPath)->

  attachedCallback: ->

    # The link
    if @message.file
