Obsidian Stats logoObsidian Stats

Code Viewer

by Kevin
5
4
3
2
1
Score: 51/100
Install Code

Description

View and edit code files with native syntax highlighting.

Reviews

No reviews yet.

Stats

2
stars
2,569
downloads
1
forks
80
days
34
days
77
days
0
total PRs
0
open PRs
0
closed PRs
0
merged PRs
0
total issues
0
open issues
0
closed issues
15
commits

Latest Version

1.0.6
3 months ago

Changelog

English Changelog

🐛 Fix

  • Resolve Obsidian plugin review lint warnings

中文更新日志

🐛 修复

  • 解决 Obsidian 插件审核的 lint 警告

Русский Changelog

🐛 Исправление

  • Устранены предупреждения линтера для прохождения проверки плагина Obsidian
See all version on GitHub

README file from

Github

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

Setting Default Description
File extensions 50+ extensions Comma-separated list of file extensions to open with Code Viewer
Show line numbers On Toggle the line number gutter
Enable code editing On Show the edit button for inline source editing
Edit open mode Current tab Where the editor opens: current tab or a new tab

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 the Official Community Plugin Market (Recommended)

  1. Open Obsidian and go to Settings → Community plugins
  2. Turn off Safe mode
  3. Click Browse and search for "Code Viewer"
  4. Click Install, then Enable

Manual Installation

  1. Download the latest main.js, manifest.json and styles.css from Releases
  2. Create a code-viewer folder in your vault's plugin directory (e.g. YourVault/.obsidian/plugins/code-viewer/) and place the three files inside
  3. Enable the plugin in Settings → Community plugins

Install via BRAT (Recommended for Testers)

  1. Install the BRAT plugin
  2. Open BRAT settings and click Add Beta plugin
  3. Enter TracingOrigins/obsidian-code-viewer-plugin
  4. Enable the plugin

Development Guide

  1. Clone the repository:

    git clone https://github.com/TracingOrigins/obsidian-code-viewer-plugin.git
cd obsidian-code-viewer-plugin

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

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

  3. 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

Support & Feedback

If this plugin helps you, please consider:

Sponsors