Add syntax highlighting to code tags

app/javascript/flavours/glitch/components/status_content.jsx

@@ -8,6 +8,8 @@ import classnames from 'classnames';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import { connect } from 'react-redux';
 
+import highlightjs from 'highlight.js';
+
 import { Icon } from 'flavours/glitch/components/icon';
 import { autoPlayGif, languages as preloadedLanguages } from 'flavours/glitch/initial_state';
 import { decode as decodeIDNA } from 'flavours/glitch/utils/idna';
@@ -311,6 +313,56 @@ class StatusContent extends PureComponent {
     this.contentsNode = c;
   };
 
+  /**
+   * Highlights code in code tags.\
+   * Uses highlight.js to convert content inside code tags to span elements with class attributes
+   * @param {String} content - String containing html code tags
+   * @returns content with highlighted code inside code tags, or content if not found
+   */
+  highlightCode (content) {
+    // highlightJS complains when unescaped html is given
+    highlightjs.configure({ ignoreUnescapedHTML: true });
+
+    // Create a new temporary element to work on
+    const wrapper = document.createElement('div');
+    wrapper.innerHTML = content;
+
+    // Get code elements and run highlightJS on each.
+    wrapper.querySelectorAll('code')
+      .forEach((code) => {
+        // Get language from data attribute containing code language of code element
+        let lang = highlightjs.getLanguage(code.dataset.codelang);
+
+        // Check if lang is a valid language
+        if (lang !== undefined) {
+          // Set codelang as class attribute, since highlightElement cannot be given a language
+          // highlightJS will read this attribute and use it to highlight in the proper language
+          code.setAttribute('class', code.dataset.codelang);
+
+          // Set title attribute to language name, i.e. "js" will become "Javascript"
+          code.setAttribute('title', lang.name);
+
+          // Replace <br> as highlightJS removes them, messing up formatting
+          let brTags = Array.from(code.getElementsByTagName('br'));
+          for (let br of brTags) {
+            br.replaceWith('\n');
+          }
+
+          // Highlight the code element
+          highlightjs.highlightElement(code);
+
+          // highlightJS adds own class attribute, remove it again to not mess up styling
+          code.removeAttribute('class');
+        } else {
+          // Remove data attribute as it's not a valid language.
+          delete code.dataset.codelang;
+        }
+      });
+
+    // return content with highlighted code
+    return wrapper.innerHTML;
+  }
+
   render () {
     const {
       status,
@@ -329,7 +381,7 @@ class StatusContent extends PureComponent {
     const targetLanguages = this.props.languages?.get(status.get('language') || 'und');
     const renderTranslate = this.props.onTranslate && this.context.identity.signedIn && ['public', 'unlisted'].includes(status.get('visibility')) && status.get('search_index').trim().length > 0 && targetLanguages?.includes(contentLocale);
 
-    const content = { __html: status.getIn(['translation', 'contentHtml']) || status.get('contentHtml') };
+    const content = { __html: status.getIn(['translation', 'contentHtml']) || this.highlightCode(status.get('contentHtml')) };
     const spoilerContent = { __html: status.getIn(['translation', 'spoilerHtml']) || status.get('spoilerHtml') };
     const language = status.getIn(['translation', 'language']) || status.get('language');
     const classNames = classnames('status__content', {

app/javascript/flavours/glitch/styles/index.scss

@@ -22,3 +22,4 @@
 @import 'rtl';
 @import 'dashboard';
 @import 'rich_text';
+@import 'node_modules/highlight.js/scss/github-dark';

app/javascript/flavours/glitch/styles/mastodon-light.scss

@@ -1,3 +1,4 @@
 @import 'mastodon-light/variables';
 @import 'index';
 @import 'mastodon-light/diff';
+@import 'node_modules/highlight.js/scss/github';

app/lib/advanced_text_formatter.rb

@@ -7,9 +7,10 @@ def initialize(options, &block)
       @format_link = block
     end
 
-    def block_code(code, _language)
+    def block_code(code, language)
+      # Looks wrong, but sets title to language correctly. One downside is, it adds an empty attribute when no lang specified.
       <<~HTML
-        <pre><code>#{ERB::Util.h(code).gsub("\n", '<br/>')}</code></pre>
+        <pre><code data-codelang="#{language}">#{ERB::Util.h(code).gsub("\n", '<br/>')}</code></pre>
       HTML
     end
 
@@ -91,7 +92,6 @@ def rewrite
         text_node.replace(replacement)
       end
     end
-
     Sanitize.node!(@tree, Sanitize::Config::MASTODON_OUTGOING).to_html
   end