Obsidian VSCode Editor: Elevate Your Code Editing Experience in Obsidian!

Share & showcase
,
1

Are you tired of switching between different applications while working on your notes and code?
Do you wish there was a seamless way to view and edit code files within Obsidian?

Look no further! :smirk:

I am excited to introduce you to the Obsidian VSCode Editor plugin, a powerful tool that brings the world of code editing right into your Obsidian vault. :nerd_face:

About the Plugin

Obsidian by default does not support the viewing and editing of various code files, and Obsidian VSCode Editor was created to solve this problem. Leveraging the capabilities of the Monaco Editor (the heart of Visual Studio Code), this plugin provides full support for viewing and editing a wide range of code formats. Whether you work with C, C++, C#, CSS, Go, HTML, Java, JavaScript, JSON, Python, Ruby, Rust, Shell, XML, YAML, ini, and more, you can now do it all without leaving Obsidian.

No more switching between different apps or cluttering your workspace with numerous editors – everything you need is seamlessly integrated into Obsidian.

Key Features

1. Full Code Editing Experience

Obsidian VSCode Editor provides a complete code editing experience, just like working in Visual Studio Code itself. You can write, edit, and manage code files effortlessly within your Obsidian notes.

2. Theme Customization

Tailor the editor’s appearance to your preferences with support for both light and dark themes. Make your workspace truly yours by choosing the theme that suits your style.

3. Font Size Control

Enjoy the flexibility to adjust the editor’s font size to your liking. A handy Ctrl + mouse wheel shortcut makes it easy to find the perfect size for your comfort.

4. Line Numbers

You have the option to display or hide line numbers according to your needs. Customize your editing environment to maximize your productivity.

5. Code Minimap

Effortlessly navigate through your code with the option to show or hide the code minimap, giving you a high-level overview of your code’s structure.

6. Quick Code File Creation

Streamline your workflow with shortcut icon buttons or commands to create new code files directly from within Obsidian. No need to switch apps to get started with a new code project.

See It in Action

  • Light Theme
    Light Theme

  • Dark Theme
    Dark Theme

  • Creating a Code File
    Create Code File

  • Editor Settings Panel
    Editor Settings Panel

Get Started with Obsidian VSCode Editor

Enhance your Obsidian experience by adding Obsidian VSCode Editor to your arsenal of plugins. Say goodbye to juggling multiple applications and hello to seamless code editing within Obsidian.

Download the plugin today and start coding without leaving your favorite note-taking environment!

16 Likes
2

IMG_4409

11 Likes
3

About the plugins

Obsidian by default does not support the viewing and editing of various code files, and Obsidian VSCode Editor was created to solve this problem.

It is based on Monaco Editor (VSCode Editor kernel) development, support for viewing and editing of various code format files, including but not limited to: C, C++, C# , CSS, Go, HTML, Java, JavaScript, JSON, Python, Ruby, Rust, Shell, XML, YAML, ini, etc.

You no longer have to open another editor just to view or edit a certain code file, everything is done in Obsidian.

Basic features

  • It does not depend on any third-party network services and can be used even when not connected to the internet.
  • Support for viewing and editing files in various code formats, just like editing code with VSCode.
  • Supports customization of the editor’s theme colors, including light and dark themes.
  • Allows customization of the editor’s font size, and provides a shortcut to adjust the font size using Ctrl + mouse wheel.
  • Supports editing individual code blocks from any Markdown document.
  • Supports Internal links quick preview.
  • Supports automatic code wrapping, and toggles it with alt + z.
  • Provides the option to show/hide line numbers.
  • Offers the choice to display/hide indent guides.
  • Allows toggling the display of the code minimap.
  • Supports shortcut icon buttons or commands for creating new code files.

How to support different code file

The default support code file’s extensions is ts, js, py, css, c, cpp, go, rs, java, lua, php. you can configure for which file extensions to support in the plugin’s setting panel.
image.png

Supported Shortcuts

Most of the shortcuts are consistent with VS Code. Here are some of the supported shortcuts:

Category Shortcut Action
Ctrl ctrl + c Copy
ctrl + x Cut
ctrl + v Paste
ctrl + s Save
ctrl + a Select All
ctrl + f Find
ctrl + h Replace
ctrl + z Undo
ctrl + y Redo
ctrl + / Toggle Comment
ctrl + d Duplicate Line
ctrl + [ Decrease Indent
ctrl + ] Increase Indent
ctrl + ↑ Move Line Up
ctrl + ↓ Move Line Down
ctrl + ← Move Cursor Left by Word
ctrl + → Move Cursor Right by Word
ctrl + Backspace Delete Word Left
ctrl + Delete Delete Word Right
Ctrl + Shift ctrl + shift + z Redo
ctrl + shift + k Delete Current Line
ctrl + shift + [ Fold Code Block
ctrl + shift + ] Unfold Code Block
ctrl + shift + enter Insert Line Above
ctrl + enter Insert Line Below
Alt alt + z Toggle Word Wrap

Supported Code Block Editing

This plugin also supports editing individual code blocks from any Markdown document in the editor.
You can just right click on any code block and click on “Edit Code Block in VSCode Editor Plugin”.

This will open a new modal with a Monaco Editor instance in which you can edit the code block, which will automatically sync back to the block in your document when you close the modal.

GIF 2023-11-3 10-25-01.gif

Supported Internal links quick preview

You can add a internal link to a code file in obsidian, and hovering the cursor over the link for quick preview.
GIF 2023-11-2 19-48-55.gif

Code file will not appear in file prompt list when intert Internal links. You need open Detect all file extensions setting.
image.png

Installation

Installation from Obsidian’s community plugins:

  1. Open Settings > community plugins
  2. Turn off ‘Safe mode’
  3. Click ‘Browse’ button to browse plugins
  4. Search for ‘VSCode Editor’
  5. Click ‘Install’ button
  6. Once installed, close the plugins browse window and go back community plugins window, and activate the newly installed plugin below installed plugins list

Manual installation:

  1. Enter the latest version of making download page latest release
  2. Download the obsidian-vscode-editor-x.y.z.zip file, where x.y.z is the version number
  3. Extract obsidian-image-toolkit folder from the zip to your vault’s plugins folder <vault>/.obsidian/plugins/ (Note: .obsidian folder may be hidden, you need to show it firstly)
  4. Open Settings > community plugins, and reload and activate the plugin below installed plugins list

Contact

If you’ve got any kind of feedback or questions, feel free to reach out via GitHub issues.

10 Likes
4

Hi

Thanks for the plugin but this does not work for me on Windows and IOS. I installed the plugin, I have “detect all files” enabled in Obsidian. Whenever I click on a non .md file (like a .txt file) it tries to open external editor, meanwhile the PlainText plugin works perfectly if I use that one instead. So this is definetely not my fault, given I installed it from the community plugins as explained. it would be great if it works naturally.

5

It would be great actually if you disable the popup for the plaintext plugin because that one perfectly works fine. I tested your plugin on 3 different platforms, it did not work in on any of them. Not sure what the deal is.

6

It would be amazing if we could use the minimap for regular .md files. Any chance of making that work vault-wide?