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,202
downloads
2
forks
690
days
700
days
700
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.
Code Block Labels
4 years ago by Sean Bowers
Provides labels for codeblocks in Obsidian
Execute Code
4 years ago by twibiral
Obsidian Plugin to execute code in a note.
Code Block
4 years ago by Patrik Lindefors
Embed Code File
4 years ago by Abdullah Almariah
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.
File Include
3 years ago by Till Hoffmann
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.
InlineCodeHighlight
3 years ago by Dimava
MLIR Syntax Highlight
3 years ago by Lewuathe
VSCode Editor
3 years ago by Sun Xvming
Edit Code Files like VSCode in Obsidian.
Fountain Editor
2 years ago by Chuang Caleb
Obsidian plugin for Fountain screenplay syntax formatting.
Orgmode (CM6)
2 years ago by Benoit Bazard
Orgmode plugin for Obsidian
Alt-Click to Copy
2 years ago by Veer Sheth
Shiki Highlighter
2 years ago by Moritz Jung
An Obsidian plugin that offers better code highlighting via shiki and Expressive Code.
ruby.wasm
2 years ago by geeknees
Obsidian RubyWasm Plugin
Magic Move
2 years ago by imfenghuang
Animating Code Blocks in Obsidian
Code block from selection
5 years ago by Dmitry Savosh
Obsidian plugin. Adds code block for the selected text.
Stenography
5 years ago by bramses
Code Language Completer
2 years ago by Stanley Wang
minimal Obisdian plugin, fine-tuned to speed up developer note-taking
Simple Code Formatter
a year ago by SY
Format current code block in obsidian.
Snippetsaurus
a year ago by Christian Humbert
Inline Code Copy
a year ago by Hongchen Lin
Ace Code Editor
a year ago by RavenHogWarts
An enhanced code editor using Ace editor
Code Blocks commands
8 months ago by dragonish
Provide commands to insert code blocks with markup, and support triggering commands with backticks.
Custom Syntax Highlights
5 months ago by Outsiders17711
Display files with custom extensions as syntax-highlighted code blocks in reading view with configurable extension-to-language mappings.