diff --git a/apps/block_scout_web/assets/css/app.scss b/apps/block_scout_web/assets/css/app.scss
index 3c722e8ec9..125c00877d 100644
--- a/apps/block_scout_web/assets/css/app.scss
+++ b/apps/block_scout_web/assets/css/app.scss
@@ -47,6 +47,9 @@ $fa-font-path: "~@fortawesome/fontawesome-free/webfonts";
 @import "node_modules/bootstrap/scss/badge";
 @import "node_modules/bootstrap/scss/alert";
 
+// Code highlight
+@import "node_modules/highlight.js/styles/default";
+
 //Custom theme
 @import "theme/fonts";
 
@@ -82,6 +85,7 @@ $fa-font-path: "~@fortawesome/fontawesome-free/webfonts";
 @import "components/dropdown";
 @import "components/loading-spinner";
 @import "components/transaction-input";
+@import "components/highlight";
 
 :export {
   primary: $primary;
diff --git a/apps/block_scout_web/assets/css/components/_highlight.scss b/apps/block_scout_web/assets/css/components/_highlight.scss
new file mode 100644
index 0000000000..c504be04f2
--- /dev/null
+++ b/apps/block_scout_web/assets/css/components/_highlight.scss
@@ -0,0 +1,19 @@
+//replace the default background color from highlightjs
+.hljs {
+  background: $gray-100;
+}
+
+.line-numbers {
+
+  [data-line-number] {
+
+    &:before {
+      content: attr(data-line-number);
+      display: inline-block;
+      border-right: 1px solid $gray-400;
+      padding: 0 .5em;
+      margin-right: .5em;
+      color: $gray-600
+    }
+  }
+}
diff --git a/apps/block_scout_web/assets/js/app.js b/apps/block_scout_web/assets/js/app.js
index 8ff4aa19f9..8f084b5521 100644
--- a/apps/block_scout_web/assets/js/app.js
+++ b/apps/block_scout_web/assets/js/app.js
@@ -38,6 +38,7 @@ import './lib/market_history_chart'
 import './lib/pending_transactions_toggle'
 import './lib/pretty_json'
 import './lib/reload_button'
+import './lib/smart_contract/code_highlighting'
 import './lib/smart_contract/read_only_functions'
 import './lib/smart_contract/wei_ether_converter'
 import './lib/stop_propagation'
diff --git a/apps/block_scout_web/assets/js/lib/smart_contract/code_highlighting.js b/apps/block_scout_web/assets/js/lib/smart_contract/code_highlighting.js
new file mode 100644
index 0000000000..95320a12a6
--- /dev/null
+++ b/apps/block_scout_web/assets/js/lib/smart_contract/code_highlighting.js
@@ -0,0 +1,9 @@
+import $ from 'jquery'
+import hljs from 'highlight.js'
+import hljsDefineSolidity from 'highlightjs-solidity'
+
+// only activate highlighting on pages with this selector
+if ($('[data-activate-highlight]').length > 0) {
+  hljsDefineSolidity(hljs)
+  hljs.initHighlightingOnLoad()
+}