Codeblock, Codeph

Style code block elements and code phrase elements.

Overview

Resource location:@import url("https://jorsek.github.io/pdfgen.github.io/styles1.1/modules/dita/codeblock_codeph.css");
Figure 1. Codeblock element
codeblock overview
Figure 2. Code phrase element (inline)
code phrase inline
Figure 3. Code phrase element (multiple lines).

By default, if a code phrase element cannot fit a page, it takes several lines and resembles a code block element. Consider using code block elements for long chunks of code.

code phrase multiple lines

Common Customizations

You can apply customizations by pasting the following code snippets under the @import rules.

Change the font of code block elements and code phrase elements
codeblock custom font
/* Change the font of codeblock elements and codeph elements. */
code {
    font-family: monospace !important; /* The important property is needed to overwrite the default site settings. */
}
Adjust the colors of code block elements and code phrase elements
codeblock custom colors
/* Adjust the colors of codeblock elements and codeph elements. */
pre.codeblock > code,
pre.codeblock > code *,
code.codeph,
code.codeph * {
    background: black;
    color: green;
}
.codeblock > code {
    border-left: solid 5px green;
}