Get Started

Accessing Advanced Codeblocks

To get started - add a Advanced Codeblocks Macro to your Confluence Page:

1. Go to your Confluence Page and click edit.

2. Select in the toolbar insert

3. Now you can search for Advanced Codeblocks and should see three macros.

4. Choose now between Advanced Codeblocks Multi, Advanced Codeblocks Multi Remote or Advanced Codeblocks Single and select it by clicking.

Create your first codeblocks with the Multi Macro

To create your first codeblocks, follow the steps above and:

1. Choose the Advanced Codeblocks Multi Macro.

2. Click on the edit button below the inserted macro so you can adjust the parameters.

Now you will see the configuration on the right side of the screen. The codebox code and config is still empty so we're going to feed it with some content.

1. For the beginning we assign our codebox the Title Webserver Config and enable Show Download Links.

2. Copy the following code and paste it into the Config text area:

   Config

   [testsystem 1]
   server.domain = www.myserver1.com
   document.root = /www/server1
   [testsystem 2]
   server.domain = www.myserver2.com
   document.root = /www/server2

3. Copy the following code and paste it into the Code text area:

   Code

   Listen 80
   <VirtualHost *:80>
      ServerName ${server.domain}
      DocumentRoot "${document.root}"
   </VirtualHost>

4. Click on Update to save the page.

5. The output will be a codebox with two codeblocks testsystem 1 and testsystem 2.

Once you have saved you should see the rendered macro on the page like so.

Create a single codeblock with the Single Macro

To create your first single codeblock, follow the steps above and:

1. Choose the Advanced Codeblocks Single.

2. Click on the edit button below the inserted macro so you can adjust the parameters.

3. For the beginning we assign our codebox the Title Single Code Snippet Demo and enable Show Download Links.

4. Also do we select the Theme called dark-spring.

5. Lastly we paste the following in the Code textarea.
   

   Single Code Snippet Demo

   import React from 'react'
   
   const MyComp = () => <div>foo</div>

6. Click on Update to save the page.

Once you have saved you should see the rendered macro on the page like so.

Celebrate!

Congratulations. You have created your first codebox with two codeblocks and variable replacements (Multi) and a codebox with a single code snippet (Single) and can now explore the user interface.