Differentiate your Obsidian source mode from Live Preview edit mode with a raw text like aesthetic using customizable monospace fonts and styling options.
Source Mode Styling enhances Obsidian's source mode editor by applying monospace fonts and customizable styling that's familiar to developers and text editor users. While Obsidian's default source mode shows markdown syntax but retains most visual formatting, this plugin gives you an authentic "raw" editing experience providing greater differentiation with the Live Preview editor mode.
Key Benefits:
- Full control over source mode appearance
- Monospace font detection - automatically finds available fonts on your system
- Real-time preview - changes apply instantly
- Theme-aware - respects your theme's colours when desired
- Cross-platform - works on desktop and mobile
- Open Obsidian Settings
- Go to Community plugins and disable Safe mode
- Click Browse and search for "Source Mode Styling"
- Install and enable the plugin
- Download the latest release from GitHub Releases
- Extract the files to your vault's
.obsidian/plugins/sourcemode-styling/directory - Reload Obsidian or restart the application
- Enable the plugin in Settings → Community plugins
- Open any markdown file in source mode
- Go to Settings → Community plugins → Source Mode Styling
- Customize your font and styling preferences
| Setting | Description | Options |
|---|---|---|
| Monospace font | Choose your preferred coding font | Auto-detected system fonts + theme default |
| Font weight | Control text thickness | Normal, Light, Semi-bold, Custom (100-900) |
| Font size | Adjust text size for readability | Custom or theme default |
| Font colour | Set font custom colour | Custom colour picker or theme default. |
| Line height | Adjust vertical spacing | Custom or theme default |
| Heading colour | Set custom headings colour. | Custom colour picker or theme default |
| Background colour | Set editor background | Custom colour picker or theme default |
The plugin automatically detects monospace fonts installed on your system, including popular options like:
- Source Code Pro
- Fira Code
- JetBrains Mono
- Consolas
- Monaco
- And many more...
Obsidian Live Preview mode
Default Obsidian Source Mode:
- Displays formatting syntax with theme styling
- Minimal visual differentiation from Live Preview mode
- Variable-width fonts
- Theme-dependent appearance
With Source Mode Styling:
- Clean, monospace text rendering
- Uses theme colours and styling
- Customizable colours and sizing
- True "raw" editor look and feel
- Clear differentiation from Live Preview editing
The plugin works seamlessly with Obsidian themes:
- Use "Theme default" options to maintain theme consistency
- Override specific elements (fonts, colours) while keeping theme aesthetics
- Custom settings persist across theme changes
For advanced users, the plugin adds a class .source-mode-raw and generates CSS that can be further customized:
/* All text */
.source-mode-raw .markdown-source-view.mod-cm6 .cm-scroller {
/* Your styles */
}
/* Headings */
.source-mode-raw .markdown-source-view.mod-cm6 .cm-header {
/* Your styles */
}- Obsidian Version: 1.9.14+
- Platforms: Windows, macOS, Linux, iOS, Android
- Themes: Compatible with all Obsidian themes
- Other Plugins: No known conflicts
- Ensure the font is properly installed on your system
- Try refreshing the plugin settings
- Check if the font supports monospace character spacing
- Make sure you're in source mode (not live preview)
- Try toggling the plugin off and on
- Restart Obsidian if issues persist
- Font selection is limited to system fonts on mobile
- Some advanced features may not be available on mobile platforms
Contributions are welcome! Please see our development documentation for setup instructions.
- Clone the repository
- Run
npm installto install dependencies - Run
npm run devfor development with hot reload - Run
npm run buildto build for production
See CHANGELOG.md for version history and release notes.
- Minimumum verified on Obsidian 1.9.x
MIT License © Chris Howard 2025
