Giter VIP home page Giter VIP logo

obsidian-code-files's Introduction

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.

obsidian-code-files's People

Contributors

lukasbach avatar saberzero1 avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar

obsidian-code-files's Issues

Code Block Editing not working when in popout window

Describe the bug
The Code Block Editing feature as of v1.1.0 is not working in Obsidian's built-in pop-out window.

To Reproduce

  • Create a new note
  • Write a code block and some code
  • Press Ctrl + P
  • select "Open current tab in new window"
  • navigate to the new window
  • right click on the code block
  • click "Edit Code Block in Monaco Editor"
  • editor modal opens
  • no content is displayed, changes have no effect

Expected behavior

  • editor modal opens in pop-out window
  • content of the codeblock is displayed
  • changes are applied to the codeblock after closing the editor

Screenshots
grafik
grafik

Additional context
Additional details:

  • Tested only on Desktop
  • Windows 10, Obsidian v1.4.16
  • I've noticed some other plugins, which were also broken in pop-out windows. For example see here.
  • Also, when the editor modal is open in the pop-out window, hotkeys do not work in the main Obsidian window. After closing the modal, hotkeys are fine again.

No Autosave?

Describe the bug
Editing a file, closing and reopening obsidian result in the file not being edited

Expected behavior
Autosaves as obsidian md files

Additional context
I discovered that as dataview was not updating my exported methods

Screenshots
code_files_bug

Only tested on Windows 11, I will try macOS ventura later today

vim mode

Is your feature request related to a problem? Please describe.
My Obsidian is vim-mode; when I get into the code editor, I'm not in vim mode anymore.

Describe the solution you'd like
It would be nice to stay in vim mode (as possible in VSCode).

Describe alternatives you've considered
Currently, I disable the plugin, and the code files are being opened by gvim.

.tex extension color scheme

Is your feature request related to a problem? Please describe.
As the files in code-files are automatically saved, it's brilliant for latex files that have a listener that compiles a pdf on file-save.
Obisidian code-files is therefore very good for working on .tex files.

Describe the solution you'd like
I would therefore like if there were some kind of color scheme for .tex files for easier editing.

Describe alternatives you've considered
Writing without any color scheme, though this makes it more difficult to read.

Additional context

Newest Update: Themes

Describe the bug
With the recent update, the original theme now looks great on Obsidian Dark Themes. However, picking any other theme, makes the text dark red.

To Reproduce

  • Start sandbox / fresh vault
  • Install Code Files plugin
  • Restart Obsidian after editing the file extensions list to accept different extensions
  • Create new code file (used normal CSS in this example).
  • Change theme in plugin settings (also restarted)

Expected behavior
Different themes should work.

Screenshots

Default Theme

R0tEzZa

Any other theme selected

Clouds

iXaKpjF

Brilliance Black

u6EJTUi

Tomorrow Night Eighties

1IRQiOO

Also tried restarting Obsidian after a theme change.

Additional context

  • Windows 11 Pro
  • Obsidian Sandbox v1.5.3
  • Code Files v1.1.7
  • No other plugins installed, fresh sandbox, default theme.

Language support

Wasn't sure what to flag this as.

I took a look at the Monaco Editor to see if Lua and Batch were supported, and it appears they are. However, when I add the filetypes .bat, .batch, or lua, there's no syntax highlighting at all. Made sure to restart Obsidian.

Are the same languages supported that are in the library you used?

I can create a test html file and syntax highlighting works fine for that.

Dark mode enhancement

Is your feature request related to a problem? Please describe.
I'm always frustrated when in Obsidian dark mode, code reading is very difficult

Describe the solution you'd like
Is it feasible to adjust the font color scheme

Additional context
image

Blank Extension Files

Is your feature request related to a problem? Please describe.
The ability to create a blank extension file for files without extensions


Describe the solution you'd like
I'm not even sure if this is possible due to how Obsidian is, but it would be nice to have files that don't have extensions such as files called CaddyFile or .env. These are yml files, however, the files don't contain extensions when used in Docker.


I've thought about how complicated this may be, and also found that the syntax highlighting works based on what extension you pick. So if this were to even be a thing, there would need to be a way to select what syntax highlighting to use somehow, otherwise you get a file filled with just white text.


Describe alternatives you've considered
Attempted to add a blank character to the list of file extensions
Added a file extension called `.env and then used a whitespace character for the filename


Additional context
pinXwXx

No Settings Tab

Describe the bug
A clear and concise description of what the bug is.
After cloning the repository and building the plugin, I was able to load the plugin into obsidian. The settings tab is not loading into the app.
To Reproduce
Steps to reproduce the behavior (ideally a codesandbox link or similar if for a library issue):
To reproduce, I would clone the repository into a new vault and ensure that the settings tab for the plugin loads.
Expected behavior
A clear and concise description of what you expected to happen.
The plugin should have a settings tab. The repository even includes this settings tab in src, but needs to load correctly.

Additional context
Windows 11

Is it possible to open code files like editing code blocks

Is your feature request related to a problem? Please describe.
A clear and concise description of what the problem is. Ex. I'm always frustrated when jump between notes and code files

Describe the solution you'd like
Open code files in a way similar to editing code blocks, If you feel it's unnecessary, please ignore my proposal.

Describe alternatives you've considered
I know you can use split screen to solve the problem of jumping between notes and code, but using this method on the small screen of a laptop is not comfortable

Additional context
image

Support for language specific characters

Support for language specific characters
Language specific characters appear in the editor as "?" in rhombus - "๏ฟฝ" in spite of the file being in a format that supports these characters (and regular notepad or other editor displays them properly)

Would like to add an update note

Thank you for your efforts.

It would be greatly appreciated if you could provide some explanations during updates, such as the fixed bugs, added features, or improved performance.

This would not only make it easier for users to understand the plugin updates but also help in promoting the plugin effectively.

BRAT install support?

And yet another MAJOR step for obsidian as a the best text editor on the planet! Thank you for your awsome work!

As the title says, any chance you plan to add BRAT support for easy installation?

Add a command to open the current file in Monaco

Is your feature request related to a problem? Please describe.
I want to be able to edit Templater scripts inside a code editor but the command to open the code block in Monaco doesn't work. I'd also want to be able to see files in Monaco so I can do regex find and replace on them (Obsidian doesn't support regex find and replace out of the box).

Describe the solution you'd like
There should be a command to open the whole note in the Monaco editor.

How do I install this plugin?

I tried downloading the latest release and moving it to my plugins directory but I couldn't enable the plugin even after reloading Obisidian entirely.

I can't find it via the Community Plugins tab in Settings either.

This is all on a Windows Desktop.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.