Mark Highlight - Visual Studio Marketplace

Skip to content

| Marketplace

Sign in

Visual Studio Code>Other>Mark HighlightNew to Visual Studio Code? Get it now.

Mark Highlight<br>Julian Anthes

4 installs<br>| (2) | Free<br>Xcode-style // MARK: comments for any language — a divider in the editor and a jump point in the Outline.<br>Installation<br>Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.<br>Copy<br>Copied to clipboard

More Info

OverviewVersion HistoryQ & ARating & Review<br>Mark Highlight — Xcode-style // MARK: comments for VSCode

Give a section of code a name once, and see it everywhere:

// MARK: - Networking

That single comment becomes a full-width divider in the editor, an entry<br>between your real symbols in the Outline, breadcrumbs, and Go to Symbol<br>(Cmd+Shift+O), a tick in the overview ruler, and a section label in<br>the minimap.

Why Mark Highlight

Navigate by intent, not just by symbol. Long files don't get shorter —<br>but "Types", "Store", "Lookup helpers" are how you actually think about<br>them. Marks make those sections jumpable instead of scroll-and-squint.

One merged list, not a second tree. The usual approach — a separate<br>symbol provider — splits the Outline into a "MARK" group next to<br>"TypeScript", because VSCode<br>cannot merge outline trees.<br>Mark Highlight instead injects marks into TypeScript's own symbol tree<br>via a bundled tsserver plugin: one list, ordered by position, with marks<br>nesting into their containing class exactly like Xcode.

Every language, zero setup. Each language's real comment tokens are<br>discovered from its own configuration: // in TS/Go/Rust/Swift, # in<br>Python/Ruby/Shell/YAML, -- in SQL/Lua, /* */ in CSS, in<br>HTML — including any third-party language you install.

Two features that can never disagree. The divider and the outline entry<br>come from one shared parser, so what you see in the code is always what<br>you get in navigation — no more stacking two extensions and hoping they<br>match.

Light and live. Mark-free files cost one substring scan; updates are<br>debounced while typing; every setting applies instantly, no reload.

Quick start

Install the extension.

Type // MARK: - Section name on its own line (or # MARK: -,<br>-- MARK: -, ... — whatever your language's comment is).

Jump to it via the Outline, breadcrumbs, or Cmd+Shift+O.

The dash is optional (// MARK: Section works too), and a bare // MARK: -<br>draws a plain divider without a title — same conventions as Xcode.

The Outline stays one list

Marks are mirrored into symbol navigation between the real symbols — no<br>separate "MARK" group in TypeScript files. Note how Lookup helpers nests<br>inside UserStore:

Every language with comments

Marks are parsed with each language's own comment tokens:

Make it yours

The rule's color, style, and width are configurable — thick rules render as a<br>band in the blank space above the mark line, never over your code:

Settings

Setting<br>Default<br>Description

markComments.enabled<br>true<br>Master switch for both features.

markComments.keyword<br>"MARK: -"<br>Keyword that starts a mark. A trailing - is optional when matching, so // MARK: - Title, // MARK:- Title, and // MARK: Title all match the default.

markComments.languages<br>["*"]<br>Language IDs to process. "*" covers every language that declares comment syntax, each parsed with its own comment tokens (# for Python, -- for Lua/SQL, for HTML, ...).

markComments.borderColor<br>"rgba(128,128,128,0.45)"<br>Rule color (any CSS color); also used for the overview-ruler tick.

markComments.borderStyle<br>"solid"<br>solid, dashed, dotted, or double.

markComments.borderWidth<br>"1px 0 0 0"<br>CSS border-width (top right bottom left) — the default draws a top rule only. Top-only rules thicker than 1px are drawn as a band in the blank space above the mark line, so they never paint over the mark text (decorations are overlays and cannot push text down).

markComments.overviewRuler<br>true<br>Show a tick per mark in the right-hand overview ruler.

All settings apply live — no reload needed.

How it works

Both features key off a single pure function, findMarks(text, keyword) in<br>src/core/findMarks.ts, so they can never disagree about what counts as a<br>mark. That module imports nothing from vscode, which is what lets the Vitest<br>unit tests run without an extension host. A thin adapter maps its results to<br>vscode.Ranges.

Outline (TS/TSX/JS/JSX) : a bundled tsserver plugin (src/tsPlugin/index.ts, shipped in dist/ts-plugin/ and installed into the extension's node_modules/ on activation — the only location tsserver loads plugins from) proxies getNavigationTree and injects one node per mark into TypeScript's own symbol tree. Because the marks live inside the TypeScript provider's results, the Outline stays a single interleaved list — a separate DocumentSymbolProvider would render as its own tree next to "TypeScript" (microsoft/vscode#60641). Marks nest into the node that contains them (a mark inside a class body appears under the class), like Xcode.

Outline (other configured...