include and start highlight js and add css

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;

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
+    }
+  }
+}

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'

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()
+}