Codeblock highlighting

webapp/titanembeds/static/css/embedstyle.css

@@ -431,7 +431,7 @@ p.mentioned span.chatmessage {
 }
 
 .chatmessage code {
-  background-color: gray;
+  background-color: rgba(0, 0, 0, 0.1);
   color: lightgray;
   border-radius: 5px;
   padding: 2px;

webapp/titanembeds/static/js/embed.js

@@ -12,6 +12,8 @@
 /* global twemoji */
 /* global jQuery */
 /* global grecaptcha */
+/* global hljs */
+/* global linkify */
 
 (function () {
     const theme_options = ["DiscordDark", "BetterTitan"]; // All the avaliable theming names
@@ -211,6 +213,9 @@
             changeTheme(null, keep_custom_css);
         });
         
+        hljs.configure({useBR: true});
+        linkify.options.defaults.ignoreTags = ["code"];
+        
         var themeparam = getParameterByName('theme');
         var localstore_theme = localStorage.getItem("theme");
         if ((themeparam && $.inArray(themeparam, theme_options) != -1) || (localstore_theme)) {
@@ -782,6 +787,29 @@
         return text;
     }
     
+    function render_code_highlighting(element) {
+        element.each(function(i, block) {
+            var elem = $(block);
+            var codetext = elem.text();
+            var splitted = codetext.split("\n");
+            if (splitted.length > 1) {
+                var firstLine = splitted[0];
+                if (!(/^\s/.test(firstLine))) { // make sure no whitespace at begining
+                    var firstLineSplitted = firstLine.split(/[ ]+/); // split at whitespace
+                    if (firstLineSplitted.length == 1 && firstLineSplitted[0] != "") { // only one token and the token is not empty
+                        var language = firstLineSplitted[0]; // assume token is lang
+                        if (hljs.getLanguage(language)) {
+                            splitted.splice(0, 1); // delete first line
+                            var restOfCode = splitted.join("\n");
+                            var highlighted = hljs.highlight(language, restOfCode, true);
+                            element.html(highlighted.value);
+                        }
+                    }
+                }
+            }
+        });
+    }
+
     function fill_discord_messages(messages, jumpscroll, replace=null) {
         if (messages.length == 0) {
             return last_message_id;
@@ -810,9 +838,11 @@
                 $("#chatcontent").append(rendered);
                 handle_last_message_mention();
                 $("#chatcontent p:last-child").find(".blockcode").find("br").remove(); // Remove excessive breaks in codeblocks
+                render_code_highlighting($("#chatcontent p:last-child").find(".blockcode"));
             } else {
                 replace.html($(rendered).html());
                 replace.find(".blockcode").find("br").remove();
+                render_code_highlighting(replace.find(".blockcode"));
             }
             var usrcachekey = username + "#" + message.author.discriminator;
             if (usrcachekey.startsWith("(Titan Dev) ")) {

webapp/titanembeds/templates/embed.html.j2

@@ -5,6 +5,7 @@
     <link href="//fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
     <!--Import materialize.css-->
     <link type="text/css" rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/materialize/0.98.1/css/materialize.min.css" integrity="sha256-6DQKO56c9MZL0LAc7QNtxqJyqSa3rS9Gq5FVcIhtA+w=" crossorigin="anonymous" media="screen,projection"/>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/solarized-dark.min.css" integrity="sha256-90Y+fvi28WF+3jKH4tHEkoQ9WLeFKJjpvCPNOtU9ZvU=" crossorigin="anonymous" />
     <link type="text/css" rel="stylesheet" href="{{ url_for('static', filename='css/embedstyle.css') }}">
     <link id="css-theme" type="text/css" rel="stylesheet" href="">
 
@@ -201,6 +202,8 @@
     <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.0.3/socket.io.js" integrity="sha256-sdmLD9jD1PIzq3KOQPNSGZYxjv76rds79Mnyk5JNp1M=" crossorigin="anonymous"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/twemoji/2.5.0/2/twemoji.min.js" integrity="sha256-t5bxASdQ5tDbKQZy330h/YufCiZg82xG8PqIYzFpwhU=" crossorigin="anonymous"></script>
     
+    <script src="{{ url_for("static", filename="js/vendor/highlight.pack.js") }}"></script>
+
     {% raw %}
     <script id="mustache_channellistings" type="text/template">
       <li><a class="waves-effect truncate" id="channel-{{channelid}}"><span class="channel-hash">#</span> {{channelname}}</a></li>