Search...Search plugins and themes...
⌘K
Sign in
  • Get started
  • Download
  • Pricing
  • Enterprise
  • Account
  • Obsidian
  • Overview
  • Sync
  • Publish
  • Canvas
  • Mobile
  • Web Clipper
  • CLI
  • Learn
  • Help
  • Developers
  • Changelog
  • About
  • Roadmap
  • Blog
  • Resources
  • System status
  • License overview
  • Terms of service
  • Privacy policy
  • Security
  • Community
  • Plugins
  • Themes
  • Discord
  • Forum / 中文论坛
  • Merch store
  • Brand guidelines
Follow us
DiscordTwitterBlueskyThreadsMastodonYouTubeGitHub
© 2026 Obsidian

Svelte Syntax Highlighter

typhoon-kimtyphoon-kim1k downloads

Syntax highlighting for Svelte code blocks.

Add to Obsidian
  • Overview
  • Scorecard
  • Updates4

English | 한국어

jsDeliver

This plug-in provides syntax highlighting for the Svelte code block in Obsidian.
It started with the simple idea of adding an identifier for the Svelte syntax to the Prism object of Obsidian.
Don't use this plug-in when Prism.js supports syntax highlighting for Svelte in the future and Obsidian officially supports it!

Features

  • Syntax highlighting for Svelte code blocks in Obsidian.
  • Highlight live syntax in edit mode by providing CodeMirror Extension.

Installation

From Obsidian

If you can't find it in the community plug-in, please install it manually.

  1. Open Obsidian.
  2. Go to Settings > Community plugins.
  3. Disable Safe mode.
  4. Click on Browse and search for "Svelte Syntax Highlighter".
  5. Click Install.
  6. Once installed, click Enable to activate the plugin.

Manual Installation

  1. Download the latest release from the Releases page.
  2. Extract the files to your Obsidian vault's .obsidian/plugins/obsidian-svelte-syntax-highlighter directory.
  3. Enable the plugin from the Obsidian settings.

Usage

To use the Svelte Syntax Highlighter, simply create a code block with svelte as the language identifier:

```Svelte
<script>
    export let name;
</script>

<h1>Hello {name}!</h1>
```

The plugin will automatically highlight the syntax of the Svelte code block.

screenshot

Development

This Obsidian plug-in follows Obsidian's plug-in development guide. Using Obsidian's Prism.js object, I have added Svelte's syntax highlighting identifier to implement ViewPlugin.extension in CodeMirror. If you want to implement syntax highlighting in other or custom languages that Prism.js does not support, the content of this plug-in may be helpful.

Prerequisites

  • Node.js
  • npm

Building the Plugin

  1. Clone the repository:

    git clone https://github.com/typhoon-kim/obsidian-svelte-syntax-highlighter.git
    cd obsidian-svelte-syntax-highlighter
    
  2. Install dependencies:

    npm install
    
  3. Build the plugin:

    npm run build
    

Contributing

Contributions are welcome! Please open an issue or submit a pull request on GitHub.

📝 License

This project is licensed under the MIT License.


If you have any further questions or need support, please feel free to contact me!

68%
HealthFair
ReviewSatisfactory
About
Add Svelte syntax highlighting to Obsidian code blocks. Enable live in-editor highlighting using a CodeMirror extension with Prism integration.
SyntaxLanguagesEditing
Details
Current version
1.0.2
Last updated
2 years ago
Created
2 years ago
Updates
4 releases
Downloads
1k
Compatible with
Obsidian 0.15.0+
Platforms
Desktop, Mobile
License
MIT
Report bugRequest featureReport plugin
Sponsor
GitHub Sponsors
Author
typhoon-kimtyphoon-kim
github.com/typhoon-kim
GitHubtyphoon-kim
  1. Community
  2. Plugins
  3. Syntax
  4. Svelte Syntax Highlighter

Related plugins

Simplified Chinese Word Splitting

Adds Simplified Chinese word splitting support for the editor and Vim mode.

Easy Typing

Auto format when typing.

LanguageTool

Unofficial integration of the LanguageTool spell and grammar checker.

VSCode Editor

Edit Code Files like VSCode.

GDScript Syntax Highlighting

Add live GDScript syntax highlighting to code block.

Advanced Tables

Improved table navigation, formatting, and manipulation.

Meta Bind

Make your notes interactive with inline input fields, metadata displays, and buttons.

Outliner

Work with your lists like in Workflowy or Roam Research.

Various Complements

Complete words similar to auto-completion in an IDE.

Creases

Tools for effectively folding Markdown sections.