Code Painter for Confluence v1.1.0

About Code Painter

The Code Painter displays readable and beautiful source code snippets.

From the visual perspective, The app provides syntax highlighting - In other words , It displays different parts of the source code snippet in different colors and fonts according to their category (e.g. Comment, Number , String). The author can add an optional header. The header can display title, Copy button and Expand button. The Copy button allows the reader to easily copy the entire code snippet to the clipboard. The Expand button allows the reader to collapse the code snippet

From the user experience perspective, the syntax highlighting improve the readability of the code, especially for large code snippets. The reader can easily ignore large sections, depending on what they are looking for. The descriptive title add more context to the code snippet while the Expand button allows the reader to collapse irrelevant snippets and to focus only on the snippets that are important to him

Code Box macro

The Code Box macro can display and highlight Embedded/External source code snippet:

  • The Embedded source code snippet is the content of the macro body
  • The External source code snippet is the snippet at Source Location parameter

If Source Location is provided ( not empty ), the External source code snippet will be displayed. otherwise , the Embedded source code snippet will be fetched and displayed.

Body

The content of the macro body is the Embedded source code snippet. By default, this Embedded snippet will be displayed and highlighted.

However, this snippet will be ignored if the External source code snippet is provided (In other words, the Source Location parameter is not empty). In this case , The External snippet will be fetched, displayed and highlighted.

Parameters

NameDescription
Source Location

URL to the External source code snippet

If provided (not empty), The External source code snippet will be fetched, displayed and highlighted, while Embedded source code snippet will be ignored

Title

The title of the code snippet.

The title will be displayed in code box header if Display Title is on.

Language Highlight the source code according to this language syntax.
Supported languages :
CLike
C
C++
C#
CSS
Java
Java Script
HTML
Python
XML
Style The style of the code box (colors, font and background) :
Classic
Sunrise
Coy
Show Title Whether to display Title in code box header.
Show Copy Button Whether to display the copy button.
When copy button is clicked, the entire code snippet is copied to the system clipboard.
Expand Button

Whether to display the expand button.

If this button displayed, the reader can expand or collapse the code snippet.


If the code snippet is expanded - click on the button will collapse the code

If the code snippet is collapsed - click on the button will expand the code

The following values are supported:

Show - Initially Expanded
Display the expand button in the code box header. The code snippet will be initially expanded.
Show - Initially Collapsed
Display the expand button in the code box header. The code snippet will be initially collapsed.
Hide - Always Expanded
Do not display the expand button. The code snippet will be always shown.
Line Numbers Button

Whether to display the Line Numbers Button and the Line Numbers gutter

The following values are supported:

Show - Initially Show Line Numbers
Show the Line Numbers Button in the code snippet header. The line numbers gutter will be initially shown.
Show - Initially Hide Line Numbers
Show the Line Numbers Button in the code snippet header. The line numbers gutter will be initially hidden.
Hide - Always Show Line Numbers
Do not display the Line Numbers Button in the code snippet header. Always display line numbers gutter.
Hide - Always Hide Line Numbers
Do not display the Line Numbers Button in the code snippet header. Never display the line numbers gutter.
Width

The width of code box. The following formats are supported:

Format Description
400px The size will be 400 pixels
60% The size will be 60% of available space
40%;200px;500px The size will be 40% of available space. However, it will be at least 200 pixels and at most 500 pixels
Height The height of code box. The format is the same as width

Using the Code Box macro

  1. Click Edit at the top of this page. Now you're in the editor.
  2. Open the macro browser :
    • Click on 'Insert more content' toolbar icon. In the opened menu click 'Other macro':
    • Or press Ctrl+Shift+A
  3. In the macro browser, select formatting category.
  4. Select the Code Box macro. The following screen should appear :
  5. Fill the parameters as desired:
    Fill the Source Location ,if you want to fetch the source code from external location.
    Select the Language syntax used to highlight the code
    Select the Style of the code snippet
    Decide what to display in code snippet header :
    • If you want to display the title - set Display Title to on.
    • If you want to allow the reader to copy the entire code snippet - set Display Copy Button to on.
    • If you want to allow the reader to expand/collapse the code snippet - set Display Expand Button to Show. In this case, you can also select whether the code snippet will be initially expanded or collapsed

    Fill the width and height of the code box or leave empty for the default values.
  6. If you want to display the embedded code snippet, Fill the macro body you code