CSS Editor

CSS Editor

This plugin allows you to edit CSS files in the .obsidian/snippets/ directory, with syntax highlighting and code completion, no external editor required.

Features

• Create, edit, rename, and delete CSS snippets
• Syntax highlighting and code completion
• Works on desktop and mobile
• Basic VIM support

Installation

1. Open Obsidian Settings → Community plugins → Browse.
2. Search for "CSS Editor" and click Install, then Enable.

Commands

Create CSS snippet

Opens a prompt to create a CSS snippet in your .obsidian/snippets/ directory. Upon creation, show editor to edit that CSS file.

Open CSS snippet quick switcher

Opens a suggestion modal to create, edit, or delete a CSS snippet. Has similar functionality to the core quick switcher where holding down a secondary key will modify the action that will take place.

• Press Enter to open the selected CSS snippet, or if no suggestions are available, create a new CSS snippet.
• Press ⌘Enter to open the selected CSS snippet in a new tab.
• Press ShiftEnter to create a new CSS snippet.
• Press Tab to toggle the enable/disable state of the selected CSS snippet.
• Press ⌘Delete to delete the selected CSS snippet.

Delete CSS snippet

Deletes the currently active CSS snippet file. Only available when viewing a CSS snippet file.

Toggle the enabled/disabled state of CSS snippet

If the currently active CSS snippet file is enabled then disable it, and vice versa. Only available when viewing a CSS snippet file. Note that you can also toggle this state directly from the quick switcher using the Tab key.

Contributing

Releasing

Releasing a new version involves the following steps:

1. Update minAppVersion in manifest.json if applicable.
2. Run npm version patch, npm version minor, or npm version major.
   • This command will bump the version in the manifest.json, package.json, and package-lock.json files, add a new entry in versions.json, and create a git tag.
3. Push the changes and tag. This will trigger a GitHub action to create the release.

Running tests

Tests are run using wdio-obsidian-service. Tests are run automatically during PR checks and before releasing. You can also run tests manually with npm test.