Add support for Azure DevOps wikis

README.md

@@ -10,7 +10,8 @@
       <a href="https://mermaidjs.github.io" target="_blank">Mermaid</a>
       language support to
       <img src="https://github.githubassets.com/favicon.ico" width="16" height="16"/>
-      <a href="https://guides.github.com/features/mastering-markdown/" target="_blank">Github Markdown</a>.
+      <a href="https://guides.github.com/features/mastering-markdown/" target="_blank">Github Markdown</a>
+      and also <a href="https://docs.microsoft.com/en-us/azure/devops/project/wiki/markdown-guidance?view=azure-devops" target="_blank">Azure DevOps</a>.
     </strong>
   </p>
 </div>
@@ -59,6 +60,10 @@
 - [x] Markdown (`.md`) files (diff + published)
 - [x] Gists - [Demo](https://gist.github.com/amercier/df2e07a994315d323e398120bdda3989)
 
+### Supported Azure DevOps features
+
+- [x] Wikis with code blocks
+
 ### Diagram types
 
 #### Flowcharts

manifest.json

@@ -2,7 +2,7 @@
   "name": "GitHub + Mermaid",
   "version": "0.1.1",
   "manifest_version": 2,
-  "description": "A browser extension for Chrome, Opera & Firefox that adds Mermaid language support to GitHub.",
+  "description": "A browser extension for Chrome, Opera & Firefox that adds Mermaid language support to GitHub and Azure DevOps.",
   "icons": {
     "16": "icons/icon-16.png",
     "128": "icons/icon-128.png"
@@ -15,7 +15,8 @@
   },
   "permissions": [
     "https://github.com/*",
-    "https://*.github.com/*"
+    "https://*.github.com/*",
+    "https://dev.azure.com/*"
   ],
   "options_ui": {
     "page": "options.html"
@@ -24,7 +25,8 @@
     {
       "matches": [
         "https://github.com/*",
-        "https://*.github.com/*"
+        "https://*.github.com/*",
+        "https://dev.azure.com/*"
       ],
       "js": [
         "scripts/contentscript.js"

src/scripts/contentscript.js

@@ -108,7 +108,7 @@ function processElement(source, id) {
 }
 
 /**
- * Process all `pre[lang="mermaid"]` elements that don't have
+ * Process all `pre[lang="mermaid"]` or `pre[class="hljs"]` elements that don't have
  * `[data-processed="true"]`.
  * @param {Iterator<string>} idIterator Id iterator
  */
@@ -118,6 +118,14 @@ function processUnprocessedElements(idIterator) {
     source.setAttribute('data-processed', 'true')
     const target = processElement(source, idIterator.next().value)
   })
+
+  // Azure DevOps Wikis don't provide the language for mermaid, but do provide language
+  // for other known languages such as cpp. We can select code blocks without a language defined
+  const selectorAzure = 'pre[class="hljs"]>code:not([class]):not([data-processed])';
+  [...document.querySelectorAll(selectorAzure)].forEach(source => {
+    source.setAttribute('data-processed', 'true')
+    const target = processElement(source, idIterator.next().value)
+  })
 }
 
 // Mermaid setup