Skip to main content
100%

Font Scripting in VS Code

✓ Published0🌍 Public
Aadiamaan92
Last edited Aug 8, 2021
Created on Aug 8, 2021

This example demonstrates how to configure custom font scripting in Visual Studio Code using a JSON settings file. It shows two textMate rules that stylize code elements: the first resets font styles for specific scopes like `invalid` and `keyword.operator`, while the second applies italics to keywords, comments, and Python-specific tokens. The configuration relies on VS Code’s `editor.tokenColorCustomizations` API, referencing TextMate grammar scopes to control typography. It pairs `Victor Mono` with `Fira Code` and enables font ligatures for enhanced readability.

AI-generated description

Similar vizzes

Loading thumbnail…

Gist 9dae53d727c03c9406ce5831388c3685

This example presents a curated configuration file for the Visual Studio Code editor, detailing personal settings for a clean and focused user interface. The JSON file silences interface elements like the activity bar and status bar without hiding the source, and pairs the Night Owl Light theme with the Dank Mono font and generous line height. It also defines language-specific formatting and linting rules using Prettier and ESLint, organizing everything into logical comments for easy navigation.

NNaoray
66% match
Loading thumbnail…

Visual Studio Code Settings Sync Gist

This example shows a Gist containing a Visual Studio Code settings synchronization configuration, including a cloud settings file, an extensions list, and a settings JSON. It visualizes the structure of the synced data, highlighting the extension metadata (IDs, publishers, versions) and the sync timestamp. The visualization uses a static JSON tree layout, with nodes for each file and property, drawn using D3.js’s `d3.hierarchy` and `d3.tree` to arrange the nested objects. The rendering approach relies on SVG elements, with `d3.select` and `transition.attrTween` to animate node expansion, while the raw data is parsed directly from the Gist’s JSON files.

AAgos88
60% match
Loading thumbnail…

Attempting to set font attributes during selection

This example demonstrates how to modify font attributes of selected text within a Sketch document. It uses the Sketch JavaScript API and the CoreText framework to apply small-caps styling to the first five characters of a text layer. The script accesses the document's selected text layer, checks if it is in editing mode, then retrieves the text storage and font descriptor to construct a modified font with the small-caps feature enabled. It applies the new font attribute to the specified range and finalizes the changes with the text storage editing methods.

KKevinGutowski
60% match
Loading thumbnail…

Visual Studio Code Settings Sync Gist

This visualization shows the file structure of a Visual Studio Code Settings Sync Gist, displaying both the settings and extension configuration files. The code maps each file to a distinct visual element using d3.hierarchy and d3.treemap, with rectangles sized by file size and colored by file type. It renders the treemap layout through d3.select and SVG container elements, labeling each cell with the corresponding filename and version information. The data source is the JSON object from the gist, which passes through d3.hierarchy to build the nested layout. Extensions appear as leaf nodes, while settings.json and keybindings files are shown as separate branches.

GGRamirez2
60% match
Loading thumbnail…

Visual Studio Code Settings Sync Gist

This visualization presents a developer’s Visual Studio Code configuration synced via a Gist, including installed extensions, custom keybindings, settings, and snippets across languages. The React-based view organizes these components into a navigable interface, highlighting the extension list with publisher, version, and ID metadata. It also displays JSON snippets for JavaScript, TypeScript, and React, alongside preference files like `settings.json` and `material-icon-theme.json`. The data originates from a public Gist by Dabbar, showcasing how code environment setups can be stored and visualized.

DDabbar
59% match
Loading thumbnail…

Visual Studio Code Settings Sync Gist

This visualization presents the settings and extensions from a Visual Studio Code user’s synchronization Gist, authored by JamesApple. It shows the installed extensions as a list and the user’s configuration details, including keybindings, UI theme, and editor preferences. The data is rendered directly from the JSON files in the Gist, which include `extensions.json` and `settings.json`. The example highlights how personal development environment configurations can be shared and examined, using the raw JSON structure to display the information without additional processing.

JJamesApple
59% match
Loading thumbnail…

Gist 9d6f5a0980393c12aca5243aae8947e0

This example demonstrates how to modify font attributes for a selected range of text within a Sketch document using the Sketch JavaScript API. It applies small-caps styling by accessing the text layer’s editing delegate and text storage, then constructs an `NSFontFeatureSettingsAttribute` dictionary to adjust the font descriptor. The code specifically uses `NSFontFeatureTypeIdentifierKey` and `NSFontFeatureSelectorIdentifierKey` for the `kLowerCaseType` and `kLowerCaseSmallCapsSelector` settings, then creates a new `NSFont` with `NSFontDescriptor` and applies it to the selected range via `addAttributes:range:`.

KKevinGutowski
58% match
Loading thumbnail…

Noto Emoji Color fontconfig for Konsole

This example shows a fontconfig rule that makes Konsole display Noto Color Emoji glyphs whenever the Fira Code font is selected, enabling color emoji support in the terminal. It works by matching the family name “Fira Code” and prepending “Noto Color Emoji” with a strong binding, overriding the font fallback order. The configuration is installed to `~/.config/fontconfig/conf.d/99-fira-code-color-emoji.conf` and activated with `fc-cache`. The XML uses fontconfig’s `<match>`, `<test>`, and `<edit>` elements to modify the font family list at runtime.

Aadamscott
58% match