https://github.com/zachatoo/obsidian-css-editor

Edit CSS snippets in Obsidian.
https://github.com/zachatoo/obsidian-css-editor

obsidian-plugin typescript

Last synced: about 2 months ago
JSON representation

Edit CSS snippets in Obsidian.

• Host: GitHub
• URL: https://github.com/zachatoo/obsidian-css-editor
• Owner: Zachatoo
• License: mit
• Created: 2023-03-23T03:17:36.000Z (over 3 years ago)
• Default Branch: main
• Last Pushed: 2025-04-24T22:24:25.000Z (about 1 year ago)
• Last Synced: 2025-05-09T00:07:14.788Z (about 1 year ago)
• Topics: obsidian-plugin, typescript
• Language: TypeScript
• Homepage:
• Size: 3.35 MB
• Stars: 67
• Watchers: 2
• Forks: 5
• Open Issues: 5
• Metadata Files:
  • Readme: README.md
  • Funding: .github/FUNDING.yml
  • License: LICENSE

Awesome Lists containing this project

README

          
![Obsidian Downloads](https://img.shields.io/badge/dynamic/json?logo=obsidian&color=%237C3AED&label=downloads&query=%24%5B%22css-editor%22%5D.downloads&url=https%3A%2F%2Fraw.githubusercontent.com%2Fobsidianmd%2Fobsidian-releases%2Fmaster%2Fcommunity-plugin-stats.json)

[![Test](https://github.com/Zachatoo/obsidian-css-editor/actions/workflows/test.yaml/badge.svg)](https://github.com/Zachatoo/obsidian-css-editor/actions/workflows/test.yaml)

# 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.

1. 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.

1. Push the changes and tag. This will trigger a GitHub action to create the release.

### Running tests

Tests are run using [wdio-obsidian-service](https://jesse-r-s-hines.github.io/wdio-obsidian-service/index.html). Tests are run automatically during PR checks and before releasing. You can also run tests manually with `npm test`.