Svelte Syntax Highlighter

by Typhoon-Kim
5
4
3
2
1
Score: 53/100

Description

Category: Coding & Technical Tools

The Svelte Syntax Highlighter plugin enables syntax highlighting for Svelte code blocks within Obsidian, enhancing the readability and organization of Svelte code directly in notes. It leverages Obsidian's Prism.js object to provide clear and visually distinct syntax highlighting, both in live edit mode and preview mode. Ideal for developers and users working with Svelte, this plugin simplifies code management by seamlessly integrating with Obsidian's interface. It supports dynamic syntax highlighting in edit mode via CodeMirror Extension for an enhanced coding experience.

Reviews

No reviews yet.

Stats

14
stars
1,205
downloads
2
forks
695
days
705
days
705
days
0
total PRs
0
open PRs
0
closed PRs
0
merged PRs
1
total issues
0
open issues
1
closed issues
26
commits

Latest Version

2 years ago

Changelog

README file from

Github

Obsidian Svelte Syntax Highlighter Plugin

English | 한국어

GitHub release (latest by date) GitHub issues

npm downloads 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!

Similar Plugins

info
• Similar plugins are suggested based on the common tags between the plugins.
Execute Code
4 years ago by twibiral
Obsidian Plugin to execute code in a note.
VSCode Editor
3 years ago by Sun Xvming
Edit Code Files like VSCode in Obsidian.
Shiki Highlighter
2 years ago by Moritz Jung
An Obsidian plugin that offers better code highlighting via shiki and Expressive Code.
Natural Language Syntax Highlighting
3 years ago by artisticat
Highlight adjectives, nouns, adverbs, verbs, and conjunctions in Obsidian.md
Code Files
3 years ago by Lukas Bach
Plugin for ObsidianMD to show and edit code files along other notes.
Fountain Editor
3 years ago by Chuang Caleb
Obsidian plugin for Fountain screenplay syntax formatting.
Code Block
4 years ago by Patrik Lindefors
Code block from selection
5 years ago by Dmitry Savosh
Obsidian plugin. Adds code block for the selected text.
MLIR Syntax Highlight
3 years ago by Lewuathe
Embed Code File
4 years ago by Abdullah Almariah
Ace Code Editor
a year ago by RavenHogWarts
An enhanced code editor using Ace editor
Orgmode (CM6)
2 years ago by Benoit Bazard
Orgmode plugin for Obsidian
File Include
3 years ago by Till Hoffmann
InlineCodeHighlight
3 years ago by Dimava
Code Block Labels
4 years ago by Sean Bowers
Provides labels for codeblocks in Obsidian
Stenography
5 years ago by bramses
Code::Stats
3 years ago by MiskaMyasa
The Code::Stats plugin allows you to track your coding progress and earn XP for writing markdown in the Obsidian editor.
Simple Code Formatter
2 years ago by SY
Format current code block in obsidian.
Alt-Click to Copy
2 years ago by Veer Sheth
Code Language Completer
2 years ago by Stanley Wang
minimal Obisdian plugin, fine-tuned to speed up developer note-taking
Magic Move
2 years ago by imfenghuang
Animating Code Blocks in Obsidian
Custom Syntax Highlights
6 months ago by Outsiders17711
Display files with custom extensions as syntax-highlighted code blocks in reading view with configurable extension-to-language mappings.
Snippetsaurus
a year ago by Christian Humbert
Inline Code Copy
a year ago by Hongchen Lin
ruby.wasm
2 years ago by geeknees
Obsidian RubyWasm Plugin
Code Blocks commands
8 months ago by dragonish
Provide commands to insert code blocks with markup, and support triggering commands with backticks.