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

[sunxvming]

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!

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.

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
  

• Dark Theme
  

• Creating a Code File
  

• 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!

• Download Obsidian VSCode Editor from Official Website

• Download Obsidian VSCode Editor from My Github Repo

[CawlinTeffid]

[sunxvming]

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.

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.

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.

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

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.

[exztz1]

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.

[exztz1]

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.

[lysergico]

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

[239847Coke]

Hey,

thanks for the plugin, it’s pretty great. I’m having an issue getting the files to sync, do they just not sync at all?

[AmericanBagel]

Obsidian is the new Emacs… What’s next? DOOM in Obsidian?