File path, Sysoutput, Userinput, Varname

Style the semantic string elements and wrap variable name elements in angle brackets.


Resource location:@import url("");
Figure 1. File path element and variable name element.

The following example shows a file path element that contains a variable name element. The variable name element is automatically wrapped in <angle brackets>.

file path varname
Figure 2. System output element
system output
Figure 3. User input element
user input

Common Customizations

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

Do not wrap variable name elements in angle brackets
varname no angle brackets
/* Do not wrap variable name elements in angle brackets. */
.varname::before {
  content: "";
.varname::after {
  content: "";
Style file path elements
file path custom
/* Style file path elements. */
.filepath {
  display: inline-block;
  padding: 0em 0.25em;
  text-align: left;
  width: auto;
  background-color: whitesmoke;
  color: teal;
  border: 2px dotted gray;
Style system output elements
system output custom
/* Style system output elements. */
.systemoutput {
  font-family: 'Courier New', Courier, monospace;
  background-color: black;
  color: rgb(9, 169, 9);
  padding: 2.5px;
  letter-spacing: 0.035em;
Style user input elements
user input custom
/* Add a caption before the user input element. */
.userinput::before {
    content: "enter: ";
    font-weight: bold;
/* Style the user input element. */
.userinput {
    border-top: 2px solid #457b9d;
    border-bottom: 2px solid #457b9d;