Documenting common scopes

Syntaxes & Themes
1

I couldn’t find a good overview over available (or commonly used) scopes in syntax files. So I downloaded most of the available syntaxes and extracted all used scopes. Perhaps this could be a starting point to document the supported scopes? (Or am I missing some resource that already does this?)

Markup

Anything that belongs to the markup language in use. Think, everything that would be removed or changed when converting to another markup language. (e.g. ** to mark bold text in Markdown.)

  • markup - Markup
  • markup.addition - Addition
  • markup.code - Markup
  • markup.deletion - Deletion
  • markup.heading - Markup
  • markup.highlight - Highlight
  • markup.link - Markup
  • markup.list - Markup
  • markup.quotation - Markup
  • markup.substitution - Substitution

Text

The content of the document. Compared to markup anything that would be preserved when changing the markup language. (e.g. a paragraph of text or everything between a pair of ** in Markdown.)

  • text.activeLink - Link which is tap/clickable
  • text.bold - Bold
  • text.bold.extraLarge - Extra Large Bold
  • text.bold.extraSmall - Extra Small Bold
  • text.bold.large - Large Bold
  • text.bold.small - Small Bold
  • text.bolditalic - Bold, Italic
  • text.bolditalic.extraLarge - Extra Large Bold, Italic
  • text.bolditalic.extraSmall - Extra Small Bold, Italic
  • text.bolditalic.large - Large Bold, Italic
  • text.bolditalic.small - Small Bold, Italic
  • text.heading - Heading
  • text.heading01 - Level 1 Heading
  • text.heading02 - Level 2 Heading
  • text.heading03 - Level 3 Heading
  • text.heading04 - Level 4 Heading
  • text.heading05 - Level 5 Heading
  • text.heading06 - Level 6 Heading
  • text.invisibles - Invisible characters
  • text.italic - Italic
  • text.italic.extraLarge - Extra Large Italic
  • text.italic.extraSmall - Extra Small Italic
  • text.italic.large - Large Italic
  • text.italic.small - Small Italic
  • text.link - Link
  • text.linkModeLink - Link Mode Link
  • text.monospace - Monospace
  • text.monospace.bold - Monospace Bold
  • text.monospace.bold.extraLarge - Extra Large Monospace Bold
  • text.monospace.bold.extraSmall - Extra Small Monospace Bold
  • text.monospace.bold.large - Large Monospace Bold
  • text.monospace.bold.small - Small Monospace Bold
  • text.monospace.extraLarge - Extra Large Monospace
  • text.monospace.extraSmall - Extra Small Monospace
  • text.monospace.italic - Monospace Italic
  • text.monospace.italic.extraLarge - Extra Large Monospace Italic
  • text.monospace.italic.extraSmall - Extra Small Monospace Italic
  • text.monospace.italic.large - Large Monospace Italic
  • text.monospace.italic.small - Small Monospace Italic
  • text.monospace.large - Large Monospace
  • text.monospace.small - Small Monospace
  • text.normal - Normal Text
  • text.normal.extraLarge - Extra Large Text
  • text.normal.extraSmall - Extra Small Text
  • text.normal.large - Large Text
  • text.normal.small - Small Text
  • text.quotation - Quotation block
  • text.strikethrough - Strikethrough
  • text.underline - Underline
  • text.url - URL

Code

Any parts of a document, that contain any kind of code that is not part of the actual document markup. (e.g. in a <pre> tag in HTML.)

  • code.block - Code block
  • code.comment - Comment
  • code.inline - Inline code
  • code.keyword - Keyword
  • code.literal - Code block
  • code.operator - Operator
  • code.punctuation - Operator

Colors

Used to give some parts of a document a specific color. Should be used sparingly, since color choices should be made by the Theme. Mostly used in combination with another (more semantic) scope like markup. (e.g. making the word red always appear in red.)

  • color.accent01 - Accent color
  • color.accent02 - Accent color
  • color.accent03 - Accent color
  • color.accent04 - Accent color
  • color.accent05 - Accent color
  • color.accent06 - Accent color
  • color.black - Black color
  • color.blue - Blue color
  • color.gray - Gray color
  • color.green - Green color
  • color.indigo - Blue color
  • color.orange - Orange color
  • color.pink - Pink color
  • color.purple - Purple color
  • color.red - Red color
  • color.white - White color
  • color.yellow - Yellow color
2 Likes
2

The best place to start to reference scopes may be in themes, not syntaxes. Although scopes are arbitrary, so syntaxes can define any scopes they want, for them to do anything, those scopes need to be supported by a theme.

If you look in the scopes key in any of the default themes, you’ll see there are additional scopes, and these are all the ones that can be guaranteed to be available at least in any of the default themes. There are some defined that are not used in any of the default syntaxes, so did not make it to your list, like additional color.* values, and different text sizes.

3

Never thought of the theme files. 🤦🏼 There are even descriptions for each scope available.

I parsed the light theme and updated the post with more scopes.

1 Like