How to Add Syntax Highlights for Codeblocks in the Output

To provide syntax highlighting in the codeblocks that appear in the output, add the @outputclass attribute on the <codeblock> element and set its value to one of the predefined language values. The Content Completion Assistant offers a list of the possible values when adding the @outputclass attribute in Text mode but there are also two simple ways to set the value in Author mode:

• Select the <codeblock> element in the editor and in the Attributes view, click on the Value cell for the @outputclass attribute and select one of the predefined values (for example, language-xml).
• Select the <codeblock> element in the editor and use the Alt + Enter keyboard shortcut to open the in-place attributes editor window. Then select one of the predefined values from the Value drop-down menu.

The predefined values that can be selected are:

• language-json
• language-yaml
• language-xml
• language-bourne
• language-c
• language-cmd
• language-cpp
• language-csharp
• language-css
• language-dtd
• language-ini
• language-java
• language-javascript
• language-lua
• language-perl
• language-powershell
• language-php
• language-python
• language-ruby
• language-sql
• language-xquery

The following codeblock with the @outputclass set as language-css:

<codeblock outputclass="language-css" id="codeblock_1">@page preface-page {
	background-color:silver;
	@top-center{
		content: "Custom Preface Header";
	}
}
*[class ~= "topic/topic"][@topicrefclass ~= "bookmap/preface"] {
	page: preface-page;
}</codeblock>

@page preface-page {
	background-color:silver;
	@top-center{
		content: "Custom Preface Header";
	}
}
*[class ~= "topic/topic"][@topicrefclass ~= "bookmap/preface"] {
	page: preface-page;
}