diff --git a/packages/language-server/README.md b/packages/language-server/README.md
index 9372d9687..0862842b9 100644
--- a/packages/language-server/README.md
+++ b/packages/language-server/README.md
@@ -289,6 +289,10 @@ Whether or not to show a code lens at the top of Svelte files indicating if they
 
 The default language to use when generating new script tags in Svelte. _Default_: `none`
 
+#### `svelte.plugin.svelte.documentHighlight.enable`
+
+Enable document highlight support. Requires a restart. _Default_: `true`
+
 ## Credits
 
 -   [James Birtles](https://github.com/jamesbirtles) for creating the foundation which this language server is built on
diff --git a/packages/language-server/src/lib/documentHighlight/wordHighlight.ts b/packages/language-server/src/lib/documentHighlight/wordHighlight.ts
new file mode 100644
index 000000000..8e90a6f35
--- /dev/null
+++ b/packages/language-server/src/lib/documentHighlight/wordHighlight.ts
@@ -0,0 +1,89 @@
+import {
+    DocumentHighlight,
+    DocumentHighlightKind,
+    Position,
+    Range
+} from 'vscode-languageserver-types';
+import { Document, TagInformation } from '../documents';
+
+export function wordHighlightForTag(
+    document: Document,
+    position: Position,
+    tag: TagInformation | null,
+    wordPattern: RegExp
+): DocumentHighlight[] | null {
+    if (!tag || tag.start === tag.end) {
+        return null;
+    }
+
+    const offset = document.offsetAt(position);
+
+    const text = document.getText();
+    if (
+        offset < tag.start ||
+        offset > tag.end ||
+        // empty before and after the cursor
+        !text.slice(offset - 1, offset + 1).trim()
+    ) {
+        return null;
+    }
+
+    const word = wordAt(document, position, wordPattern);
+    if (!word) {
+        return null;
+    }
+
+    const searching = document.getText().slice(tag.start, tag.end);
+
+    const highlights: DocumentHighlight[] = [];
+
+    let index = 0;
+    while (index < searching.length) {
+        index = searching.indexOf(word, index);
+        if (index === -1) {
+            break;
+        }
+
+        const start = tag.start + index;
+        highlights.push({
+            range: {
+                start: document.positionAt(start),
+                end: document.positionAt(start + word.length)
+            },
+            kind: DocumentHighlightKind.Text
+        });
+
+        index += word.length;
+    }
+
+    return highlights;
+}
+
+function wordAt(document: Document, position: Position, wordPattern: RegExp): string | null {
+    const line = document
+        .getText(
+            Range.create(Position.create(position.line, 0), Position.create(position.line + 1, 0))
+        )
+        .trimEnd();
+
+    wordPattern.lastIndex = 0;
+
+    let start: number | undefined;
+    let end: number | undefined;
+    const matchEnd = Math.min(position.character, line.length);
+    while (wordPattern.lastIndex < matchEnd) {
+        const match = wordPattern.exec(line);
+        if (!match) {
+            break;
+        }
+
+        start = match.index;
+        end = match.index + match[0].length;
+    }
+
+    if (start === undefined || end === undefined || end < position.character) {
+        return null;
+    }
+
+    return line.slice(start, end);
+}
diff --git a/packages/language-server/src/lib/documents/utils.ts b/packages/language-server/src/lib/documents/utils.ts
index ff8b4c016..66043af0e 100644
--- a/packages/language-server/src/lib/documents/utils.ts
+++ b/packages/language-server/src/lib/documents/utils.ts
@@ -453,3 +453,11 @@ export function isInsideMoustacheTag(html: string, tagStart: number | null, posi
         return charactersInNode.lastIndexOf('{') > charactersInNode.lastIndexOf('}');
     }
 }
+
+export function inStyleOrScript(document: Document, position: Position) {
+    return (
+        isInTag(position, document.styleInfo) ||
+        isInTag(position, document.scriptInfo) ||
+        isInTag(position, document.moduleScriptInfo)
+    );
+}
diff --git a/packages/language-server/src/plugins/PluginHost.ts b/packages/language-server/src/plugins/PluginHost.ts
index d1613134f..8a4c3974d 100644
--- a/packages/language-server/src/plugins/PluginHost.ts
+++ b/packages/language-server/src/plugins/PluginHost.ts
@@ -16,6 +16,7 @@ import {
     CompletionList,
     DefinitionLink,
     Diagnostic,
+    DocumentHighlight,
     FoldingRange,
     FormattingOptions,
     Hover,
@@ -677,6 +678,25 @@ export class PluginHost implements LSProvider, OnWatchFileChanges {
         );
     }
 
+    findDocumentHighlight(
+        textDocument: TextDocumentIdentifier,
+        position: Position
+    ): Promise<DocumentHighlight[] | null> {
+        const document = this.getDocument(textDocument.uri);
+        if (!document) {
+            throw new Error('Cannot call methods on an unopened document');
+        }
+
+        return (
+            this.execute<DocumentHighlight[] | null>(
+                'findDocumentHighlight',
+                [document, position],
+                ExecuteMode.FirstNonNull,
+                'high'
+            ) ?? [] // fall back to empty array to prevent fallback to word-based highlighting
+        );
+    }
+
     onWatchFileChanges(onWatchFileChangesParas: OnWatchFileChangesPara[]): void {
         for (const support of this.plugins) {
             support.onWatchFileChanges?.(onWatchFileChangesParas);
diff --git a/packages/language-server/src/plugins/css/CSSPlugin.ts b/packages/language-server/src/plugins/css/CSSPlugin.ts
index d5a38d427..f89a6285e 100644
--- a/packages/language-server/src/plugins/css/CSSPlugin.ts
+++ b/packages/language-server/src/plugins/css/CSSPlugin.ts
@@ -14,6 +14,7 @@ import {
     CompletionItem,
     CompletionItemKind,
     SelectionRange,
+    DocumentHighlight,
     WorkspaceFolder
 } from 'vscode-languageserver';
 import {
@@ -36,6 +37,7 @@ import {
     CompletionsProvider,
     DiagnosticsProvider,
     DocumentColorsProvider,
+    DocumentHighlightProvider,
     DocumentSymbolsProvider,
     FoldingRangeProvider,
     HoverProvider,
@@ -50,8 +52,12 @@ import { StyleAttributeDocument } from './StyleAttributeDocument';
 import { getDocumentContext } from '../documentContext';
 import { FoldingRange, FoldingRangeKind } from 'vscode-languageserver-types';
 import { indentBasedFoldingRangeForTag } from '../../lib/foldingRange/indentFolding';
+import { wordHighlightForTag } from '../../lib/documentHighlight/wordHighlight';
 import { isNotNullOrUndefined, urlToPath } from '../../utils';
 
+// https://github.com/microsoft/vscode/blob/c6f507deeb99925e713271b1048f21dbaab4bd54/extensions/css/language-configuration.json#L34
+const wordPattern = /(#?-?\d*\.\d\w*%?)|(::?[\w-]*(?=[^,{;]*[,{]))|(([@#.!])?[\w-?]+%?|[@#!.])/g;
+
 export class CSSPlugin
     implements
         HoverProvider,
@@ -61,6 +67,7 @@ export class CSSPlugin
         ColorPresentationsProvider,
         DocumentSymbolsProvider,
         SelectionRangeProvider,
+        DocumentHighlightProvider,
         FoldingRangeProvider
 {
     __name = 'css';
@@ -388,7 +395,6 @@ export class CSSPlugin
         }
 
         const cssDocument = this.getCSSDoc(document);
-
         if (shouldUseIndentBasedFolding(cssDocument.languageId)) {
             return this.nonSyntacticFolding(document, document.styleInfo);
         }
@@ -441,6 +447,48 @@ export class CSSPlugin
         return ranges.sort((a, b) => a.startLine - b.startLine);
     }
 
+    findDocumentHighlight(document: Document, position: Position): DocumentHighlight[] | null {
+        const cssDocument = this.getCSSDoc(document);
+        if (cssDocument.isInGenerated(position)) {
+            if (shouldExcludeDocumentHighlights(cssDocument)) {
+                return wordHighlightForTag(document, position, document.styleInfo, wordPattern);
+            }
+
+            return this.findDocumentHighlightInternal(cssDocument, position);
+        }
+
+        const attributeContext = getAttributeContextAtPosition(document, position);
+        if (
+            attributeContext &&
+            this.inStyleAttributeWithoutInterpolation(attributeContext, document.getText())
+        ) {
+            const [start, end] = attributeContext.valueRange;
+            return this.findDocumentHighlightInternal(
+                new StyleAttributeDocument(document, start, end, this.cssLanguageServices),
+                position
+            );
+        }
+
+        return null;
+    }
+
+    private findDocumentHighlightInternal(
+        cssDocument: CSSDocumentBase,
+        position: Position
+    ): DocumentHighlight[] | null {
+        const kind = extractLanguage(cssDocument);
+
+        const result = getLanguageService(this.cssLanguageServices, kind)
+            .findDocumentHighlights(
+                cssDocument,
+                cssDocument.getGeneratedPosition(position),
+                cssDocument.stylesheet
+            )
+            .map((highlight) => mapObjWithRangeToOriginal(cssDocument, highlight));
+
+        return result;
+    }
+
     private getCSSDoc(document: Document) {
         let cssDoc = this.cssDocuments.get(document);
         if (!cssDoc || cssDoc.version < document.version) {
@@ -535,6 +583,18 @@ function shouldUseIndentBasedFolding(kind?: string) {
     }
 }
 
+function shouldExcludeDocumentHighlights(document: CSSDocumentBase) {
+    switch (extractLanguage(document)) {
+        case 'postcss':
+        case 'sass':
+        case 'stylus':
+        case 'styl':
+            return true;
+        default:
+            return false;
+    }
+}
+
 function isSASS(document: CSSDocumentBase) {
     switch (extractLanguage(document)) {
         case 'sass':
diff --git a/packages/language-server/src/plugins/html/HTMLPlugin.ts b/packages/language-server/src/plugins/html/HTMLPlugin.ts
index ca830b3e2..75d1c3193 100644
--- a/packages/language-server/src/plugins/html/HTMLPlugin.ts
+++ b/packages/language-server/src/plugins/html/HTMLPlugin.ts
@@ -18,7 +18,8 @@ import {
     WorkspaceEdit,
     LinkedEditingRanges,
     CompletionContext,
-    FoldingRange
+    FoldingRange,
+    DocumentHighlight
 } from 'vscode-languageserver';
 import {
     DocumentManager,
@@ -33,7 +34,8 @@ import {
     CompletionsProvider,
     RenameProvider,
     LinkedEditingRangesProvider,
-    FoldingRangeProvider
+    FoldingRangeProvider,
+    DocumentHighlightProvider
 } from '../interfaces';
 import { isInsideMoustacheTag, toRange } from '../../lib/documents/utils';
 import { isNotNullOrUndefined, possiblyComponent } from '../../utils';
@@ -41,6 +43,10 @@ import { importPrettier } from '../../importPackage';
 import path from 'path';
 import { Logger } from '../../logger';
 import { indentBasedFoldingRangeForTag } from '../../lib/foldingRange/indentFolding';
+import { wordHighlightForTag } from '../../lib/documentHighlight/wordHighlight';
+
+// https://github.com/microsoft/vscode/blob/c6f507deeb99925e713271b1048f21dbaab4bd54/extensions/html/language-configuration.json#L34
+const wordPattern = /(-?\d*\.\d\w*)|([^`~!@$^&*()=+[{\]}\|;:'",.<>\/\s]+)/g;
 
 export class HTMLPlugin
     implements
@@ -48,7 +54,8 @@ export class HTMLPlugin
         CompletionsProvider,
         RenameProvider,
         LinkedEditingRangesProvider,
-        FoldingRangeProvider
+        FoldingRangeProvider,
+        DocumentHighlightProvider
 {
     __name = 'html';
     private lang = getLanguageService({
@@ -409,6 +416,36 @@ export class HTMLPlugin
         return result.concat(templateRange);
     }
 
+    findDocumentHighlight(document: Document, position: Position): DocumentHighlight[] | null {
+        const html = this.documents.get(document);
+        if (!html) {
+            return null;
+        }
+
+        const templateResult = wordHighlightForTag(
+            document,
+            position,
+            document.templateInfo,
+            wordPattern
+        );
+
+        if (templateResult) {
+            return templateResult;
+        }
+
+        const node = html.findNodeAt(document.offsetAt(position));
+        if (possiblyComponent(node)) {
+            return null;
+        }
+        const result = this.lang.findDocumentHighlights(document, position, html);
+
+        if (!result.length) {
+            return null;
+        }
+
+        return result;
+    }
+
     /**
      * Returns true if rename happens at the tag name, not anywhere inbetween.
      */
diff --git a/packages/language-server/src/plugins/interfaces.ts b/packages/language-server/src/plugins/interfaces.ts
index 7570c727c..73c7bbbbd 100644
--- a/packages/language-server/src/plugins/interfaces.ts
+++ b/packages/language-server/src/plugins/interfaces.ts
@@ -21,6 +21,7 @@ import {
     CompletionList,
     DefinitionLink,
     Diagnostic,
+    DocumentHighlight,
     FoldingRange,
     FormattingOptions,
     Hover,
@@ -243,6 +244,13 @@ export interface FoldingRangeProvider {
     getFoldingRanges(document: Document): Resolvable<FoldingRange[]>;
 }
 
+export interface DocumentHighlightProvider {
+    findDocumentHighlight(
+        document: Document,
+        position: Position
+    ): Resolvable<DocumentHighlight[] | null>;
+}
+
 export interface OnWatchFileChanges {
     onWatchFileChanges(onWatchFileChangesParas: OnWatchFileChangesPara[]): void;
 }
@@ -273,7 +281,8 @@ type ProviderBase = DiagnosticsProvider &
     InlayHintProvider &
     CallHierarchyProvider &
     FoldingRangeProvider &
-    CodeLensProvider;
+    CodeLensProvider &
+    DocumentHighlightProvider;
 
 export type LSProvider = ProviderBase & BackwardsCompatibleDefinitionsProvider;
 
diff --git a/packages/language-server/src/plugins/svelte/features/getCompletions.ts b/packages/language-server/src/plugins/svelte/features/getCompletions.ts
index eefe5c3f7..8a4f0d5c0 100644
--- a/packages/language-server/src/plugins/svelte/features/getCompletions.ts
+++ b/packages/language-server/src/plugins/svelte/features/getCompletions.ts
@@ -9,10 +9,10 @@ import {
     MarkupKind
 } from 'vscode-languageserver';
 import { SvelteTag, documentation, getLatestOpeningTag } from './SvelteTags';
-import { isInTag, Document } from '../../../lib/documents';
+import { Document } from '../../../lib/documents';
 import { AttributeContext, getAttributeContextAtPosition } from '../../../lib/documents/parseHtml';
 import { getModifierData } from './getModifierData';
-import { attributeCanHaveEventModifier } from './utils';
+import { attributeCanHaveEventModifier, inStyleOrScript } from './utils';
 
 const HTML_COMMENT_START = '<!--';
 
@@ -36,16 +36,12 @@ export function getCompletions(
 ): CompletionList | null {
     const offset = svelteDoc.offsetAt(position);
 
-    const isInStyleOrScript =
-        isInTag(position, svelteDoc.style) ||
-        isInTag(position, svelteDoc.script) ||
-        isInTag(position, svelteDoc.moduleScript);
     const lastCharactersBeforePosition = svelteDoc
         .getText()
         // use last 10 characters, should cover 99% of all cases
         .substr(Math.max(offset - 10, 0), Math.min(offset, 10));
     const precededByOpeningBracket = /[\s\S]*{\s*[#:/@]\w*$/.test(lastCharactersBeforePosition);
-    if (isInStyleOrScript) {
+    if (inStyleOrScript(svelteDoc, position)) {
         return null;
     }
 
diff --git a/packages/language-server/src/plugins/svelte/features/getHoverInfo.ts b/packages/language-server/src/plugins/svelte/features/getHoverInfo.ts
index 86d90577b..fa2679e4e 100644
--- a/packages/language-server/src/plugins/svelte/features/getHoverInfo.ts
+++ b/packages/language-server/src/plugins/svelte/features/getHoverInfo.ts
@@ -2,9 +2,9 @@ import { Hover, Position } from 'vscode-languageserver';
 import { SvelteDocument } from '../SvelteDocument';
 import { documentation, SvelteTag, getLatestOpeningTag } from './SvelteTags';
 import { flatten } from '../../../utils';
-import { Document, isInTag } from '../../../lib/documents';
+import { Document } from '../../../lib/documents';
 import { AttributeContext, getAttributeContextAtPosition } from '../../../lib/documents/parseHtml';
-import { attributeCanHaveEventModifier } from './utils';
+import { attributeCanHaveEventModifier, inStyleOrScript } from './utils';
 import { getModifierData } from './getModifierData';
 
 /**
@@ -17,11 +17,6 @@ export function getHoverInfo(
 ): Hover | null {
     const offset = svelteDoc.offsetAt(position);
 
-    const isInStyleOrScript =
-        isInTag(position, svelteDoc.style) ||
-        isInTag(position, svelteDoc.script) ||
-        isInTag(position, svelteDoc.moduleScript);
-
     const offsetStart = Math.max(offset - 10, 0);
     const charactersAroundOffset = svelteDoc
         .getText()
@@ -29,7 +24,7 @@ export function getHoverInfo(
         .substr(offsetStart, 20);
     const isSvelteTag = tagRegexp.test(charactersAroundOffset);
 
-    if (isInStyleOrScript) {
+    if (inStyleOrScript(svelteDoc, position)) {
         return null;
     }
 
diff --git a/packages/language-server/src/plugins/svelte/features/getSelectionRanges.ts b/packages/language-server/src/plugins/svelte/features/getSelectionRanges.ts
index c9cbdadc5..2ddb01f88 100644
--- a/packages/language-server/src/plugins/svelte/features/getSelectionRanges.ts
+++ b/packages/language-server/src/plugins/svelte/features/getSelectionRanges.ts
@@ -1,7 +1,8 @@
 import { walk } from 'estree-walker';
 import { Position, SelectionRange } from 'vscode-languageserver';
-import { isInTag, mapSelectionRangeToParent, offsetAt, toRange } from '../../../lib/documents';
+import { mapSelectionRangeToParent, offsetAt, toRange } from '../../../lib/documents';
 import { SvelteDocument } from '../SvelteDocument';
+import { inStyleOrScript } from './utils';
 
 // estree does not have start/end in their public Node interface,
 // but the AST returned by svelte/compiler does. Type as any as a workaround.
@@ -13,7 +14,10 @@ type OffsetRange = {
 };
 
 export async function getSelectionRange(svelteDoc: SvelteDocument, position: Position) {
-    const { script, style, moduleScript } = svelteDoc;
+    if (inStyleOrScript(svelteDoc, position)) {
+        return null;
+    }
+
     const {
         ast: { html }
     } = await svelteDoc.getCompiled();
@@ -21,14 +25,6 @@ export async function getSelectionRange(svelteDoc: SvelteDocument, position: Pos
     const content = transpiled.getText();
     const offset = offsetAt(transpiled.getGeneratedPosition(position), content);
 
-    const embedded = [script, style, moduleScript];
-    for (const info of embedded) {
-        if (isInTag(position, info)) {
-            // let other plugins do it
-            return null;
-        }
-    }
-
     let nearest: OffsetRange = html;
     let result: SelectionRange | undefined;
 
diff --git a/packages/language-server/src/plugins/svelte/features/utils.ts b/packages/language-server/src/plugins/svelte/features/utils.ts
index 9a1619cbe..2df4c657c 100644
--- a/packages/language-server/src/plugins/svelte/features/utils.ts
+++ b/packages/language-server/src/plugins/svelte/features/utils.ts
@@ -1,5 +1,8 @@
+import { Position } from 'vscode-languageserver';
+import { isInTag } from '../../../lib/documents';
 import { AttributeContext } from '../../../lib/documents/parseHtml';
 import { possiblyComponent } from '../../../utils';
+import { SvelteDocument } from '../SvelteDocument';
 
 export function attributeCanHaveEventModifier(attributeContext: AttributeContext) {
     return (
@@ -9,3 +12,11 @@ export function attributeCanHaveEventModifier(attributeContext: AttributeContext
         attributeContext.name.includes('|')
     );
 }
+
+export function inStyleOrScript(svelteDoc: SvelteDocument, position: Position) {
+    return (
+        isInTag(position, svelteDoc.style) ||
+        isInTag(position, svelteDoc.script) ||
+        isInTag(position, svelteDoc.moduleScript)
+    );
+}
diff --git a/packages/language-server/src/plugins/typescript/TypeScriptPlugin.ts b/packages/language-server/src/plugins/typescript/TypeScriptPlugin.ts
index 264fe6665..3c8203b25 100644
--- a/packages/language-server/src/plugins/typescript/TypeScriptPlugin.ts
+++ b/packages/language-server/src/plugins/typescript/TypeScriptPlugin.ts
@@ -11,6 +11,7 @@ import {
     CompletionList,
     DefinitionLink,
     Diagnostic,
+    DocumentHighlight,
     FileChangeType,
     FoldingRange,
     Hover,
@@ -46,6 +47,7 @@ import {
     CompletionsProvider,
     DefinitionsProvider,
     DiagnosticsProvider,
+    DocumentHighlightProvider,
     DocumentSymbolsProvider,
     FileReferencesProvider,
     FileRename,
@@ -89,6 +91,7 @@ import {
     is$storeVariableIn$storeDeclaration,
     isTextSpanInGeneratedCode
 } from './features/utils';
+import { DocumentHighlightProviderImpl } from './features/DocumentHighlightProvider';
 import { isAttributeName, isAttributeShorthand, isEventHandler } from './svelte-ast-utils';
 import {
     convertToLocationForReferenceOrDefinition,
@@ -116,6 +119,7 @@ export class TypeScriptPlugin
         SelectionRangeProvider,
         SignatureHelpProvider,
         SemanticTokensProvider,
+        DocumentHighlightProvider,
         ImplementationProvider,
         TypeDefinitionProvider,
         InlayHintProvider,
@@ -149,6 +153,7 @@ export class TypeScriptPlugin
     private readonly foldingRangeProvider: FoldingRangeProviderImpl;
     private readonly callHierarchyProvider: CallHierarchyProviderImpl;
     private readonly codLensProvider: CodeLensProviderImpl;
+    private readonly documentHeightProvider: DocumentHighlightProviderImpl;
 
     constructor(
         configManager: LSConfigManager,
@@ -208,6 +213,7 @@ export class TypeScriptPlugin
             this.implementationProvider,
             this.configManager
         );
+        this.documentHeightProvider = new DocumentHighlightProviderImpl(this.lsAndTsDocResolver);
     }
 
     async getDiagnostics(
@@ -688,6 +694,13 @@ export class TypeScriptPlugin
         return this.codLensProvider.resolveCodeLens(document, codeLensToResolve, cancellationToken);
     }
 
+    async findDocumentHighlight(
+        document: Document,
+        position: Position
+    ): Promise<DocumentHighlight[] | null> {
+        return this.documentHeightProvider.findDocumentHighlight(document, position);
+    }
+
     private featureEnabled(feature: keyof LSTypescriptConfig) {
         return (
             this.configManager.enabled('typescript.enable') &&
diff --git a/packages/language-server/src/plugins/typescript/features/DocumentHighlightProvider.ts b/packages/language-server/src/plugins/typescript/features/DocumentHighlightProvider.ts
new file mode 100644
index 000000000..7df9fd881
--- /dev/null
+++ b/packages/language-server/src/plugins/typescript/features/DocumentHighlightProvider.ts
@@ -0,0 +1,312 @@
+import ts from 'typescript';
+import { Position, DocumentHighlight } from 'vscode-languageserver-protocol';
+import { DocumentHighlightKind, Range } from 'vscode-languageserver-types';
+import { Document, inStyleOrScript } from '../../../lib/documents';
+import { flatten, isSamePosition } from '../../../utils';
+import { DocumentHighlightProvider } from '../../interfaces';
+import { LSAndTSDocResolver } from '../LSAndTSDocResolver';
+import { convertToLocationRange } from '../utils';
+import { isInGeneratedCode } from './utils';
+import { SvelteDocumentSnapshot } from '../DocumentSnapshot';
+// @ts-ignore
+import { TemplateNode } from 'svelte/types/compiler/interfaces';
+import { walkSvelteAst } from '../svelte-ast-utils';
+
+type RangeTupleArray = Array<[start: number, end: number]>;
+
+export class DocumentHighlightProviderImpl implements DocumentHighlightProvider {
+    constructor(private readonly lsAndTsDocResolver: LSAndTSDocResolver) {}
+    async findDocumentHighlight(
+        document: Document,
+        position: Position
+    ): Promise<DocumentHighlight[] | null> {
+        const { tsDoc } = await this.lsAndTsDocResolver.getLsForSyntheticOperations(document);
+
+        const svelteResult = await this.getSvelteDocumentHighlight(document, tsDoc, position);
+
+        if (svelteResult) {
+            return svelteResult;
+        }
+
+        const { lang } = await this.lsAndTsDocResolver.getLSAndTSDoc(document);
+
+        const offset = tsDoc.offsetAt(tsDoc.getGeneratedPosition(position));
+        const highlights = lang
+            .getDocumentHighlights(tsDoc.filePath, offset, [tsDoc.filePath])
+            ?.filter((highlight) => highlight.fileName === tsDoc.filePath);
+
+        if (!highlights?.length) {
+            return null;
+        }
+
+        const result = flatten(highlights.map((highlight) => highlight.highlightSpans))
+            .filter(this.notInGeneratedCode(tsDoc.getFullText()))
+            .map((highlight) =>
+                DocumentHighlight.create(
+                    convertToLocationRange(tsDoc, highlight.textSpan),
+                    this.convertHighlightKind(highlight)
+                )
+            )
+            .filter((highlight) => !isSamePosition(highlight.range.start, highlight.range.end));
+
+        if (!result.length) {
+            return null;
+        }
+
+        return result;
+    }
+
+    private convertHighlightKind(highlight: ts.HighlightSpan): DocumentHighlightKind | undefined {
+        return highlight.kind === ts.HighlightSpanKind.writtenReference
+            ? DocumentHighlightKind.Write
+            : DocumentHighlightKind.Read;
+    }
+
+    private async getSvelteDocumentHighlight(
+        document: Document,
+        tsDoc: SvelteDocumentSnapshot,
+        position: Position
+    ): Promise<DocumentHighlight[] | null> {
+        if (inStyleOrScript(document, position)) {
+            return null;
+        }
+
+        const offset = document.offsetAt(position);
+
+        const offsetStart = Math.max(offset - 10, 0);
+        const charactersAroundOffset = document
+            .getText()
+            // use last 10 and next 10 characters, should cover 99% of all cases
+            .substr(offsetStart, 20);
+
+        if (
+            !['#', '/', ':', '@', 'then', 'catch'].some((keyword) =>
+                charactersAroundOffset.includes(keyword)
+            )
+        ) {
+            return null;
+        }
+
+        const candidate = this.findCandidateSvelteTag(tsDoc, offset);
+
+        if (!candidate) {
+            return null;
+        }
+
+        if (candidate.type.endsWith('Tag')) {
+            return this.getTagHighlight(offset, document, candidate);
+        }
+
+        if (candidate.type.endsWith('Block')) {
+            return this.getBlockHighlight(offset, document, candidate);
+        }
+
+        return null;
+    }
+
+    private findCandidateSvelteTag(tsDoc: SvelteDocumentSnapshot, offset: number) {
+        let candidate: TemplateNode | undefined;
+        const subBlocks = ['ThenBlock', 'CatchBlock', 'PendingBlock', 'ElseBlock'];
+
+        tsDoc.walkSvelteAst({
+            enter(node, parent, key) {
+                if (node.type === 'Fragment') {
+                    return;
+                }
+
+                const templateNode = node as TemplateNode;
+                const isWithin = templateNode.start <= offset && templateNode.end >= offset;
+
+                const canSkip =
+                    !isWithin ||
+                    key === 'expression' ||
+                    key === 'context' ||
+                    ((parent.type === 'InlineComponent' || parent.type === 'Element') &&
+                        key !== 'children');
+
+                if (canSkip) {
+                    this.skip();
+                    return;
+                }
+
+                if (node.type.endsWith('Tag')) {
+                    candidate = templateNode;
+                    return;
+                }
+
+                // don't use sub-blocks so we can highlight the whole block
+                if (node.type.endsWith('Block') && !subBlocks.includes(node.type)) {
+                    if (
+                        // else if
+                        node.type === 'IfBlock' &&
+                        parent.type === 'ElseBlock' &&
+                        parent.start === node.start
+                    ) {
+                        return;
+                    }
+                    candidate = templateNode;
+                    return;
+                }
+            }
+        });
+
+        return candidate;
+    }
+
+    private getTagHighlight(
+        offset: number,
+        document: Document,
+        candidate: TemplateNode
+    ): DocumentHighlight[] | null {
+        const name =
+            candidate.type === 'RawMustacheTag'
+                ? 'html'
+                : candidate.type.replace('Tag', '').toLocaleLowerCase();
+
+        const startTag = '@' + name;
+        const indexOfName = document.getText().indexOf(startTag, candidate.start);
+
+        if (indexOfName < 0 || indexOfName > offset || candidate.start + startTag.length < offset) {
+            return null;
+        }
+
+        return [
+            {
+                kind: DocumentHighlightKind.Read,
+                range: Range.create(
+                    document.positionAt(indexOfName),
+                    document.positionAt(indexOfName + startTag.length)
+                )
+            }
+        ];
+    }
+
+    private getBlockHighlight(
+        offset: number,
+        document: Document,
+        candidate: TemplateNode
+    ): DocumentHighlight[] | null {
+        const name = candidate.type.replace('Block', '').toLowerCase();
+
+        const startTag = '#' + name;
+        const startTagStart = document.getText().indexOf(startTag, candidate.start);
+
+        if (startTagStart < 0) {
+            return null;
+        }
+
+        const ranges: RangeTupleArray = [];
+
+        ranges.push([startTagStart, startTagStart + startTag.length]);
+
+        const content = document.getText();
+        const endTag = '/' + name;
+        const endTagStart = content.lastIndexOf(endTag, candidate.end);
+
+        if (endTagStart < startTagStart) {
+            return null; // can happen in loose parser mode for unclosed tags
+        }
+
+        ranges.push([endTagStart, endTagStart + endTag.length]);
+
+        if (candidate.type === 'EachBlock' && candidate.else) {
+            const elseStart = content.lastIndexOf(':else', candidate.else.start);
+
+            ranges.push([elseStart, elseStart + ':else'.length]);
+        }
+
+        ranges.push(
+            ...this.getElseHighlightsForIfBlock(candidate, content),
+            ...this.getAwaitBlockHighlight(candidate, content)
+        );
+
+        if (!ranges.some(([start, end]) => offset >= start && offset <= end)) {
+            return null;
+        }
+
+        return ranges.map(([start, end]) => ({
+            range: Range.create(document.positionAt(start), document.positionAt(end)),
+            kind: DocumentHighlightKind.Read
+        }));
+    }
+
+    private getElseHighlightsForIfBlock(candidate: TemplateNode, content: string): RangeTupleArray {
+        if (candidate.type !== 'IfBlock' || !candidate.else) {
+            return [];
+        }
+
+        const ranges = new Map<number, RangeTupleArray[number]>();
+
+        walkSvelteAst(candidate.else, {
+            enter(node) {
+                const templateNode = node as TemplateNode;
+                if (templateNode.type === 'IfBlock' && templateNode.elseif) {
+                    const elseIfStart = content.lastIndexOf(
+                        ':else if',
+                        templateNode.expression.start
+                    );
+
+                    if (elseIfStart > 0) {
+                        ranges.set(elseIfStart, [elseIfStart, elseIfStart + ':else if'.length]);
+                    }
+                }
+
+                if (templateNode.type === 'ElseBlock') {
+                    const elseStart = content.lastIndexOf(':else', templateNode.start);
+
+                    if (
+                        elseStart > 0 &&
+                        content.slice(elseStart, elseStart + ':else if'.length) !== ':else if'
+                    ) {
+                        ranges.set(elseStart, [elseStart, elseStart + ':else'.length]);
+                    }
+                }
+            }
+        });
+
+        return Array.from(ranges.values());
+    }
+
+    private getAwaitBlockHighlight(candidate: TemplateNode, content: string): RangeTupleArray {
+        if (candidate.type !== 'AwaitBlock' || (candidate.then.skip && candidate.catch.skip)) {
+            return [];
+        }
+
+        const ranges: RangeTupleArray = [];
+
+        if (candidate.value) {
+            const thenKeyword = candidate.pending.skip ? 'then' : ':then';
+
+            const thenStart = content.lastIndexOf(thenKeyword, candidate.value.start);
+
+            ranges.push([thenStart, thenStart + thenKeyword.length]);
+        }
+
+        // {#await promise catch error} or {:catch error}
+        if (candidate.error) {
+            const catchKeyword = candidate.pending.skip && candidate.then.skip ? 'catch' : ':catch';
+
+            const catchStart = content.lastIndexOf(catchKeyword, candidate.error.start);
+
+            ranges.push([catchStart, catchStart + catchKeyword.length]);
+        } else if (!candidate.catch.skip) {
+            // {:catch}
+
+            const catchStart = content.indexOf(':catch', candidate.catch.start);
+
+            ranges.push([catchStart, catchStart + ':catch'.length]);
+        }
+
+        return ranges;
+    }
+
+    private notInGeneratedCode(text: string) {
+        return (ref: ts.HighlightSpan) => {
+            return !isInGeneratedCode(
+                text,
+                ref.textSpan.start,
+                ref.textSpan.start + ref.textSpan.length
+            );
+        };
+    }
+}
diff --git a/packages/language-server/src/server.ts b/packages/language-server/src/server.ts
index 9e7f4eeda..04b05458f 100644
--- a/packages/language-server/src/server.ts
+++ b/packages/language-server/src/server.ts
@@ -319,7 +319,10 @@ export function startServer(options?: LSOptions) {
                 foldingRangeProvider: true,
                 codeLensProvider: {
                     resolveProvider: true
-                }
+                },
+                documentHighlightProvider:
+                    evt.initializationOptions?.configuration?.svelte.plugin.svelte
+                        ?.documentHighlight?.enable ?? true
             }
         };
     });
@@ -489,6 +492,9 @@ export function startServer(options?: LSOptions) {
 
         return pluginHost.resolveCodeLens(data, codeLens, token);
     });
+    connection.onDocumentHighlight((evt) =>
+        pluginHost.findDocumentHighlight(evt.textDocument, evt.position)
+    );
 
     const diagnosticsManager = new DiagnosticsManager(
         connection.sendDiagnostics,
diff --git a/packages/language-server/src/utils.ts b/packages/language-server/src/utils.ts
index a79c49999..1a136ed0e 100644
--- a/packages/language-server/src/utils.ts
+++ b/packages/language-server/src/utils.ts
@@ -250,6 +250,9 @@ export function modifyLines(
         .join('\r\n');
 }
 
+export function isSamePosition(position: Position, another: Position) {
+    return position.line === another.line && position.character === another.character;
+}
 /**
  * Like array.filter, but asynchronous
  */
diff --git a/packages/language-server/test/plugins/css/CSSPlugin.test.ts b/packages/language-server/test/plugins/css/CSSPlugin.test.ts
index 6c907776c..5e9c4bf32 100644
--- a/packages/language-server/test/plugins/css/CSSPlugin.test.ts
+++ b/packages/language-server/test/plugins/css/CSSPlugin.test.ts
@@ -9,7 +9,9 @@ import {
     CompletionContext,
     SelectionRange,
     CompletionTriggerKind,
-    FoldingRangeKind
+    FoldingRangeKind,
+    DocumentHighlight,
+    DocumentHighlightKind
 } from 'vscode-languageserver';
 import { DocumentManager, Document } from '../../../src/lib/documents';
 import { CSSPlugin } from '../../../src/plugins';
@@ -501,4 +503,85 @@ describe('CSS Plugin', () => {
             ]);
         });
     });
+
+    describe('document highlight', () => {
+        it('provide document highlight', () => {
+            const { plugin, document } = setup('<style>.hi {} button.hi {}</style>');
+
+            const highlight = plugin.findDocumentHighlight(document, Position.create(0, 9));
+
+            assert.deepStrictEqual(highlight, <DocumentHighlight[]>[
+                {
+                    range: {
+                        start: {
+                            line: 0,
+                            character: 7
+                        },
+                        end: {
+                            line: 0,
+                            character: 10
+                        }
+                    },
+                    kind: DocumentHighlightKind.Write
+                },
+                {
+                    range: {
+                        start: {
+                            line: 0,
+                            character: 20
+                        },
+                        end: {
+                            line: 0,
+                            character: 23
+                        }
+                    },
+                    kind: DocumentHighlightKind.Read
+                }
+            ]);
+        });
+
+        it('provide document highlight for style attribute', () => {
+            const { plugin, document } = setup('<div style="position: relative"></div>');
+
+            const highlight = plugin.findDocumentHighlight(document, Position.create(0, 13));
+
+            assert.deepStrictEqual(highlight, <DocumentHighlight[]>[
+                {
+                    range: {
+                        start: {
+                            line: 0,
+                            character: 12
+                        },
+                        end: {
+                            line: 0,
+                            character: 20
+                        }
+                    },
+                    kind: DocumentHighlightKind.Read
+                }
+            ]);
+        });
+
+        it('provide word highlight for unsupported languages', () => {
+            const { plugin, document } = setup('<style lang="postcss">.hi {}</style>');
+
+            const highlight = plugin.findDocumentHighlight(document, Position.create(0, 25));
+
+            assert.deepStrictEqual(highlight, <DocumentHighlight[]>[
+                {
+                    range: {
+                        start: {
+                            line: 0,
+                            character: 22
+                        },
+                        end: {
+                            line: 0,
+                            character: 25
+                        }
+                    },
+                    kind: DocumentHighlightKind.Text
+                }
+            ]);
+        });
+    });
 });
diff --git a/packages/language-server/test/plugins/html/HTMLPlugin.test.ts b/packages/language-server/test/plugins/html/HTMLPlugin.test.ts
index aaad0f52c..f112baec3 100644
--- a/packages/language-server/test/plugins/html/HTMLPlugin.test.ts
+++ b/packages/language-server/test/plugins/html/HTMLPlugin.test.ts
@@ -8,11 +8,13 @@ import {
     CompletionItemKind,
     InsertTextFormat,
     CompletionTriggerKind,
-    FoldingRange
+    FoldingRange,
+    DocumentHighlightKind
 } from 'vscode-languageserver';
 import { HTMLPlugin } from '../../../src/plugins';
 import { DocumentManager, Document } from '../../../src/lib/documents';
 import { LSConfigManager } from '../../../src/ls-config';
+import { DocumentHighlight } from 'vscode-languageserver-types';
 import { VERSION } from 'svelte/compiler';
 
 const isSvelte5Plus = Number(VERSION.split('.')[0]) >= 5;
@@ -294,4 +296,61 @@ describe('HTML Plugin', () => {
             { startLine: 1, endLine: 2 }
         ]);
     });
+
+    it('provide document highlight', () => {
+        const { plugin, document } = setup('<div></div>');
+
+        const highlight = plugin.findDocumentHighlight(document, Position.create(0, 1));
+
+        assert.deepStrictEqual(highlight, <DocumentHighlight[]>[
+            {
+                range: {
+                    start: {
+                        line: 0,
+                        character: 1
+                    },
+                    end: {
+                        line: 0,
+                        character: 4
+                    }
+                },
+                kind: DocumentHighlightKind.Read
+            },
+            {
+                range: {
+                    start: {
+                        line: 0,
+                        character: 7
+                    },
+                    end: {
+                        line: 0,
+                        character: 10
+                    }
+                },
+                kind: DocumentHighlightKind.Read
+            }
+        ]);
+    });
+
+    it('provide word highlight for unsupported languages', () => {
+        const { plugin, document } = setup('<template lang="pug">\n  div\n  p</template>');
+
+        const highlight = plugin.findDocumentHighlight(document, Position.create(1, 5));
+
+        assert.deepStrictEqual(highlight, <DocumentHighlight[]>[
+            {
+                range: {
+                    start: {
+                        line: 1,
+                        character: 2
+                    },
+                    end: {
+                        line: 1,
+                        character: 5
+                    }
+                },
+                kind: DocumentHighlightKind.Text
+            }
+        ]);
+    });
 });
diff --git a/packages/language-server/test/plugins/typescript/features/DocumentHighlightProvider.test.ts b/packages/language-server/test/plugins/typescript/features/DocumentHighlightProvider.test.ts
new file mode 100644
index 000000000..8cab8c662
--- /dev/null
+++ b/packages/language-server/test/plugins/typescript/features/DocumentHighlightProvider.test.ts
@@ -0,0 +1,274 @@
+import assert from 'assert';
+import path from 'path';
+import ts from 'typescript';
+import { DocumentHighlight, DocumentHighlightKind } from 'vscode-languageserver';
+import { Document, DocumentManager } from '../../../../src/lib/documents';
+import { LSConfigManager } from '../../../../src/ls-config';
+import { LSAndTSDocResolver } from '../../../../src/plugins';
+import { DocumentHighlightProviderImpl } from '../../../../src/plugins/typescript/features/DocumentHighlightProvider';
+import { pathToUrl } from '../../../../src/utils';
+import { serviceWarmup } from '../test-utils';
+
+const testDir = path.join(__dirname, '..');
+
+describe('DocumentHighlightProvider', function () {
+    const highlightTestDir = path.join(testDir, 'testfiles', 'document-highlight');
+    serviceWarmup(this, highlightTestDir);
+
+    function getFullPath(filename: string) {
+        return path.join(highlightTestDir, filename);
+    }
+
+    function setup(filename: string) {
+        const docManager = new DocumentManager(
+            (textDocument) => new Document(textDocument.uri, textDocument.text)
+        );
+        const lsAndTsDocResolver = new LSAndTSDocResolver(
+            docManager,
+            [testDir],
+            new LSConfigManager()
+        );
+        const provider = new DocumentHighlightProviderImpl(lsAndTsDocResolver);
+        const filePath = getFullPath(filename);
+        const document = docManager.openClientDocument({
+            uri: pathToUrl(filePath),
+            text: ts.sys.readFile(filePath) || ''
+        });
+        return { provider, document };
+    }
+
+    it('find document highlight', async () => {
+        const { document, provider } = setup('document-highlight.svelte');
+
+        const highlight = await provider.findDocumentHighlight(document, {
+            line: 1,
+            character: 9
+        });
+
+        assert.deepStrictEqual(highlight, <DocumentHighlight[]>[
+            {
+                range: {
+                    start: {
+                        line: 1,
+                        character: 8
+                    },
+                    end: {
+                        line: 1,
+                        character: 12
+                    }
+                },
+                kind: DocumentHighlightKind.Write
+            },
+            {
+                range: {
+                    start: {
+                        line: 3,
+                        character: 8
+                    },
+                    end: {
+                        line: 3,
+                        character: 12
+                    }
+                },
+                kind: DocumentHighlightKind.Read
+            },
+            {
+                range: {
+                    start: {
+                        line: 8,
+                        character: 1
+                    },
+                    end: {
+                        line: 8,
+                        character: 5
+                    }
+                },
+                kind: DocumentHighlightKind.Read
+            }
+        ]);
+    });
+
+    describe('DocumentHighlightProvider (svelte blocks/tags)', () => {
+        async function testSameHighlight(
+            content: string,
+            tests: number[],
+            expected: Array<[start: number, end: number]>
+        ) {
+            const { provider, document } = setup(content);
+
+            for (const position of tests) {
+                await testOne(document, provider, position, expected);
+            }
+        }
+
+        function setup(content: string) {
+            const docManager = new DocumentManager(
+                (textDocument) => new Document(textDocument.uri, textDocument.text)
+            );
+            const lsAndTsDocResolver = new LSAndTSDocResolver(
+                docManager,
+                [testDir],
+                new LSConfigManager()
+            );
+            const provider = new DocumentHighlightProviderImpl(lsAndTsDocResolver);
+            const filePath = getFullPath(`svelte.virtual${Math.random().toFixed(16)}.svelte`);
+            const document = docManager.openClientDocument({
+                uri: pathToUrl(filePath),
+                text: content
+            });
+            return { provider, document };
+        }
+
+        async function testOne(
+            document: Document,
+            provider: DocumentHighlightProviderImpl,
+            character: number,
+            expected: Array<[start: number, end: number]> | null
+        ) {
+            const documentHighlight = await provider.findDocumentHighlight(document, {
+                line: 0,
+                character
+            });
+
+            assert.deepStrictEqual(
+                documentHighlight?.sort(
+                    (a, b) => a.range.start.character - b.range.start.character
+                ),
+                expected?.map(
+                    ([start, end]): DocumentHighlight => ({
+                        kind: DocumentHighlightKind.Read,
+                        range: {
+                            start: { line: 0, character: start },
+                            end: { line: 0, character: end }
+                        }
+                    })
+                )
+            );
+        }
+
+        it('should return null for style and script', async () => {
+            const { provider, document } = setup('<style></style><script></script>');
+            await testOne(document, provider, 7, null);
+            await testOne(document, provider, 15, null);
+        });
+
+        it('get highlight for key block', async () => {
+            await testSameHighlight(
+                '{#key foo}{/key}',
+                [2, 12],
+                [
+                    [1, 5],
+                    [11, 15]
+                ]
+            );
+        });
+
+        it('get highlight for each block', async () => {
+            await testSameHighlight(
+                '{#each expression as name}{:else}{/each}',
+                [2, 28, 35],
+                [
+                    [1, 6],
+                    [27, 32],
+                    [34, 39]
+                ]
+            );
+        });
+
+        it('get highlight for if block', async () => {
+            await testSameHighlight(
+                '{#if expression}{:else}{/if}',
+                [2, 18, 25],
+                [
+                    [1, 4],
+                    [17, 22],
+                    [24, 27]
+                ]
+            );
+        });
+
+        it('get highlight for if block with else if', async () => {
+            await testSameHighlight(
+                '{#if expression}{:else if foo}{:else}{/if}',
+                [2, 18, 32, 39],
+                [
+                    [1, 4],
+                    [17, 25],
+                    [31, 36],
+                    [38, 41]
+                ]
+            );
+        });
+
+        it("doesn't get highlights from another if block nested inside", async () => {
+            const { provider, document } = setup('{#if expression}{:else if hi}{#if hi}{/if}{/if}');
+            await testOne(document, provider, 2, [
+                [1, 4],
+                [17, 25],
+                [43, 46]
+            ]);
+        });
+
+        it('highlight nested if block', async () => {
+            const { provider, document } = setup('{#if expression}{:else if hi}{#if hi}{/if}{/if}');
+            await testOne(document, provider, 31, [
+                [30, 33],
+                [38, 41]
+            ]);
+        });
+
+        it('get highlight for await block', async () => {
+            await testSameHighlight(
+                '{#await expression}{:then name}{:catch name}{/await}',
+                [2, 21, 33, 46],
+                [
+                    [1, 7],
+                    [20, 25],
+                    [32, 38],
+                    [45, 51]
+                ]
+            );
+        });
+
+        it('get highlight for await block (skip pending)', async () => {
+            await testSameHighlight(
+                '{#await expression then name} {/await}',
+                [2, 20, 31],
+                [
+                    [1, 7],
+                    [19, 23],
+                    [31, 37]
+                ]
+            );
+        });
+
+        it('get highlight for await block (skip pending and then)', async () => {
+            await testSameHighlight(
+                '{#await expression catch name}{/await}',
+                [2, 20, 31],
+                [
+                    [1, 7],
+                    [19, 24],
+                    [31, 37]
+                ]
+            );
+        });
+
+        it('get highlight for debug tag', async () => {
+            const { provider, document } = setup('{@debug name}');
+            await testOne(document, provider, 2, [[1, 7]]);
+        });
+
+        it('get highlight for html tag', async () => {
+            const { provider, document } = setup('{@html name}');
+            await testOne(document, provider, 2, [[1, 6]]);
+        });
+
+        it('get highlight for const tag', async () => {
+            const { provider, document } = setup(
+                '{#each expression as item}{@const name = item}{/each}'
+            );
+            await testOne(document, provider, 28, [[27, 33]]);
+        });
+    });
+});
diff --git a/packages/language-server/test/plugins/typescript/testfiles/document-highlight/document-highlight.svelte b/packages/language-server/test/plugins/typescript/testfiles/document-highlight/document-highlight.svelte
new file mode 100644
index 000000000..22626b885
--- /dev/null
+++ b/packages/language-server/test/plugins/typescript/testfiles/document-highlight/document-highlight.svelte
@@ -0,0 +1,9 @@
+<script>
+    let prop = 1;
+
+    if (prop) {
+
+    }
+</script>
+
+{prop}
\ No newline at end of file
diff --git a/packages/svelte-vscode/package.json b/packages/svelte-vscode/package.json
index 30ab2dd03..d80c1ca6c 100644
--- a/packages/svelte-vscode/package.json
+++ b/packages/svelte-vscode/package.json
@@ -399,6 +399,12 @@
                         "none",
                         "ts"
                     ]
+                },
+                "svelte.plugin.svelte.documentHighlight.enable": {
+                    "type": "boolean",
+                    "default": true,
+                    "title": "Svelte: Document Highlight",
+                    "description": "Enable document highlight support. Requires a restart."
                 }
             }
         },