Code Files

by Lukas Bach
5
4
3
2
1
Score: 55/100

Description

Category: Coding & Technical Tools

The Code Files plugin revolutionizes your Obsidian experience by introducing a code editor view that seamlessly integrates with your notes. With Monaco Editor, you can now edit individual code blocks from Markdown files in an embedded instance, making it easier than ever to refine your code snippets. Configure the plugin settings to choose which file extensions will default to the code editor and take advantage of new features like themes, code block editing, and CSS snippet editing. The plugin also allows for creating new code files through various methods, including right-clicking on a folder or using the command palette. With this plugin, you can now edit your code in a more streamlined way, making it an essential tool for developers and coders who use Obsidian.

Reviews

No reviews yet.

Stats

189
stars
18,199
downloads
4
forks
1,111
days
428
days
428
days
3
total PRs
0
open PRs
1
closed PRs
2
merged PRs
27
total issues
11
open issues
16
closed issues
9
commits

Latest Version

README file from

Github

Obsidian Code Files

Plugin for ObsidianMD to show and edit code files along other notes.

The plugin adds a code editor view to Obsidian. The code editor uses the powerful Monaco Editor, which also powers VS Code.

🚀 New Feature: The plugin now also supports editing individual code blocks from Markdown files in an embedded Monaco Editor instance. Read below.

Caveat: This plugin currently relies on hosted dependencies and thus needs an internet connection. Read below for more information.

In the plugin settings, you can configure for which file extensions the editor will be available as default editor. You can also create new code files, either by right clicking on a folder in the side pane and clicking on "Create Code File", search for "Create new Code File" in the command palette or by using the "Create Code File" button in the ribbon.

img_1.png

New feature: Themes

Besides the default themes that ship with VSCode, the plugin also supports a long list of custom well-established themes to choose from.

img_3.png

Code Block Editing

The plugin also supports editing individual code blocks from any Markdown document in the editor. You can either invoke the command palette and search for "Open Current Code Block in Monaco Editor", or right click on any code block and click on "Edit Code Block in Monaco Editor".

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.

fence-editing.gif

Editing CSS Snippets

Search for the command "Edit CSS Snippet" to search CSS Snippets that exist in your Obsidian vault and edit them in the Monaco Editor.

css-files.gif

More Screenshots

img_2.png

img.png

Caveat: Online dependency

Due to the complicated nature of bundling the Monaco Editor, the plugin currently relies on a hosted version of the editor. This means that the plugin needs an internet connection to work, and has a dependency on the hosted editor, which is currently available on https://embeddable-monaco.lukasbach.com.

I hope to remove this dependency in the future, but this was the easiest way to get the plugin to work for now.

Similar Plugins

info
• Similar plugins are suggested based on the common tags between the plugins.