UPDATE Markdown

アスタルテで動いてる最新のMarkdownに追従する更新です。
一応テストしてから実装してください。
今回のアップデートで
+ 見出しのレイアウト変更
+ リストのレイアウトの変更
+ 罫線のレイアウトの変更
+ より詳細なclass分け
+ codeのハイライト
+ 外部サーバー向け画像添付メッセージの表示
+ 1件のセキュリティー的な問題の修正
などが変更になっています

app/javascript/styles/markdown.scss

@@ -1,38 +1,89 @@
 .status__content {
 
   font-family: inherit;
-    max-height: 210px; 
-    overflow-x: hidden; 
-    overflow-y: auto; 
 
   h1{
-      font-size: 195%; 
+    color: #ec840d;
-      border-bottom: 2px solid #ff3333; 
+    font-weight: bold;
+    font-size: 1.6em;
+    padding: 0.5em;
+    display: inline-block;
+    line-height: 1.3;
+    background: #dbebf8;
+    vertical-align: middle;
+    border-radius: 25px 25px 25px 25px;
+    text-align: center;
+    border-bottom: solid 3px #ff0000;
   }
 
   h2{
-      font-size: 180%; 
+    color: #ec840d;
-      border-bottom: 2px solid #ff3333; 
+    font-weight: bold;
+    font-size: 1.5em;
+    padding: 0.5em;
+    display: inline-block;
+    line-height: 1.3;
+    background: #dbebf8;
+    vertical-align: middle;
+    border-radius: 25px 25px 25px 25px;
+    text-align: center;
+    border-bottom: solid 3px #fffb00;
   }
 
   h3{
-      font-size: 165%; 
+    color: #ec840d;
-      border-bottom: 2px solid #ff3333; 
+    font-weight: bold;
+    font-size: 1.4em;
+    padding: 0.5em;
+    display: inline-block;
+    line-height: 1.3;
+    background: #dbebf8;
+    vertical-align: middle;
+    border-radius: 25px 25px 25px 25px;
+    text-align: center;
+    border-bottom: solid 3px #2bff00;
   }
 
   h4{
-      font-size: 150%; 
+    color: #ec840d;
-      border-bottom: 2px solid #ff3333; 
+    font-weight: bold;
+    font-size: 1.3em;
+    padding: 0.5em;
+    display: inline-block;
+    line-height: 1.3;
+    background: #dbebf8;
+    vertical-align: middle;
+    border-radius: 25px 25px 25px 25px;
+    text-align: center;
+    border-bottom: solid 3px #00ffea;
   }
 
   h5{
-      font-size: 135%; 
+    color: #ec840d;
-      border-bottom: 2px solid #ff3333; 
+    font-weight: bold;
+    font-size: 1.2em;
+    padding: 0.5em;
+    display: inline-block;
+    line-height: 1.3;
+    background: #dbebf8;
+    vertical-align: middle;
+    border-radius: 25px 25px 25px 25px;
+    text-align: center;
+    border-bottom: solid 3px #0004ff;
   }
 
   h6{
-      font-size: 120%; 
+    color: #ec840d;
-      border-bottom: 2px solid #ff3333; 
+    font-weight: bold;
+    font-size: 1.1em;
+    padding: 0.5em;
+    display: inline-block;
+    line-height: 1.3;
+    background: #dbebf8;
+    vertical-align: middle;
+    border-radius: 25px 25px 25px 25px;
+    text-align: center;
+    border-bottom: solid 3px #7700ff;
   }
 
   em{
@@ -53,6 +104,30 @@
     margin-bottom: 5px;
     margin-left: 5px;
     background-color: #000000;
+
+    .positive{
+      color: #5bda57;
+    }
+
+    .negative{
+      color: #ff4949;
+    }
+
+    .rust-fanc{
+      color: #ba7eff;
+    }
+
+    .ruby-func{
+      color: #24a8e6;
+    }
+
+    .rust-macro{
+      color: #d2ff6a;
+    }
+
+    .contents{
+      color: #ff9925;
+    }
   }
 
   pre{
@@ -69,56 +144,47 @@
       padding-left: 8px;
       margin-top: 0.5em;
       margin-bottom: 0.5em;
-        color: $white; 
+      color: $primary-text-color;
       background-color: $ui-base-color;
       display: block;
       border-left: 4px solid $classic-highlight-color;
   }
 
-    ul{ 
+  ul.md-contents {
-      list-style: inside; 
+    border: double 4px #21b384;
-      br{ 
+    padding: 0.5em 1em 0.5em 2.3em;
-        display: none; 
+    position: relative;
   }
+  ul li.md-contents {
+    line-height: 1.5;
+    padding: 0.2em 0;
+    list-style-type: none!important;
+  }
+  ul li.md-contents:before {
+    font-family: FontAwesome;
+    content: "\f0a4";
+    position: absolute;
+    left : 1em;
+    color: #21b384;
   }
 
-    ul>ul{ 
+  ol.md-contents {
-      br{ 
+    border: double 4px #ff954f;
-        display: none; 
+    padding: 0.5em 1em 0.5em 1em;
-      } 
+    position: relative;
-    } 
-   
-    ul>li>ul{ 
-      padding-left: 1em; 
-      list-style: inside circle; 
-    } 
-   
-    ul>li{ 
-      padding-left: 1em; 
-      list-style: inside circle; 
-    } 
-   
-    ul>br>li{ 
-      padding-left: 1em; 
-      list-style: inside circle; 
-    } 
-   
-    ul>ul>li{ 
-      padding-left: 2em; 
-      list-style: inside circle; 
-    } 
-   
-    ul>br>ul>br>li{ 
-      padding-left: 2em; 
-      list-style: inside circle; 
-    } 
-   
-    ol{ 
     list-style: inside decimal;
   }
 
-    ol>li>ol{ 
+  ol li.md-contents {
-      padding-left: 1em; 
+    line-height: 1.5;
+    padding: 0.2em 0;
+  }
+
+  hr {
+    border-width: 2px 0px 0px 0px;
+    border-style: dashed;
+    border-color: #ff7676;
+    height: 1px;
     }
 
   p>a>img{
@@ -193,4 +259,8 @@
     padding: 0;
   }
 
+  span.img_FTL {
+    display: none;
+  }
+
 }

app/lib/formatter_markdown.rb

@@ -88,26 +88,31 @@ class Formatter_Markdown
             %(<h#{header_level}>#{encode(mdContentsRemoved)}</h#{header_level}>\n)
         end
 
+        def block_code(code, language)
+            %(<br>#{code.strip})
+        end
+
         def codespan(code)
             urlRemoved = "#{remove_url(code)}"
             escapedCode = "#{escape_bbcode(urlRemoved)}"
-            %(<code>#{encode(escapedCode)}</code>)
+            encoded = "#{encode(escapedCode)}"
+            %(<code>#{code_contents(encoded)}</code>)
         end
 
         def list(contents, list_type)
             if list_type == :unordered
-                %(<ul>#{contents.strip}</ul>)
+                %(<ul class='md-contents'>#{contents.strip}</ul>)
             elsif list_type == :ordered
-                %(<ol>#{contents.strip}</ol>)
+                %(<ol class='md-contents'>#{contents.strip}</ol>)
             else
-                %(<#{list_type}>#{contents.strip}</#{list_type}>)
+                %(<#{list_type} class='md-contents'>#{contents.strip}</#{list_type}>)
             end
         end
 
         def list_item(text, list_type)
             urlRemoved = "#{remove_url(text)}"
             mdContentsRemoved = "#{markdown_escape(urlRemoved)}"
-            %(<li>#{encode(mdContentsRemoved)}</li>)
+            %(<li class='md-contents'>#{encode(mdContentsRemoved)}</li>)
         end
 
         def emphasis(text)
@@ -170,7 +175,7 @@ class Formatter_Markdown
             if imgcheck !~ /\Ahttps:\/\/[^<>"\[\] 　]+\z/
                 %(#{encode(alt_text)})
             else
-                %(<img src="#{URI.encode_www_form_component(link)}">)
+                %(<span class="img_FTL">画像が添付されています。</span><img src="#{URI.encode_www_form_component(link)}">)
             end
         end
 
@@ -206,7 +211,7 @@ class Formatter_Markdown
 
         #前々から要望があったcode内でBBCodeを無効化するための奴
         def escape_bbcode(string)
-            string.gsub(/\[/){ "［" }
+            string.gsub(/\[/){ "&#091;" }
         end
 
         #markdownの中でmarkdownを展開させないためのエスケープする奴
@@ -221,6 +226,27 @@ class Formatter_Markdown
             string.gsub(/<([\/]?a[^>]*|[\/]?img[^>]*|[\/]?code[^>]*|[\/]?h[1-6][^>]*|[\/]?sup[^>]*|[\/]?sub[^>]*|[\/]?small[^>]*|[\/]?ul[^>]*|[\/]?ol[^>]*|[\/]?li[^>]*|[\/]?hr[^>]*|[\/]?s[^>]*|[\/]?u[^>]*|[\/]?mark[^>]*)>/) { "" }
         end
 
+        #code内の一部を色分けするための変更
+        def code_contents(string)
+            simple = string.gsub(/(true|error|false|failed|def|puts|end|fn|let|mut|use|String|println!)/ ,
+                "true" => "<span class='positive'>#{:true}</span>",
+                "error" => "<span class='negative'>#{:error}</span>",
+                "false" => "<span class='negative'>#{:false}</span>",
+                "failed" => "<span class='negative'>#{:failed}</span>",
+                "def" => "<span class='ruby-func'>#{:def}</span>",
+                "puts" => "<span class='ruby-func'>#{:puts}</span>",
+                "end" => "<span class='ruby-func'>#{:end}</span>",
+                "fn" => "<span class='rust-fanc'>#{:fn}</span>",
+                "let" => "<span class='rust-fanc'>#{:let}</span>",
+                "mut" => "<span class='rust-fanc'>#{:mut}</span>",
+                "use" => "<span class='rust-fanc'>#{:use}</span>",
+                "String" => "<span class='rust-macro'>#{:String}</span>",
+                "println!" => "<span class='rust-macro'>#{:println!}</span>",
+            )
+            simple.gsub(/(&quot;[a-zA-Z0-9_ ,]+&quot;)/){ "<span class='contents'>#{$1}</span>" }
+#                "" => "<span class=''>#{:}</span>",
+        end
+
         #テストで書きなぐった奴
         def html_escape(string)
             string.gsub(/['&\"<>\/]/, {
@@ -280,7 +306,8 @@ class MDExtractor
             extractByHTMLTagName("br", false, true),
             extractByHTMLTagName("a"),
             extractByHTMLTagName("img", false, true),
-            extractByHTMLTagName("s")
+            extractByHTMLTagName("s"),
+            extractByHTMLTagName("span")
         ].flatten.compact
     end