<p>[<a href="https://github.com/TracingOrigins/obsidian-code-viewer-plugin/blob/master/README.zh.md">中文</a> | English | <a href="https://github.com/TracingOrigins/obsidian-code-viewer-plugin/blob/master/README.ru.md">Русский</a>]</p>
<p><a href="https://community.obsidian.md/account/plugins/code-viewer" target="_blank">Code Viewer</a> is an Obsidian plugin for viewing and editing code files. Click any supported file to open it with native syntax highlighting, or use the inline editor to make quick changes — no external dependencies.</p>

Features

• Native syntax highlighting — uses Obsidian's built-in MarkdownRenderer, so colors always match your current theme
• Automatic extension registration — .py, .ts, .js, .sh, .rs, .go, and 50+ more extensions open directly in Code Viewer
• Line numbers — optional gutter with configurable line numbers
• Zero dependencies — no external libraries at runtime, only Obsidian APIs
• Read-only by design — prevents accidental edits to source files
• Optional code editing — edit source files in-place via a temporary markdown file, with save and view controls
• Declarative settings — uses Obsidian 1.13+ settings API for native search and consistency
• Multi-language UI — English, 中文, Русский support

Usage

1. Install and enable the plugin
2. Click any supported file (.py, .ts, .sh, etc.) in the file explorer
3. The file opens in a read-only Code View with syntax highlighting
4. Click the edit button (top-right) to create a temporary .md file for editing
5. Use Save and View buttons in the editor to sync changes back

You can customize which extensions are handled via Settings → Code Viewer.

Settings

Requirements: Obsidian 1.13.0 or later.

Note: Changing the extension list requires reloading Obsidian (Ctrl+R) to take effect.

Supported Languages

Python, PowerShell, Bash, TypeScript, TSX, JavaScript, JSX, C#, C, C++, SQL, YAML, TOML, Rust, Go, Lua, GDScript, Batch, Ruby, PHP, Perl, R, Dart, Kotlin, Swift, Vue, Svelte, INI, XML, HTML, CSS, SCSS, Less, JSON, JSON5, HCL, Protobuf, GraphQL, and more.

Installation

From Obsidian Community Plugins

1. Open Settings → Community plugins
2. Disable Safe mode
3. Click Browse and search for "Code Viewer"
4. Install and enable

Manual

cd /path/to/vault/.obsidian/plugins
git clone https://github.com/TracingOrigins/obsidian-code-viewer-plugin.git code-viewer
cd code-viewer
npm install && npm run build

Then enable the plugin in Settings → Community plugins.

Development

1. Copy .env.example to .env and set VAULT_PATH to your Obsidian vault path:

   VAULT_PATH=C:/Users/YourName/Documents/MyVault
   

2. Install dependencies and start developing:

npm install        # install dependencies
npm run dev        # watch mode (auto-deploys to vault)
npm run build      # production build (auto-deploys to vault)
npm run lint       # run eslint