Extract and Highlight org-mode tags in HTML render of search results

src/interface/web/index.html

@@ -177,6 +177,13 @@
         span.task-status.done {
             background-color: #06a77d;
         }
+        span.task-tag {
+            color: white;
+            padding: 3.5px 3.5px 0;
+            margin-right: 5px;
+            border-radius: 5px;
+            background-color: #bbb;
+        }
     </style>
 
 </html>

src/interface/web/org.js

@@ -1500,6 +1500,18 @@ var Org = (function () {
         }) + childText;
       }
 
+      // Parse task tags
+      taskTagsRegex = /:([\w:]+):/g
+      taskTagsMatch = childText.match(taskTagsRegex);
+      taskTags = taskTagsMatch && taskTagsMatch[0].split(":").slice(1,-1);
+      childText = childText.replace(taskTagsRegex, "");
+
+      if (taskTags) {
+        taskTags.forEach(tag => {
+          childText += this.inlineTag("span", tag, { "class": "task-tag" })
+        });
+      }
+
       if (sectionNumberText) {
         childText = this.inlineTag("span", sectionNumberText, {
           "class": "section-number"