diff --git a/README.md b/README.md index 329a837..cf877c5 100644 --- a/README.md +++ b/README.md @@ -10,7 +10,8 @@ Mermaid language support to - Github Markdown. + Github Markdown + and also Azure DevOps.

@@ -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 diff --git a/manifest.json b/manifest.json index fa5e1cf..c81f47a 100755 --- a/manifest.json +++ b/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" diff --git a/src/scripts/contentscript.js b/src/scripts/contentscript.js index 080406c..bb48320 100644 --- a/src/scripts/contentscript.js +++ b/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} 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