Code blocks

Code blocks contain complete or snippets of programming code.

Note: To denote codein a sentence, use a Code Phrase in-line text styling.

Code blocks

This is a basic <codeblock> used to list lines of code. Note the Copy button in the upper right allows readers to copy the code listing to their clipboard.

// Your First Program
class HelloWorld {
    public static void main(String[] args) {
        System.out.println("Hello, World!"); 
    }
}

Line numbers

To add line numbers to a code listing, add linenumbers as an outputclass attribute to the <codeblock>.

// Your First Program
class HelloWorld {
    public static void main(String[] args) {
        System.out.println("Hello, World!"); 
    }
}

Code highlighting

The portal automatically highlights language elements (using color) matching the syntax of the language listed.

Note: Highlighing is performed by highlight.js using the Vs theme. See highlight.js demo for more information.

This highlighting mechanism attempts to identify the language based on clues in the text. However, you can direct the highlighter to use a specific language by adding the language identifier as an outputclass attribute to the <codeblock>.

Here are some common identifiers:


Language	Identifier
css	`language-css`
Shell or command-line	`language-bash` (bash is best; sh and shell are not)
GraphQL	`language-graphql`
HTML	`language-html` or `language-xml`
HTTP	`language-http`
Markdown	`language-markdown`
JavaScript	`language-js`
Java	`language-java`
JSON	`language-json`
Perl	`language-perl`
Plaintext	`language-text`
XML	`language-xml`
YAML	`language-yaml`

For additional languages, see the Supported Languages page in the highlight.js docs.

Following are some demonstrations of various languages

language-css

/* 
 * Preformatted
 */
 .ezd-portal_content-page_main-wrapper render-html code, 
 .ezd-portal_content-page_main-wrapper render-html .codeblock,
 .ezd-portal_content-page_main-wrapper render-html .msgblock {
    font-size: 14px;
 }
pre {
	font-family: var(--font-family-monospace);
	line-height: 1.6em;
	margin-bottom: 1.4em;
	padding: 0.5em; 
	white-space: pre-wrap; 
	word-wrap: break-word;
}
.codeblock {
    border: 1px solid var(--color-structural-line); /* No longer !Important */
    padding: 1.2em;
    border-radius: 1em;
    min-height: 4em;
}

language-sh

curl -F "emotion=true" -F "file=@test.wav" -XPOST http://server:17171/STREAM

language-html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8"/>
    <title>Href Attribute Example</title>
    <link href="https://my-style.css" rel="stylesheet" />
    <!-- This is a comment -->
  </head>
  <style>
    body {
      margin; 0;
      padding: 0;
    }
  </style>
  <body>
    <h1>Href Attribute Example</h1>
    <p class="something-special">
      <a href="https://www.medallia.com">The Medallia Web Page</a> is the company landing portal.
    </p>
  </body>
</html>

language-js

/**
 * Reset Q-fields are the beginning of a survey.
 */
(function () {
    var restaurantPlaceholders = [
        'q_htl_restaurant_1_name_selected_auto',
        'q_htl_restaurant_2_name_selected_auto',
        'q_htl_restaurant_3_name_selected_auto'
    ];
 
    for (var i = 0; i < restaurantPlaceholders.length; i++) {
        var restaurantPlaceholder = restaurantPlaceholders[i];
        fields.set(restaurantPlaceholder, null);
    }
}());

language-java

// Your First Program

class HelloWorld {
    public static void main(String[] args) {
        System.out.println("Hello, World!"); 
    }
}

language-xml

<note id="p501">
	<to>Tove</to>
	<from>Jani</from>
	<heading>Reminder</heading>
	<body>Don't forget me this weekend!</body>
</note>

Tabbed codeblocks

To create a tabbed codeblock — one where there are tabs at the top of the block to select a set of code to show:

Create a division (aka Divider) using a <div>, and assign code-bundle to the outputclass.
For each child element — elements to appear when the associated tab is selected — add an xml:lang attribute and assign the label name for the language value.

This simple example create a block with three tabs, iOS, Android, and swift:

<div outputclass="code-bundle">
   <codeblock ... xml:lang="iOS">...</codeblock>
   <codeblock ... xml:lang="Android">...</codeblock>
   <codeblock ... xml:lang="Swift">...</codeblock>
</div>

The <div> can also be a <bodydiv> or <sectiondiv>.

Following demonstrates the result:

iOS code listing

Android code listing

Swift code listing

Following is another tabbed-codeblock set using the same language tags. When you pick a language in one set, it should choose that set for all tabbed codeblocks that have that language.

Another iOS code listing

Still another Android code listing

A Python code listing

Yes another Swift code listing