### Development Setup and Branching Source: https://github.com/janosh/svelte-toc/blob/main/contributing.md Commands to clone the repository, install dependencies, start the development server, and create a new branch for contributions. ```shell git clone https://github.com/janosh/svelte-toc cd svelte-toc pnpm install pnpm dev ``` ```shell git checkout -b my-cool-new-feature # or git checkout -b docs-on-something # or git checkout -b test-some-feature ``` -------------------------------- ### Jupyter Kernel Failure Handling with Quick Fix Source: https://github.com/janosh/svelte-toc/blob/main/src/routes/(demos)/long-page/+page.md Improvements have been made to handle kernel failures more effectively. A diagnostic message and a Quick Fix are now provided for `!pip install` usage, guiding users to use `%pip install` instead. Error messages during kernel startup or stop failures are displayed in cell outputs with instructions for resolution, ensuring users are aware of and can fix issues. ```Jupyter # Diagnostic message and Quick Fix for '!pip install' vs '%pip install' # Example of a potential diagnostic message: # "Usage of '!pip install' is discouraged. Use '%pip install' for package installation within Jupyter notebooks." # Error messages displayed in cell outputs for kernel failures: # Example: "Kernel died unexpectedly. Please restart the kernel or check the logs for more information." ``` -------------------------------- ### Install Svelte ToC Source: https://github.com/janosh/svelte-toc/blob/main/readme.md Installs the svelte-toc package as a development dependency using npm. ```sh npm install --dev svelte-toc ``` -------------------------------- ### Java Extension Pack Welcome Experience Source: https://github.com/janosh/svelte-toc/blob/main/src/routes/(demos)/long-page/+page.md The Extension Pack for Java now includes an in-product welcome experience. This feature guides users through configuring and learning about Java development in VS Code, including setting up the Java runtime, frameworks, project debugging, and running tests. ```Java // No specific code snippet available, this is a feature description. ``` -------------------------------- ### Svelte-TOC Usage Example Source: https://github.com/janosh/svelte-toc/blob/main/readme.md An example of how to apply custom CSS variables to the Svelte-TOC component to override default styling, demonstrating prop-based customization. ```svelte ``` -------------------------------- ### Override Configuration Defaults Source: https://github.com/janosh/svelte-toc/blob/main/src/routes/(demos)/long-page/+page.md Allows overriding default settings for other registered configurations using the `configurationDefaults` contribution point in `package.json`. This example sets `files.autoSave` to `onFocusChange`. Configurations with `application` or `machine` scopes cannot be overridden. ```json { "configurationDefaults": { "files.autoSave": "onFocusChange" } } ``` -------------------------------- ### CSS for Clicked Headings Source: https://github.com/janosh/svelte-toc/blob/main/readme.md Example CSS to style headings that have been clicked, providing visual feedback. The `.toc-clicked` class is applied for a specified duration. ```css :is(h2, h3, h4) { transition: 0.3s; } .toc-clicked { color: cornflowerblue; } ``` -------------------------------- ### Multiple Language Specific Editor Settings Source: https://github.com/janosh/svelte-toc/blob/main/src/routes/(demos)/long-page/+page.md Demonstrates how to configure editor settings for multiple languages simultaneously in VS Code's `settings.json`. This example sets `editor.maxTokenizationLineLength` for both JavaScript and TypeScript. ```json "javascript","typescript]": { "editor.maxTokenizationLineLength": 2500 } ``` -------------------------------- ### Jupyter Kernel Performance Improvements Source: https://github.com/janosh/svelte-toc/blob/main/src/routes/(demos)/long-page/+page.md Significant performance improvements have been made to the startup of Jupyter kernels, particularly for Python. Users will experience a 2x speedup when starting kernels for previously opened notebooks, and restarting Python kernels is also faster. These improvements address issues related to pre-warming kernels, faster activation of Python environments (like Conda), and avoiding unnecessary searches for Jupyter packages. ```Jupyter # Performance improvements related to Jupyter kernel startup: # - Support pre-warming kernels to improve startup experience of notebooks. ([#7903](https://github.com/microsoft/vscode-jupyter/issues/7903)) # - Faster activation of Python environments such as Conda. ([#8342](https://github.com/microsoft/vscode-jupyter/pull/8342)) # - Avoid starting default kernel when starting jupyter. ([#8185](https://github.com/microsoft/vscode-jupyter/issues/8185)) # - Avoid looking for IPyKernel when we've found it once before. ([#8196](https://github.com/microsoft/vscode-jupyter/issues/8196)) # - Avoid unnecessarily searching for `Jupyter` packages when `Jupyter` runtime isn't required to start kernels. ([#8350](https://github.com/microsoft/vscode-jupyter/issues/8350), [#8352](https://github.com/Microsoft/vscode-jupyter/issues/8352)) ``` -------------------------------- ### Publish Pre-release Extensions Source: https://github.com/janosh/svelte-toc/blob/main/src/routes/(demos)/long-page/+page.md Enables extension authors to publish pre-release versions of their extensions using the `vsce` command-line tool with the `--pre-release` flag. It also recommends a versioning strategy for release and pre-release versions (e.g., `major.EVEN_NUMBER.patch` for release and `major.ODD_NUMBER.patch` for pre-release). ```bash vsce publish --pre-release ``` -------------------------------- ### VS Code Keyboard Shortcut Notation Source: https://github.com/janosh/svelte-toc/blob/main/src/routes/(demos)/long-page/+page.md Illustrates the notation used in VS Code documentation to represent keyboard shortcuts, such as `kb(workbench.action.selectTheme)` for selecting a theme and `kbstyle(Enter)` for pressing the Enter key. ```text kb(workbench.action.selectTheme) kbstyle(Enter) ``` -------------------------------- ### VS Code Settings Configuration Source: https://github.com/janosh/svelte-toc/blob/main/src/routes/(demos)/long-page/+page.md Shows how to configure VS Code settings, specifically the `problems.sortOrder` to control the navigation order of problems (errors, warnings) by `severity` or `position`, and `screencastMode.keyboardShortcutsFormat` to display command names in screencast mode. ```json "problems.sortOrder": "position" "screencastMode.keyboardShortcutsFormat" ``` -------------------------------- ### Release Process Source: https://github.com/janosh/svelte-toc/blob/main/contributing.md Commands for updating the version, generating the changelog, updating coverage, committing changes, tagging the release, and pushing to origin. ```shell pnpm changelog # or npm run changelog ``` ```shell pnpm update-coverage ``` ```shell git add package.json changelog.md readme.md git commit -m vx.y.z git tag $(git log -1 --pretty=%B) git push && git push --tags ``` -------------------------------- ### Running Tests Source: https://github.com/janosh/svelte-toc/blob/main/contributing.md Command to execute the full test suite to ensure changes haven't introduced regressions. ```shell pnpm test ``` -------------------------------- ### VS Code for the Web Azure Repos Integration Source: https://github.com/janosh/svelte-toc/blob/main/src/routes/(demos)/long-page/+page.md Enables opening Azure Repos repositories directly in vscode.dev. This includes a keyboard shortcut ('.') in the Files hub and new entry points via the 'Open Remote Repositories...' menu. Legacy Azure DevOps URLs can also be used by prefixing them with 'https://vscode.dev'. ```APIDOC VSCode.dev Azure Repos Integration: Open Repository Shortcut: Press '.' in the Files hub of Azure Repos to open the repository in https://vscode.dev. New Entry Point: Use 'Open Remote Repository...' > 'Open Repository from Azure Repos...' in the remote picker to connect. Legacy URL Support: Prefix legacy Azure DevOps URLs (e.g., `https://.visualstudio.com`) with `https://vscode.dev` to open in vscode.dev. ``` -------------------------------- ### Basic Svelte ToC Usage Source: https://github.com/janosh/svelte-toc/blob/main/readme.md Demonstrates the basic usage of the Svelte ToC component in a Svelte application. It imports the Toc component and renders it, along with main content containing various heading levels. ```svelte

Page Title

Section

Subsection

Next Section

Another Subsection

``` -------------------------------- ### VS Code Proposed API Structure Update Source: https://github.com/janosh/svelte-toc/blob/main/src/routes/(demos)/long-page/+page.md Explains the new structure for managing VS Code API proposals, moving from a single file to individual files per proposal. It details how extensions should reference these proposals in `package.json` using the `enabledApiProposals` property. ```json { "name": "my-extension", "version": "1.0.0", "engines": { "vscode": ">=1.63.0" }, "enabledApiProposals": [ "languageStatus", "tabs" ] } ``` ```APIDOC vscode.proposed.languageStatus.d.ts - The language status item proposal. vscode.proposed.tabs.d.ts - The editor tabs and tab groups proposed API. Migration Flow: 1. Add proposal names to `package.json#enabledApiProposals`. 2. Run `vscode-dts dev` to download corresponding `.d.ts` files. 3. Program against the proposal. Note: Extensions using proposed APIs cannot be published and cannot be used as-is. ``` -------------------------------- ### Quick Pick API: Inline Buttons and Scroll Position Source: https://github.com/janosh/svelte-toc/blob/main/src/routes/(demos)/long-page/+page.md Details enhancements to the VS Code Quick Pick API, allowing extensions to add buttons to `QuickPickItem`s and maintain scroll position when updating items. This facilitates richer UI interactions and smoother user experiences. ```typescript import * as vscode from 'vscode'; const quickPick = vscode.window.createQuickPick(); quickPick.items = [ { label: 'Item 1', buttons: [ { iconPath: new vscode.ThemeIcon('close'), tooltip: 'Remove item' } ] } ]; quickPick.onDidTriggerItemButton(event => { console.log(`Button clicked for item: ${event.item.label}`); }); quickPick.keepScrollPosition = true; quickPick.show(); ``` ```APIDOC QuickPickItem.buttons: QuickPickItemButton[] - An array of buttons to display on the item. QuickPickItemButton: - iconPath: ThemeIcon | Uri - tooltip: string QuickPick.onDidTriggerItemButton(listener: (event: { item: QuickPickItem }) => any, thisArg?: any): Disposable - Fired when an item button is clicked. QuickPick.keepScrollPosition: boolean - Controls whether the scroll position is maintained when items are updated. ``` -------------------------------- ### Authentication Session Management Options Source: https://github.com/janosh/svelte-toc/blob/main/src/routes/(demos)/long-page/+page.md Demonstrates how to use `forceNewSession` and `silent` options when retrieving authentication sessions. `forceNewSession` prompts the user to sign in again, potentially fixing session issues. `silent` attempts to retrieve a session without user interaction, only succeeding if the extension is trusted. ```APIDOC AuthenticationGetSessionOptions: forceNewSession: boolean | { detail: string } - If true, forces the user to sign in again. - If an object with a `detail` string, shows a custom message to the user. silent: boolean - If true, attempts to retrieve a session silently without user interaction. - Only returns a session if the extension has prior access. ``` -------------------------------- ### Deprecated vs. New Terminal Automation Settings Source: https://github.com/janosh/svelte-toc/blob/main/src/routes/(demos)/long-page/+page.md Illustrates the transition from deprecated terminal automation shell settings to the new, more flexible `automationProfile` settings. The new settings allow for detailed configuration of terminals used for tasks. ```json // Deprecated // "terminal.integrated.automationShell.windows": "C:\\Windows\\System32\\cmd.exe", // New "terminal.integrated.automationProfile.windows": { "path": "C:\\Windows\\System32\\cmd.exe", "icon": "terminal-cmd", "color": "blue" } ``` -------------------------------- ### Debug Adapter Protocol: Execution Control Requests Source: https://github.com/janosh/svelte-toc/blob/main/src/routes/(demos)/long-page/+page.md Details changes to the Debug Adapter Protocol for execution control requests (`continue`, `next`, `stepIn`, `stepOut`, `stepBack`, `reverseContinue`). The spec now clarifies behavior across threads and introduces an optional `singleThread` property for alternative execution semantics. ```APIDOC Execution Control Requests: - continue - next - stepIn - stepOut - stepBack - reverseContinue These requests now operate with clearer semantics regarding thread handling. Implementations typically resume the current thread while allowing others to run freely, or resume all threads for 'continue'. Optional `singleThread` Property: - Allows for an alternative semantic where step/continue operations affect only the current thread, keeping others suspended. - Requires the `supportsSingleThreadExecutionRequests` capability to be set by the debug adapter. ``` -------------------------------- ### Settings Editor Improvements Source: https://github.com/janosh/svelte-toc/blob/main/src/routes/(demos)/long-page/+page.md Details new features for the VS Code settings editor, allowing for ordered settings, ungrouped categories, and support for number and integer object types. ```APIDOC Settings Editor Enhancements: Ordered Settings: - Individual settings can be ordered using the `order` field. - Ordered settings appear before unordered ones within the same category. Ungrouped Category Support: - Settings can be grouped under the main extension header by setting the category title to the extension's display name. Number and Integer Object Support: - Objects with non-nullable number/integer values are now supported in the Settings editor. ``` -------------------------------- ### Python Extension: Untrusted/Virtual Workspaces Source: https://github.com/janosh/svelte-toc/blob/main/src/routes/(demos)/long-page/+page.md The Python extension offers limited support for untrusted or virtual workspaces. IntelliSense is partial, working only with currently opened files. For untrusted workspaces, only the Pylance language server is supported. For virtual workspaces, both Jedi and Pylance are supported. The status bar indicates these workspace types. ```Python # Limited IntelliSense in untrusted/virtual workspaces: # - Hover, same file completion, and completion for built-ins like print are available. # - Extension limited to working with currently opened files. # Language server support: # - Untrusted workspaces: Pylance only. # - Virtual workspaces: Jedi and Pylance supported. # Status bar indication: # The language item in the Status bar is updated to indicate these situations. ``` -------------------------------- ### Markdown Preview Auto-Open Configuration Source: https://github.com/janosh/svelte-toc/blob/main/src/routes/(demos)/long-page/+page.md Configures VS Code to automatically open Markdown files as previews. This is achieved by associating the '*.md' file pattern with the 'vscode.markdown.preview.editor' editor. ```JSON { "workbench.editorAssociations": { "*.md": "vscode.markdown.preview.editor" } } ``` -------------------------------- ### Updating vscode.d.ts for exactOptionalPropertyTypes Source: https://github.com/janosh/svelte-toc/blob/main/src/routes/(demos)/long-page/+page.md Describes updates made to `vscode.d.ts` to better support TypeScript's `exactOptionalPropertyTypes` compiler option. This includes clarifying optional property assignments and standardizing the use of `?` vs. `| undefined`. ```APIDOC vscode.d.ts Typings Update: Feature: Support for TypeScript's `exactOptionalPropertyTypes` strictness option. Changes: - Clarified which optional properties can be assigned `undefined`. - Increased consistency in the usage of `?` versus `| undefined`. Impact: Extensions using `exactOptionalPropertyTypes` may benefit from more precise type checking. Action Required: Extensions using `exactOptionalPropertyTypes` are encouraged to report any issues encountered with the updated `vscode.d.ts` typings. ``` -------------------------------- ### VS Code Proposed API: QuickPickItem Separators Source: https://github.com/janosh/svelte-toc/blob/main/src/routes/(demos)/long-page/+page.md Demonstrates how to add separators to a Quick Pick UI element in VS Code extensions using a proposed API. This allows for better grouping and visual separation of items within a Quick Pick. ```ts { label: 'APIs', kind: QuickPickItemKind.Separator } ``` -------------------------------- ### Method Signature Completions (TypeScript/JavaScript) Source: https://github.com/janosh/svelte-toc/blob/main/src/routes/(demos)/long-page/+page.md Automatically overrides methods and implements interface methods by inserting the entire method signature. For TypeScript, it also adds necessary imports. This feature requires TypeScript 4.5 and can be enabled/disabled via `typescript.suggest.classMemberSnippets.enabled` and `javascript.suggest.classMemberSnippets.enabled`. ```TypeScript class MyClass { // Suggestion inserts the entire method signature here myMethod(): void { // ... implementation } } ``` ```JavaScript class MyClass { // Suggestion inserts the entire method signature here myMethod() { // ... implementation } } ``` -------------------------------- ### executeCommand Type Signature Update Source: https://github.com/janosh/svelte-toc/blob/main/src/routes/(demos)/long-page/+page.md Explains the updated type signature for `vscode.commands.executeCommand`. The change makes the return type more flexible, allowing explicit specification of expected return types, including `undefined` when necessary. ```APIDOC vscode.commands.executeCommand: Signature: (command: string, ...rest: any[]): Thenable; Description: Executes a VS Code command. The return type `T` can now be explicitly specified. Example Usage: // Explicitly expecting an array of items const items = await vscode.commands.executeCommand('my.command.getItems'); // Explicitly expecting undefined if no items are found const item = await vscode.commands.executeCommand('my.command.getItem', arg1, arg2); // Original signature (less explicit): // export function executeCommand(command: string, ...rest: any[]): Thenable; Note: This change affects typings only and does not alter the function's behavior. ``` -------------------------------- ### Dynamic Notebook Toolbar Label Visibility Source: https://github.com/janosh/svelte-toc/blob/main/src/routes/(demos)/long-page/+page.md Configures the visibility of labels on notebook toolbar actions based on the editor group width. Labels are hidden from right to left as space decreases, and actions move to an overflow menu if necessary. ```json { "notebook.globalToolbarShowLabel": "dynamic" } ``` -------------------------------- ### Breakpoint and Desktop Mode Source: https://github.com/janosh/svelte-toc/blob/main/readme.md Defines the screen width breakpoint for switching between mobile and desktop styles. The `desktop` prop indicates whether the current window width exceeds this breakpoint. ```ts breakpoint: number = 1000 desktop: boolean = true ``` -------------------------------- ### Svelte-TOC HTML Structure Source: https://github.com/janosh/svelte-toc/blob/main/readme.md The basic HTML structure of the Svelte-TOC component, including an aside element containing a button for mobile and a nav element for the table of contents. ```html ``` -------------------------------- ### Configure Quick Diff Whitespace Trimming Source: https://github.com/janosh/svelte-toc/blob/main/src/routes/(demos)/long-page/+page.md Allows configuring the SCM quick diff feature to ignore trimmed whitespace in the left gutter. This setting helps in cleaner diff views by not highlighting changes solely due to whitespace. ```json { "scm.diffDecorationsIgnoreTrimWhitespace": true } ``` -------------------------------- ### Python Module Rename Refactoring Source: https://github.com/janosh/svelte-toc/blob/main/src/routes/(demos)/long-page/+page.md The Python and Pylance extensions now support module rename refactoring. Renaming a Python module prompts the user to update all imports and references. A preview of changes is available before applying. Users can choose to 'Apply Refactoring' or 'Discard Refactoring'. ```Python # Module rename refactoring: # 1. Rename a Python module. # 2. Prompt to change all imports and references. # 3. Option to preview changes before applying. # 4. Actions: 'Apply Refactoring' or 'Discard Refactoring'. ``` -------------------------------- ### Svelte Component with Toc Import Source: https://github.com/janosh/svelte-toc/blob/main/src/routes/(demos)/long-page/+page.md A basic Svelte component that imports the Toc component from '$lib'. This is a common pattern for integrating UI components in Svelte applications. ```svelte ``` -------------------------------- ### Replace Content in Output Channel Source: https://github.com/janosh/svelte-toc/blob/main/src/routes/(demos)/long-page/+page.md Provides a `replace` API for the `OutputChannel` object to replace all existing content in the output channel with new content. The `value` parameter should be a string; falsy values will not be printed. ```typescript /** * Replaces all output from the channel with the given value. * * @param value A string, falsy values will not be printed. */ replace(value: string): void; ``` -------------------------------- ### Gulpfile.ts Task Detection Source: https://github.com/janosh/svelte-toc/blob/main/src/routes/(demos)/long-page/+page.md Demonstrates the support for detecting tasks defined in TypeScript Gulp files (`gulpfile.ts`) by the built-in Gulp extension. ```typescript import * as gulp from 'gulp'; gulp.task('default', () => { console.log('Hello from gulpfile.ts!'); }); gulp.task('build', () => { // build task implementation }); ``` -------------------------------- ### Svelte-TOC CSS Variables Source: https://github.com/janosh/svelte-toc/blob/main/readme.md A comprehensive list of CSS variables provided by Svelte-TOC for styling various aspects of the component, from the main container to individual list items and mobile-specific elements. These variables can be passed as props. ```css /* aside.toc */ --toc-font: 10pt sans-serif; --toc-min-width: ; --toc-width: ; --toc-z-index: ; /* aside.toc > nav */ --toc-overflow: auto; --toc-max-height: 90vh; --toc-padding: 1em 1em 0; /* aside.toc > nav > ol */ --toc-ol-list-style: none; --toc-ol-padding: 0; --toc-ol-margin: ; /* .toc-title */ --toc-title-padding: ; --toc-title-margin: ; --toc-title-font: ; /* aside.toc > nav > ol > li */ --toc-li-color: ; --toc-li-border: ; --toc-li-border-radius: ; --toc-li-margin: ; --toc-li-padding: 2pt 4pt; --toc-li-font: ; /* aside.toc > nav > ol > li:hover */ --toc-li-hover-color: cornflowerblue; --toc-li-hover-bg: ; /* aside.toc > nav > ol > li.active */ --toc-active-bg: cornflowerblue; --toc-active-color: white; --toc-active-li-font: ; --toc-active-border: ; --toc-active-border-width: ; --toc-active-border-radius: 2pt; /* aside.toc > button */ --toc-mobile-btn-bottom: 0; --toc-mobile-btn-font: 2em sans-serif; --toc-mobile-btn-line-height: 0; --toc-mobile-btn-right: 0; --toc-mobile-btn-z-index: 2; --toc-mobile-btn-padding: 2pt 3pt; --toc-mobile-btn-border-radius: 4pt; --toc-mobile-btn-bg: rgba(255, 255, 255, 0.2); --toc-mobile-btn-color: black; /* aside.toc > nav > .toc-title */ --toc-title-margin-top: 0; /* aside.toc.mobile */ --toc-mobile-bottom: 1em; --toc-mobile-right: 1em; /* aside.toc.mobile > nav */ --toc-mobile-border-radius: 3pt; --toc-mobile-right: 1em; --toc-mobile-bg: white; --toc-mobile-width: 18em; --toc-mobile-shadow: ; --toc-mobile-border: ; /* aside.toc.desktop */ --toc-desktop-bg: ; --toc-desktop-aside-margin: ; --toc-desktop-max-width: ; --toc-desktop-sticky-top: 2em; /* aside.toc.desktop > nav */ --toc-desktop-nav-margin: ; ``` -------------------------------- ### Blur Transition Parameters Source: https://github.com/janosh/svelte-toc/blob/main/readme.md Configures parameters for the `transition:blur` effect from `svelte/transition`. Setting this to `null` or `{ duration: 0 }` disables the blur effect. ```ts blurParams: BlurParams | undefined = { duration: 200 } ``` -------------------------------- ### Configure Unicode Highlighting in Editor Source: https://github.com/janosh/svelte-toc/blob/main/src/routes/(demos)/long-page/+page.md Controls the highlighting of invisible and confusable Unicode characters in source code. Settings can be toggled off, and specific characters can be excluded from highlighting. ```json { "editor.unicodeHighlight.invisibleCharacters": true, "editor.unicodeHighlight.ambiguousCharacters": true, "editor.unicodeHighlight.nonBasicASCII": true, "editor.unicodeHighlight.allowedCharacters": ["\u200B"], "editor.unicodeHighlight.includeComments": false } ``` -------------------------------- ### Minimum ToC Items Source: https://github.com/janosh/svelte-toc/blob/main/readme.md Specifies the minimum number of headings required for the ToC to be displayed. If fewer headings are found, the ToC might be hidden depending on the `autoHide` prop. ```ts minItems: number = 0 ``` -------------------------------- ### Svelte ToC Component Properties Source: https://github.com/janosh/svelte-toc/blob/main/readme.md Defines the configurable properties for the Svelte ToC component, controlling its rendering, behavior, and accessibility. These properties allow for fine-grained control over how the ToC interacts with the page and user input. ```svelte nav: HTMLElement | undefined = undefined // The DOM node of the `nav` element. Cannot be passed in as a prop, only for external access! ``` ```svelte open: boolean = false // Whether the ToC is currently in an open state on mobile screens. Can be used to externally control the `open` state through 2-way binding. This value is ignored on desktop. ``` ```svelte openButtonLabel: string = `Open table of contents` // What to use as ARIA label for the button shown on mobile screens to open the ToC. Not used on desktop screens. ``` ```svelte pageBody: string | HTMLElement = `body` // Which DOM node to use as the `MutationObserver` root node. This is usually the page's `
` tag or `` element. All headings to list in the ToC should be children of this root node. Use the closest parent node containing all headings for efficiency, especially if you have a lot of elements on the page that are on a separate branch of the DOM tree from the headings you want to list. ``` ```svelte reactToKeys: string[] = [`ArrowDown`, `ArrowUp`, ` `, `Enter`, `Escape`, `Tab`] // Which keyboard events to listen for. The default set of keys closes the ToC on `Escape` and `Tab` out, navigates the ToC list with `ArrowDown`, `ArrowUp`, and scrolls to the active ToC item on `Space`, and `Enter`. Set `reactToKeys = false` or `[]` to disable keyboard support entirely. Remove individual keys from the array to disable specific behaviors. ``` ```svelte scrollBehavior: 'auto' | 'smooth' = `smooth` // Whether to scroll the page smoothly or instantly when clicking on a ToC item. Set to `'auto'` to use the browser's default behavior. ``` ```svelte title: string = `On this page` // ToC title to display above the list of headings. Set `title=''` to hide. ``` ```svelte titleTag: string = `h2` // Change the HTML tag to be used for the ToC title. For example, to get `{title}`, set `titleTag='strong'`. ``` ```svelte tocItems: HTMLLIElement[] = [] // Array of rendered Toc list items DOM nodes. Essentially the result of `document.querySelectorAll(headingSelector)`. Can be useful for binding. ``` ```svelte warnOnEmpty: boolean = true // Whether to issue a console warning if the ToC is empty. ``` -------------------------------- ### Adjust Notebook Markdown Font Size Source: https://github.com/janosh/svelte-toc/blob/main/src/routes/(demos)/long-page/+page.md Enables control over the font size of Markdown content within notebooks. The setting defaults to 120% of the current editor font size. ```json { "notebook.markup.fontSize": "140%" } ``` -------------------------------- ### JSX Attribute Completions (TypeScript/JavaScript) Source: https://github.com/janosh/svelte-toc/blob/main/src/routes/(demos)/long-page/+page.md Automatically inserts attribute values when completing JSX attributes. The behavior is configurable via `javascript.preferences.jsxAttributeCompletionStyle` and `typescript.preferences.jsxAttributeCompletionStyle` with options 'auto', 'braces', or 'none'. ```TypeScript ``` ```JavaScript ``` -------------------------------- ### Flash Clicked Headings Duration Source: https://github.com/janosh/svelte-toc/blob/main/readme.md Specifies the duration in milliseconds for which a clicked ToC heading should have the `.toc-clicked` class. This helps users visually track their selection. Set to 0 to disable. ```ts flashClickedHeadingsFor: number = 1500 ``` -------------------------------- ### Heading ID and Title Extraction Functions Source: https://github.com/janosh/svelte-toc/blob/main/readme.md Customizable functions to extract the ID and title for each heading. `getHeadingIds` determines the URL hash, and `getHeadingTitles` sets the text displayed in the ToC. Both receive the heading DOM node as input. ```ts getHeadingIds = (node: HTMLHeadingElement): string => node.id getHeadingTitles = (node: HTMLHeadingElement): string => node.textContent ?? `` ``` -------------------------------- ### Active Heading and Scroll Offset Source: https://github.com/janosh/svelte-toc/blob/main/readme.md Props related to tracking the currently active heading based on scroll position. `activeHeading` stores the DOM element, and `activeHeadingScrollOffset` defines the scroll distance threshold for activating a heading. ```ts activeHeading: HTMLHeadingElement | null = null activeHeadingScrollOffset: number = 100 ``` -------------------------------- ### Tracked Headings Array Source: https://github.com/janosh/svelte-toc/blob/main/readme.md An array that holds all the DOM heading nodes currently being tracked by the ToC. This prop is bindable for external access but primarily intended for reading. ```ts headings: HTMLHeadingElement[] = [] ``` -------------------------------- ### Active ToC Item Tracking Source: https://github.com/janosh/svelte-toc/blob/main/readme.md Prop for tracking the currently highlighted table of contents list item (`
  • `) based on the user's scroll position. ```ts activeTocLi: HTMLLIElement | null = null ``` -------------------------------- ### Heading Selector Configuration Source: https://github.com/janosh/svelte-toc/blob/main/readme.md A CSS selector string used to identify which headings should be included in the ToC. The default selector targets `h2`, `h3`, and `h4` elements, excluding those with the `toc-exclude` class. ```ts headingSelector: string = `:is(h2, h3, h4):not(.toc-exclude)` ``` -------------------------------- ### Customizing Individual ToC Items Source: https://github.com/janosh/svelte-toc/blob/main/readme.md This Svelte code illustrates how to use the `toc-item` slot to customize the rendering of individual headings within the Table of Contents. It provides access to the heading's DOM node and its index in the list, allowing for custom formatting like adding numbering. ```svelte {idx + 1}. {heading.innerText} ``` -------------------------------- ### Aside Element Reference Source: https://github.com/janosh/svelte-toc/blob/main/readme.md Prop to reference the outer-most `aside` element, which typically receives the `toc` class. This prop is for external access and cannot be set directly. ```ts aside: HTMLElement | undefined = undefined ``` -------------------------------- ### Customizing Active TOC Item Appearance Source: https://github.com/janosh/svelte-toc/blob/main/src/routes/(demos)/left-border-active-li/+page.md This Svelte component demonstrates how to customize the active table of contents (TOC) item using CSS variables. It applies a solid cornflowerblue left border, sets the border width, and removes the background color for the active item, while maintaining a grid layout for the main content and the TOC. ```svelte

    Hello

    Lorem ipsum dolor sit amet consectetur

    World

    adipisicing elit. Recusandae eos, molestias cumque adipisci

    More

    veniam totam vitae illo voluptatem assumenda magni consequuntur!

    Headings

    asperiores ab laboriosam quod est odit accusamus, reiciendis eum
    ``` -------------------------------- ### Conditional Rendering and Auto-Hiding Source: https://github.com/janosh/svelte-toc/blob/main/readme.md The `hide` prop controls the rendering of the ToC component itself. `autoHide` automatically hides the ToC when no headings are found and un-hides it when headings reappear. ```ts hide: boolean = false autoHide: boolean = true ``` -------------------------------- ### Heading Level Extraction Function Source: https://github.com/janosh/svelte-toc/blob/main/readme.md A function that determines the depth (1-6) of a heading, used for indentation and font-size in the ToC. It extracts the level number from the heading's node name (e.g., 'H2' -> 2). ```ts getHeadingLevels = (node: HTMLHeadingElement): number => Number(node.nodeName[1]) // get the number from H1, H2, ... ``` -------------------------------- ### Customizing Scroll Behavior for Headings Source: https://github.com/janosh/svelte-toc/blob/main/readme.md This CSS snippet demonstrates how to set the `scroll-margin-top` property for headings. This ensures that when a user clicks on a ToC item, the corresponding heading is scrolled into view with a specified offset from the top of the viewport, improving readability. ```css /* replace next line with appropriate CSS selector for all your headings */ :where(h1, h2, h3, h4) { scroll-margin-top: 50px; } ``` -------------------------------- ### Keep Active ToC Item in View Source: https://github.com/janosh/svelte-toc/blob/main/readme.md When enabled, this prop ensures the currently active ToC item remains visible within the ToC container, even for long ToCs. It relies on the `scrollend` event for functionality. ```ts keepActiveTocItemInView: boolean = true ``` === COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.