Source Mode Image Renderer

English | 简体中文

English

简体中文

So you're using Obsidian in Live Preview mode. You move your cursor over a formatted word and boom, the hidden markdown syntax pops out and shoves your text halfway across the screen. This constant jumping is a total flow-killer. I call it Editor ADHD.

Markdown was originally built for the content and the syntax to live together. Why not just go back to Source Mode? In Source Mode, what you see is exactly what you typed. Asterisks stay asterisks. Nothing disappears, nothing jumps out, and nothing breaks your focus. That's how writing is supposed to feel.

But Source Mode has one big catch: you can't see your images. Trying to write without visuals is like driving a car without a rearview mirror. That's where the Source Mode Image Renderer plugin comes in. It does one simple thing: you type the image link, and the image renders right there below it.

Render image previews directly below image links in Obsidian Source mode.

Features

• Shows previews below ![[image.png]] links in Source mode.
• Supports width syntax such as ![[image.png|300]].
• Shows a friendly message when the image file cannot be found.
• Does not affect Live Preview or Reading View.

Installation

From Obsidian Community Plugins

Search for "Source Mode Image Renderer" in Obsidian's Community Plugins browser.

Manual installation

1. Download main.js, manifest.json, and styles.css from the latest release.
2. Copy them to your vault's .obsidian/plugins/source-mode-inline-images/ folder.
3. Reload Obsidian and enable the plugin in Settings → Community plugins.

Usage

Add an image embed in Source mode:

![[example.png]]
![[example.png|300]]

Limitations

• Width must be a number in pixels.
• Caption and size combinations such as 300x200 are not supported yet.
• Only works in strict Source mode. Live Preview and Reading View use Obsidian's native rendering.

Privacy

This plugin does not collect telemetry, does not use network requests, and does not access files outside your Obsidian vault.

Development

npm install
npm run dev
npm run build

License

MIT

简体中文

English

你用 Obsidian，你用实时预览模式，你光标往带标记的字上一放，那些隐藏的标记，Biu，弹出来了，把你后面的字挤得老远。光标一挪走，文本又缩回去了。就这来回哆嗦，你刚想好的那句文案，思路直接断在那儿。我管这叫编辑器多动症。

Markdown 这个东西，它本来就是为内容和标记共存而设计的。所见即所得，是后来硬加的，是花架子。我直接回到源码模式不就完了？源码模式里，敲的是什么就是什么，星号就是星号，不会消失，不会弹出来，不会挤你的字，不会打断你的思路。这才是写东西该有的样子。

但是源码模式有一个问题，你看不到图。写东西看不到图，这就跟开车没有后视镜一样，能开，但别扭。这个问题不解决，源码模式就不是完整的写作环境。所以 Source Mode Image Renderer 诞生了。干的事很简单，你输入图片连接，图片直接在下面渲染出来。

在 Obsidian 源码模式下，自动在图片链接下方实时渲染预览图片。

功能

• 在源码模式中，![[图片名.png]] 语法下方直接显示图片
• 支持通过 ![[图片名.png|300]] 指定图片显示宽度（单位：px）
• 找不到图片文件时显示友好的错误提示
• 不影响 Live Preview 模式和阅读模式的原生渲染

安装

从 Obsidian 社区插件安装

即将上线。

手动安装

1. 前往 Releases 页面，下载最新版本的 main.js、manifest.json、styles.css
2. 在你的 Obsidian 库中，进入 .obsidian/plugins/ 目录
3. 新建文件夹 source-mode-inline-images，将上述三个文件放入其中
4. 在 Obsidian 设置 → 第三方插件 中，关闭「安全模式」，然后启用 Source Mode Image Renderer

从源码构建

git clone https://github.com/hiforrest/source-mode-inline-images.git
cd source-mode-inline-images
npm install
npm run build

将生成的 main.js、manifest.json、styles.css 复制到插件目录即可。

使用

切换到源码模式后，正常书写图片链接语法，图片会自动显示在链接下方。

![[screenshot.png]]
![[assets/photo.jpg|400]]

注意：此插件仅在源码模式下生效。Live Preview 和阅读模式由 Obsidian 原生处理，不受影响。

限制

• 宽度必须是像素数值
• 暂不支持 300x200 等尺寸组合语法
• 仅在严格源码模式下生效，Live Preview 和阅读模式使用 Obsidian 原生渲染

隐私

此插件不收集遥测数据，不使用网络请求，不访问 Obsidian 库以外的文件。

开发

npm install
npm run dev
npm run build

许可证

MIT