Fix markdown code block render (#39)

blackstorm · Feb 1, 2023 · bfe9870 · bfe9870
1 parent b40419c
commit bfe9870
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 7 deletions.
diff --git a/Gemfile b/Gemfile
@@ -71,7 +71,7 @@ group :test do
   gem "webdrivers"
 end
 
-gem 'kramdown', '~> 2.4'
+gem 'redcarpet', '~> 3.6'
 gem 'fileutils', '~> 1.7'
 gem 'carrierwave', '>= 3.0.0.beta', '< 4.0'
 gem 'kaminari', '~> 1.2', '>= 1.2.2'
diff --git a/Gemfile.lock b/Gemfile.lock
@@ -122,8 +122,6 @@ GEM
       activerecord
       kaminari-core (= 1.2.2)
     kaminari-core (1.2.2)
-    kramdown (2.4.0)
-      rexml
     loofah (2.19.1)
       crass (~> 1.0.2)
       nokogiri (>= 1.5.9)
@@ -187,6 +185,7 @@ GEM
       thor (~> 1.0)
       zeitwerk (~> 2.5)
     rake (13.0.6)
+    redcarpet (3.6.0)
     regexp_parser (2.6.1)
     rexml (3.2.5)
     ruby-vips (2.1.4)
@@ -248,9 +247,9 @@ DEPENDENCIES
   jbuilder
   jsbundling-rails
   kaminari (~> 1.2, >= 1.2.2)
-  kramdown (~> 2.4)
   puma (~> 5.0)
   rails (~> 7.0.4)
+  redcarpet (~> 3.6)
   selenium-webdriver
   sprockets-rails
   sqlite3 (~> 1.6)

diff --git a/app/models/article.rb b/app/models/article.rb
@@ -1,4 +1,4 @@
-require 'kramdown'
+require "redcarpet"
 
 class Article < ApplicationRecord
   paginates_per 10
@@ -13,8 +13,15 @@ def is_draft?
     self.status == "draft"
   end
 
+  RENDERDER = Redcarpet::Markdown.new(Redcarpet::Render::HTML, {
+    no_styles: true,
+    autolink: true,
+    tables: true,
+    fenced_code_blocks: true
+  })
+
   def content_to_html
-    Kramdown::Document.new(self.content).to_html
+    RENDERDER.render(self.content)
   end
 
   def created_at_datetime_local_field

diff --git a/app/views/layouts/blog.html.erb b/app/views/layouts/blog.html.erb
@@ -18,10 +18,20 @@
         max-width: 100%;
     }
     code {
-        padding: .5rem;
+        padding: .2rem;
         background-color: #CCCCCC;
         border-radius: 2px;
     }
+    pre {
+      padding: .5rem;
+      background-color: #CCCCCC;
+      border-radius: 2px;
+    }
+    pre code {
+      padding: 0;
+      background-color: none;
+      border-radius: 0;
+    }
   </style>
 </head>