Skip to main content
Skip table of contents

How to view Azure DevOps Source Code in Confluence

The how-to guide on how to add and view Azure DevOps Source Code in Confluence pages

The Azure DevOps Source File Macro provides an easy way to view Azure DevOps Source code files by embedding them in Confluences pages.

Using the Azure DevOps Source File Macro

Quick Guide

  1. Copy the Azure DevOps Files URL

  2. Paste the Azure DevOps Files URL into a Confluence page

Detailed Guide

Here’s an example of how the macro looks in Confluence

image-20241219-004650.png

Source File URL

To add a Source File macro to Confluence, you require the Source File URL from Azure DevOps

Go to your Files section listed under Repos in Azure DevOps and select the File you wish to display in Confluence, then copy the URL from the browser.

image-20241219-002820.png

The URL should be in the following format: <BASE-URL>/ORG/<PROJECT>/_git/<REPOSITORY>/<FILE>

How to add the Source File Macro

The easiest way to add a Source File Macro to a Confluence page, is to simply paste the Azure DevOps Source File URL into a Confluence page and the macro should populate automatically.

Alternatively, you can add the macro by typing / followed by the Macro name (e.g. /Source) and pressing enter once the macro populates as shown.

image-20241219-010837.png

This can also be achieved by typing the name into the ‘insert elements’ drop down and selecting the macro.

image-20241219-010949.png

Configuring the Source File Macro

image-20241219-013900.png

Url

This is the Azure DevOps Source File URL

Wrap long lines

Checking this box, allows long lines in the file to wrap, ensuring on the information is visible on the page.

Show line numbers

This will remove the line numbers in the column to the left of the Source File information.

Below is a sample without line wrapping or numbers.

image-20241219-014154.png

Code block language

This refers to the programing language for the code of the Source File.

This should format to the language of the code block by default, showing appropriate formatting, however this can be overwritten if necessary by providing a different programming language. This will change the formatting and appearance (but not the code itself).

Display Options

It is possible to use the Show/Hide buttons to minimize and expand Source File macros, allowing users to focus on specific Source File information and reduce clutter.

The Show/Hide functionality remains present on published Confluence pages.

image-20241219-015341.png

Demo

You can find a demo of the Source File macro from YouTube below:

https://youtu.be/Z4xqewRiRsU?feature=shared

Updated:

JavaScript errors detected

Please note, these errors can depend on your browser setup.

If this problem persists, please contact our support.