How Islands Dark Handles Markdown Syntax Highlighting

Islands Dark implements Markdown syntax highlighting by mapping TextMate scopes to specific hex color values in themes/islands-dark.json, assigning a warm amber palette to structural elements and distinct hues for code and links.

Islands Dark is a sophisticated VS Code theme available in the bwya77/vscode-dark-islands repository that provides comprehensive markdown syntax highlighting. The theme defines its visual rules through standard TextMate scope assignments in the main theme definition file, ensuring consistent color coding for everything from headings to inline code blocks.

TextMate Scope Mappings in islands-dark.json

The core markdown syntax highlighting logic resides in themes/islands-dark.json. This file contains token color rules that assign specific foreground colors and font styles to standard TextMate scopes recognized by VS Code's syntax engine.

Headings and Typography

Headings receive a warm amber color (#cf8e6d) with bold styling. The theme targets heading.*.markdown entity.name and markup.heading scopes at lines 824-838, while the hash punctuation (#) uses punctuation.definition.heading.markdown at lines 840-847.

For text formatting, bold content (markup.bold, lines 849-856) and italic content (markup.italic, lines 858-866) both use #bcbec4, with the bold scope receiving a bold font weight and the italic scope receiving italic styling.

Code Elements and Blockquotes

Inline code and fenced code blocks are colored in a distinct green (#6aab73) through the markup.inline.raw and markup.fenced_code.block scopes defined at lines 868-877.

Blockquotes are rendered in muted grey-blue (#7a7e85) with italic styling via the markup.quote.markdown scope at lines 909-918, creating a subtle visual distinction from standard body text.

Links and Lists

URLs and link underlines appear in blue (#548af7) using markup.underline.link and markup.underline.link.markdown scopes at lines 879-886. Link titles and descriptions use a slightly different blue (#56a8f5) via string.other.link.title.markdown and string.other.link.description.markdown at lines 888-896.

List markers—including dashes, asterisks, and numbers—share the heading amber color (#cf8e6d) through punctuation.definition.list.begin.markdown and related list scopes at lines 898-907.

Semantic Highlighting Integration

Beyond TextMate scopes, Islands Dark enables "semanticHighlighting": true in its configuration. This allows VS Code to apply richer token-based colors when Markdown language servers provide semantic tokens, though the base styling remains defined by the token color entries in themes/islands-dark.json.

Visual Preview

When you open a Markdown file with Islands Dark active, the syntax highlighting produces the following visual output:

# Islands Dark Theme

## Markdown Highlighting

**Bold text** and *italic text* are styled distinctly.

```bash

# Inline code block

echo "Hello, Islands!"

• List item 1
• List item 2

Blockquote example

Official repo

Headings render in amber (`#cf8e6d`), bold text appears in light grey (`#bcbec4`) with increased weight, inline code blocks display in green (`#6aab73`), links turn blue (`#548af7`), and blockquotes appear in muted grey with italic emphasis.

## Summary

- **Theme file**: All Markdown syntax highlighting rules are defined in [`themes/islands-dark.json`](https://github.com/bwya77/vscode-dark-islands/blob/main/themes/islands-dark.json) using TextMate scope mappings.
- **Color coding**: Headings and list markers use amber (`#cf8e6d`), code blocks use green (`#6aab73`), links use blue (`#548af7` or `#56a8f5`), and blockquotes use grey (`#7a7e85`).
- **Semantic support**: The theme enables `semanticHighlighting` for enhanced token coloring when language servers provide semantic tokens.
- **Implementation**: Font styles (bold, italic) are applied alongside colors to differentiate structural Markdown elements.

## Frequently Asked Questions

### What file contains the Markdown syntax highlighting rules in Islands Dark?

The Markdown syntax highlighting rules are located in **[`themes/islands-dark.json`](https://github.com/bwya77/vscode-dark-islands/blob/main/themes/islands-dark.json)**. This JSON file defines token color mappings for standard TextMate scopes such as `markup.heading`, `markup.bold`, and `markup.inline.raw`, assigning specific hex color values to each scope between lines 824 and 918.

### How does Islands Dark color Markdown headings differently from body text?

Headings use the scope `markup.heading` with the color `#cf8e6d` (a warm amber) and bold font weight (lines 824-838), while body text typically uses the theme's default foreground color. The hash symbols in headings (`#`) use `punctuation.definition.heading.markdown` with the same amber color (lines 840-847), creating visual consistency for Markdown structural markers.

### Does Islands Dark support semantic highlighting for Markdown files?

Yes, Islands Dark sets `"semanticHighlighting": true`, which allows VS Code to apply additional token-based coloring when Markdown language servers provide semantic tokens. However, the core visual styling relies on the TextMate scope definitions in [`themes/islands-dark.json`](https://github.com/bwya77/vscode-dark-islands/blob/main/themes/islands-dark.json), ensuring consistent rendering even when semantic tokens are unavailable.

### Which color does Islands Dark use for inline code and fenced blocks?

Inline code and fenced code blocks use the color `#6aab73` (a muted green) through the `markup.inline.raw` and `markup.fenced_code.block` scopes defined at lines 868-877 of [`themes/islands-dark.json`](https://github.com/bwya77/vscode-dark-islands/blob/main/themes/islands-dark.json). This distinguishes code elements from standard prose and heading text within Markdown documents.

{
  "mcpServers": {
    "instagit": {
      "command": "npx",
      "args": ["-y", "instagit@latest"]
    }
  }
}