Syntax Highlight

Syntax classes are used for styling the highlighted text inside code blocks. Ulysses applies these syntax classes to the contents of a code block depending on the selected programming language. You can also download an example document that contains all available syntax classes.

Selectors

• Generic:

  • syntax-all: A syntax class that is applied to all items that have a highlight, regardless of their meaning.

  • syntax-comment: A syntax class used for code comments.

  • syntax-constant: A syntax class used for constants.

  • syntax-entity: A syntax class used for entities and symbols (e.g., type names, function names, attributes).

  • syntax-parameter: A syntax class used for function parameters (only some languages).

  • syntax-tag: A syntax class used for tags (only HTML, XML).

  • syntax-keyword: A syntax class used for language-specific keywords.

  • syntax-string: A syntax class used for text strings.

  • syntax-variable: A syntax class used for variables.

  • syntax-error: A syntax class used if the syntax entered is invalid.

  • syntax-escape: A syntax class used for escaped characters in strings.

  • syntax-heading: A syntax class used for headings (Markdown only).

  • syntax-italic: A syntax class used for italic formatting (Markdown only).

  • syntax-bold: A syntax class used for bold formatting (Markdown only).

  • syntax-deleted: A syntax class used for content marked as deleted (e.g., Diff syntax).

  • syntax-inserted: A syntax class used for content marked as inserted (e.g., Diff syntax).

  • syntax-changed: A syntax class used for changed marked as modified (e.g., Diff syntax).

  • syntax-list: A syntax class used for lists (Markdown only).

  • syntax-link: A syntax class used for hyperlinks (Markdown only).

Style Settings

See also: Inline

Pseudoclasses

See also: Inline

Example

// Highlight all keywords of a programming language in orange
syntax-variable {
  font-color:   #d73a49
}

// Highlight all comments in grey and make them italic
syntax-comment {
 font-color:   #6a737d
 font-slant:   italic
}

// Make all highlighted elements bold
syntax-all {
 font-weight:  bold
}