Enable syntax highlighting

app/assets/stylesheets/application.scss

@@ -190,3 +190,13 @@ img {
 .widget.is-tertiary .widget--body + .widget--header {
   border-top: 1px solid #9daeb7;
 }
+
+pre {
+  background: #f0f0f0;
+  border: 0;
+}
+
+pre .hljs {
+  padding: 0;
+  background: inherit;
+}
\ No newline at end of file

app/views/layouts/_head.html.erb

@@ -27,6 +27,13 @@
 <%= javascript_include_tag 'application' %>
 <script src="https://unpkg.com/@codidact/co-design@0.12.0/js/co-design.js" defer></script>
 
+<% if SiteSetting['SyntaxHighlightingEnabled'] %>
+  <link rel="stylesheet"
+        href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.1.2/styles/default.min.css">
+  <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.1.2/highlight.min.js"></script>
+  <script defer>hljs.initHighlightingOnLoad();</script>
+<% end %>
+
 <% if SiteSetting['MathJaxEnabled'] %>
   <script>
     MathJax = {

db/seeds/site_settings.yml

@@ -284,6 +284,14 @@
     Enable MathJax on this site for math display. This will incur a small penalty in page loading times, so consider
     whether you really need it.
 
+- name: SyntaxHighlightingEnabled
+  value: false
+  value_type: boolean
+  category: Display
+  description: >
+    Enable highlight.js syntax highlighting on this site. This incurs a small penalty in page loading times, so consider
+    whether you really need it.
+
 - name: ScoringVariable
   value: 2
   value_type: integer