diff --git a/pressa/Gemfile.lock b/pressa/Gemfile.lock
index 88338b9..5631ad3 100644
--- a/pressa/Gemfile.lock
+++ b/pressa/Gemfile.lock
@@ -69,7 +69,6 @@ GEM
       guard (~> 2.1)
       guard-compat (~> 1.1)
       rspec (>= 2.99.0, < 4.0)
-    htmlbeautifier (1.4.3)
     ice_nine (0.11.2)
     io-console (0.8.1)
     json (2.16.0)
@@ -204,7 +203,6 @@ DEPENDENCIES
   dry-struct (~> 1.8)
   guard (~> 2.18)
   guard-rspec (~> 4.7)
-  htmlbeautifier (~> 1.4)
   kramdown (~> 2.5)
   kramdown-parser-gfm (~> 1.1)
   nokogiri (~> 1.18)
diff --git a/pressa/SYNTAX_HIGHLIGHTING.md b/pressa/SYNTAX_HIGHLIGHTING.md
index d505591..c0bf41c 100644
--- a/pressa/SYNTAX_HIGHLIGHTING.md
+++ b/pressa/SYNTAX_HIGHLIGHTING.md
@@ -114,7 +114,7 @@ Kramdown::Document.new(
   syntax_highlighter: 'rouge',
   syntax_highlighter_opts: {
     line_numbers: false,  # Change to true if you want line numbers
-    wrap: false           # Change to true for <div> wrapping
+    wrap: true            # Leave true so Rouge emits <pre><code> blocks
   }
 ).to_html
 ```
diff --git a/pressa/lib/posts/repo.rb b/pressa/lib/posts/repo.rb
index 4ecf543..5463fb5 100644
--- a/pressa/lib/posts/repo.rb
+++ b/pressa/lib/posts/repo.rb
@@ -62,7 +62,7 @@ module Pressa
           syntax_highlighter: 'rouge',
           syntax_highlighter_opts: {
             line_numbers: false,
-            wrap: false
+            wrap: true
           }
         ).to_html
       end
diff --git a/pressa/lib/pressa.rb b/pressa/lib/pressa.rb
index c1fcdd8..34dd8fd 100644
--- a/pressa/lib/pressa.rb
+++ b/pressa/lib/pressa.rb
@@ -53,6 +53,7 @@ module Pressa
       styles: [
         Stylesheet.new(href: 'css/normalize.css'),
         Stylesheet.new(href: 'css/style.css'),
+        Stylesheet.new(href: 'css/syntax.css'),
         Stylesheet.new(href: 'css/fontawesome.min.css'),
         Stylesheet.new(href: 'css/brands.min.css'),
         Stylesheet.new(href: 'css/solid.min.css')
diff --git a/pressa/lib/utils/html_formatter.rb b/pressa/lib/utils/html_formatter.rb
index af03d73..85ee60b 100644
--- a/pressa/lib/utils/html_formatter.rb
+++ b/pressa/lib/utils/html_formatter.rb
@@ -9,7 +9,8 @@ module Pressa
       PLACEHOLDER_PREFIX = '%%PRESSA_PRESERVE_'
       PRESERVE_PATTERNS = [
         /<div class="typocode">.*?<\/div>/m,
-        /<div class="pressa">.*?<\/div>/m
+        /<div class="pressa">.*?<\/div>/m,
+        /<div class="language-[^"]*?highlighter-rouge">.*?<\/div>\s*<\/div>/m
       ].freeze
 
       def self.format(html)
diff --git a/pressa/lib/utils/markdown_renderer.rb b/pressa/lib/utils/markdown_renderer.rb
index 6897a56..6f859a1 100644
--- a/pressa/lib/utils/markdown_renderer.rb
+++ b/pressa/lib/utils/markdown_renderer.rb
@@ -78,7 +78,7 @@ module Pressa
           syntax_highlighter: 'rouge',
           syntax_highlighter_opts: {
             line_numbers: false,
-            wrap: false
+            wrap: true
           }
         ).to_html
       end
diff --git a/public/css/syntax.css b/public/css/syntax.css
new file mode 100644
index 0000000..52d0cd8
--- /dev/null
+++ b/public/css/syntax.css
@@ -0,0 +1,116 @@
+.highlight table td { padding: 5px; }
+.highlight table pre { margin: 0; }
+.highlight, .highlight .w {
+  color: #c9d1d9;
+  background-color: #161b22;
+}
+.highlight .k, .highlight .kd, .highlight .kn, .highlight .kp, .highlight .kr, .highlight .kt, .highlight .kv {
+  color: #ff7b72;
+}
+.highlight .gr {
+  color: #f0f6fc;
+}
+.highlight .gd {
+  color: #ffdcd7;
+  background-color: #67060c;
+}
+.highlight .nb {
+  color: #ffa657;
+}
+.highlight .nc {
+  color: #ffa657;
+}
+.highlight .no {
+  color: #ffa657;
+}
+.highlight .nn {
+  color: #ffa657;
+}
+.highlight .sr {
+  color: #7ee787;
+}
+.highlight .na {
+  color: #7ee787;
+}
+.highlight .nt {
+  color: #7ee787;
+}
+.highlight .gi {
+  color: #aff5b4;
+  background-color: #033a16;
+}
+.highlight .ges {
+  font-weight: bold;
+  font-style: italic;
+}
+.highlight .kc {
+  color: #79c0ff;
+}
+.highlight .l, .highlight .ld, .highlight .m, .highlight .mb, .highlight .mf, .highlight .mh, .highlight .mi, .highlight .il, .highlight .mo, .highlight .mx {
+  color: #79c0ff;
+}
+.highlight .sb {
+  color: #79c0ff;
+}
+.highlight .bp {
+  color: #79c0ff;
+}
+.highlight .ne {
+  color: #79c0ff;
+}
+.highlight .nl {
+  color: #79c0ff;
+}
+.highlight .py {
+  color: #79c0ff;
+}
+.highlight .nv, .highlight .vc, .highlight .vg, .highlight .vi, .highlight .vm {
+  color: #79c0ff;
+}
+.highlight .o, .highlight .ow {
+  color: #79c0ff;
+}
+.highlight .gh {
+  color: #1f6feb;
+  font-weight: bold;
+}
+.highlight .gu {
+  color: #1f6feb;
+  font-weight: bold;
+}
+.highlight .s, .highlight .sa, .highlight .sc, .highlight .dl, .highlight .sd, .highlight .s2, .highlight .se, .highlight .sh, .highlight .sx, .highlight .s1, .highlight .ss {
+  color: #a5d6ff;
+}
+.highlight .nd {
+  color: #d2a8ff;
+}
+.highlight .nf, .highlight .fm {
+  color: #d2a8ff;
+}
+.highlight .err {
+  color: #f0f6fc;
+  background-color: #8e1519;
+}
+.highlight .c, .highlight .ch, .highlight .cd, .highlight .cm, .highlight .cp, .highlight .cpf, .highlight .c1, .highlight .cs {
+  color: #8b949e;
+}
+.highlight .gl {
+  color: #8b949e;
+}
+.highlight .gt {
+  color: #8b949e;
+}
+.highlight .ni {
+  color: #c9d1d9;
+}
+.highlight .si {
+  color: #c9d1d9;
+}
+.highlight .ge {
+  color: #c9d1d9;
+  font-style: italic;
+}
+.highlight .gs {
+  color: #c9d1d9;
+  font-weight: bold;
+}