Add syntax highlighted code block

[en30]

Why formatting on client side?

• compatibility to remote instance and clients other than browser

Algorithm

Status content is formatted by Formatter.instance.format(status), which replaces urls and mentions and hashtags to links and apply ActionView::Helpers::TextHelper#simple_format.
This make it difficult to modify status content as string.

So I adopted strategy below

1. parse status and build DOM tree
2. DFS
   1. find start delimiter
   2. collect text till finding stop delimiter
   3. create code element wrapped by pre and insert it

Known issue

@foo and #bar inside code block are also treated as mention and tag.

Spec

  createCodeElement
    gieven supported language
      ✓ returns pre element whose innerHTML is syntax highlighted
    given unsupported language
      ✓ returns pre element whose innerHTML is trimmed escaped text

  highlight
    if text does not include complete code block
      ✓ returns given text
    if text include code block
      ✓ transforms "<p>```</p><p>code</p><p>```</p>" into "<pre><code>\ncode\n\n</code></pre>"
      ✓ transforms "<p>```</p><p>code<br />```</p>" into "<pre><code>\ncode\n</code></pre>"
      ✓ transforms "<p>```</p><p>code<br />```<br />text</p>" into "<pre><code>\ncode\n</code></pre><p>text</p>"
      ✓ transforms "<p>text<br />```</p><p>code</p><p>```</p>" into "<p>text</p><pre><code>\ncode\n\n</code></pre>"
      ✓ transforms "<p>text<br />```</p><p>code<br />```</p>" into "<p>text</p><pre><code>\ncode\n</code></pre>"
      ✓ transforms "<p>text<br />```</p><p>code<br />```<br />text</p>" into "<p>text</p><pre><code>\ncode\n</code></pre><p>text</p>"
      ✓ transforms "<p>text<br />```<br />code</p><p>```</p>" into "<p>text</p><pre><code>code\n\n</code></pre>"
      ✓ transforms "<p>text<br />```<br />code<br />```</p>" into "<p>text</p><pre><code>code\n</code></pre>"
      ✓ transforms "<p>text<br />```<br />code<br />```<br />text</p>" into "<p>text</p><pre><code>code\n</code></pre><p>text</p>"
      ✓ transforms "<p>```<br />code<br />```</p>" into "<pre><code>code\n</code></pre>"
      ✓ transforms "<p>```<br />&lt;script&gt;alert(&#39;hi&#39;)&lt;/script&gt;<br />```</p>" into "<pre><code>&lt;script&gt;alert('hi')&lt;/script&gt;\n</code></pre>"
      ✓ transforms "<p>text<br />```<br />code1<br />```</p><p>text2<br />```<br />code2<br />```</p>" into "<p>text</p><pre><code>code1\n</code></pre><p>text2</p><pre><code>code2\n</code></pre>"