Skip to main content

Code Blocks in Your Content

One of the most common needs when documenting software is to write code blocks. The main element for this is programlisting.

To add a programlisting element:

  1. Position the cursor at the start of the line where you want to add the code block.

  2. Press Alt + Enter ⏎ (Windows) or Command ⌘ + Enter ⏎ (Mac) to display the Element Context Menu.

    Element context menu shows a search field and a list of elements that are valid at the current position.

  3. Search for the programlisting element and select it.

    programlisting-element-added.jpg

    When you add a programlisting element, a code snippet box appears in the topic.

    code-snippet-box-added.jpg

  4. Add your code inside the code snippet box.

    programlisting-show.jpg

The programlisting element is sometimes referred to as "verbatim", as the code you add inside the element will be rendered exactly how it appears in the editor. For example, it will keep spaces and line breaks to represent the code properly. Some other elements also work like this, such as screen and literallayout.

Example 1. Programlisting sample

Here, a javascript function has been added inside a programlisting element. This is how the code looks in the output.

function myFunction() { 1
    var x = "", i;
    for (i=0; i<5; i++) {
        x = x + "The number is " + i + "<br>";
    }
    document.getElementById("demo").innerHTML = x; 2
}

1

This is a javascript function

2

This sets a value to an element using the DOM model.

In the sample shown , a code block is added inside the programlisting element. The javascript function contains (1) on the first line and (2) on the last line. These are callouts, which you can use to Annotate Code Blocks.