nothingislost / obsidian-codemirror-options

Obsidian plugin with options to customize the behavior of CodeMirror
GNU General Public License v3.0
172 stars 13 forks source link

Obsidian CodeMirror Options

The CodeMirror Options plugin improves the Obsidian desktop editor experience by adding features such as:

Notice regarding "Experimental Live Preview" mode

The Obsidian developers have recently released "Live Preview" mode to insiders. This new mode upgrades the desktop editor from CodeMirror 5 to CodeMirror 6 and enables much of the live rendering functionality provided by the CodeMirror Options plugin.

Due to the overlapping functionality and the different CodeMirror versions, "CodeMirror Options" and "Live Preview" are not compatible.

Once "Live Preview" is generally available, it will be recommended that you use that mode instead of the functionality provided by this plugin.

That being said, this plugin will continue to be maintained and enhanced in order to provide a form of "Live Preview" to anyone who wishes to stay on the legacy desktop editor version.

The primary drivers for staying on the legacy editor, at this time, are:

WYSIWYG/Live Preview Editing Experience

Markdown Parsing

Hide Markdown Tokens

This enables WYSIWYG/Live Preview like functionality in edit mode by hiding markdown tokens once you leave the marked up element

Token hiding currently supports em, strong, strikethrough, ==highlight==, inline code,

This feature also hides certain markup based on active line rather than active element such as:

Headers

Tables:

left aligned center aligned right aligned
left center right
left center right
left center right

Horizontal Rule (HR)


block quote

nested block quote

Code Rendering

2021-10-22 13 11 32

HTML Rendering
Banners

Visual Styling

Container Attributes

Front Matter CSS

This feature will parse front matter variables and add them to div.view-content as CSS variables as well as data attributes.

This allows you to use front matter variables as selectors or as values as seen in the snippet below.

---
custom-font-size: 1em
text-color: pink
tags: [codemirror, plugin, demo]
---
div[data-tags*="demo"] .CodeMirror-line,
div[data-tags*="demo"] p {
  font-size: var(--custom-font-size);
}

Since the variables and attributes are applied on div.view-content, you can use them to style both edit and preview modes.

Variables must be registered within the plugin settings page before they can be used in CSS. This is to prevent polluting the DOM with everything inside of front matter.

Inline Images

This adds support for inline images in edit mode, similar to Ozan's Image in Editor plugin. The main difference with this implementation is that it renders the image inline, and hides the source text. When clicking on the image, the image will collapse back down to its source text.

This implementation also allows for multiple images on a single line as well as support for Obsidian's image size syntax.

Templater Syntax Support

OpenMD does not play nicely with Templater's built-in syntax highlighting. To work around this, OpenMD now supports Templater syntax natively.

You'll need to make sure you disable Templater's native syntax highlighting option to avoid any conflicts.

The syntax highlighting theme can be changed or customized using Style Settings.

Headers in Lists

The Markdown syntax supports headers inside of list items but the default edit mode parser does not render them.

Table Improvements

Single Column Support

The default Obsidian Markdown parser does not support formatting single column tables in edit mode. Support for this has now been added to OpenMD.

single column support
row

Auto Align Tables

This feature is similar to the Advanced Tables plugin and will automatically align your tables as you type. The main difference is that this setting will auto align as you type where as Advances Tables will do a reformat on tab/enter.

This setting can coexist nicely with Advanced Tables and it is recommended to use both since Advanced Tables adds additional features like tab/enter key handling and a number of other useful table features.

Settings

Dynamic Cursor Sizing

When enabled, the cursor height will be determined by the max height of the entire line. When disabled, the cursor's height is based on the height of the adjacent reference character.

Retain Active Line on Selection

When enabled, text selection will not remove the .active-line class on the current line. When disabled text selection on the active line will remove the .active-line class.

Mark Selected Text with a CSS class

When enabled, selected text will be marked with the CSS class .CodeMirror-selectedtext. This replaces the default CodeMirror selection functionality which mimics a selection by painting a background layer behind the text. This new option grants more styling flexibility and avoids issues when selecting items that have defined backgrounds.

Use CodeMirror for syntax highlighting in preview mode

This setting creates consistent highlighting between edit and preview by using CodeMirror to highlight in both modes. Note: This setting requires the "Editor Syntax Highlight" plugin to function.

Fallback: Unify the default prism.js code block styling

This setting is a fallback option if you do not want to inject CM into preview mode. It will try and unify the prism.js colors to match the CodeMirror theme as close as possible.

Syntax Highlighting

When enabled, this plugin will apply a consistent syntax highlighting theme to code blocks in both edit and preview modes.

By default, the plugin applies the theme "Material: Palenight" to both light and dark modes.

If you'd like to customize the syntax highlighting theme, install Style Settings and explore the CodeMirror Options section within the Style Settings Plugin Options.

This plugin currently includes 4 theme options out of the box:

When using the custom theme, you can customize any of the available syntax highlighting colors. You can also use the custom theme option to import your own themes using the Style Settings import function.

Here's an example of importing the Dracula theme for use in dark mode only:

{
"CodeMirror Options@@cm-background@@dark": "#282a36",
"CodeMirror Options@@cm-foreground@@dark": "#f8f8f2",
"CodeMirror Options@@cm-comment@@dark": "#6272a4",
"CodeMirror Options@@cm-string@@dark": "#f1fa8c",
"CodeMirror Options@@cm-string-2@@dark": "#f1fa8c",
"CodeMirror Options@@cm-number@@dark": "#bd93f9",
"CodeMirror Options@@cm-variable@@dark": "#50fa7b",
"CodeMirror Options@@cm-variable-2@@dark": "#ffffff",
"CodeMirror Options@@cm-def@@dark": "#50fa7b",
"CodeMirror Options@@cm-operator@@dark": "#ff79c6",
"CodeMirror Options@@cm-keyword@@dark": "#ff79c6",
"CodeMirror Options@@cm-atom@@dark": "#bd93f9",
"CodeMirror Options@@cm-meta@@dark": "#f8f8f2",
"CodeMirror Options@@cm-tag@@dark": "#ff79c6",
"CodeMirror Options@@cm-attribute@@dark": "#50fa7b",
"CodeMirror Options@@cm-qualifier@@dark": "#50fa7b",
"CodeMirror Options@@cm-property@@dark": "#66d9ef",
"CodeMirror Options@@cm-builtin@@dark": "#50fa7b",
"CodeMirror Options@@cm-variable-3@@dark": "#ffb86c",
"CodeMirror Options@@cm-type@@dark": "#ffb86c",
"CodeMirror Options@@cm-activeline-background@@dark": "#414458",
"CodeMirror Options@@cm-matchingbracket@@dark": "#ffffff"
}

Similarly, you can import a theme for use in light mode by using @@light:

{
"CodeMirror Options@@cm-background@@light": "#282a36",
"CodeMirror Options@@cm-foreground@@light": "#f8f8f2",
"CodeMirror Options@@cm-comment@@light": "#6272a4",
"CodeMirror Options@@cm-string@@light": "#f1fa8c",
"CodeMirror Options@@cm-string-2@@light": "#f1fa8c",
"CodeMirror Options@@cm-number@@light": "#bd93f9",
"CodeMirror Options@@cm-variable@@light": "#50fa7b",
"CodeMirror Options@@cm-variable-2@@light": "#ffffff",
"CodeMirror Options@@cm-def@@light": "#50fa7b",
"CodeMirror Options@@cm-operator@@light": "#ff79c6",
"CodeMirror Options@@cm-keyword@@light": "#ff79c6",
"CodeMirror Options@@cm-atom@@light": "#bd93f9",
"CodeMirror Options@@cm-meta@@light": "#f8f8f2",
"CodeMirror Options@@cm-tag@@light": "#ff79c6",
"CodeMirror Options@@cm-attribute@@light": "#50fa7b",
"CodeMirror Options@@cm-qualifier@@light": "#50fa7b",
"CodeMirror Options@@cm-property@@light": "#66d9ef",
"CodeMirror Options@@cm-builtin@@light": "#50fa7b",
"CodeMirror Options@@cm-variable-3@@light": "#ffb86c",
"CodeMirror Options@@cm-type@@light": "#ffb86c",
"CodeMirror Options@@cm-activeline-background@@light": "#414458",
"CodeMirror Options@@cm-matchingbracket@@light": "#ffffff"
}

The CSS properties match closely to the standard properties used by CodeMirror. You can find more theme colors here and adapt them to the import format above. You can test view theme colors here.

Known Issues

Installation

Obsidian Community Plugin Browser

This plugin is available directly within the Obsidian app by navigating to Settings->Community Plugins->Browse

Beta Installation

Occasionally, pre-releases will be available for testing prior to official release. These can be installed using the Obsidian42 BRAT plugin.

To install a pre-release, download and enable the BRAT plugin, add the beta repository nothingislost/obsidian-codemirror-options, and then have BRAT check for updates.

Manual Installation

To manually install

  1. download the latest zipfrom the latest Github Release
  2. unzip the contents into the .plugins/obsidian-codemirror-options subdirectory of your vault.
  3. reload obsidian
  4. go into settings > third party plugins and activate obsidian-codemirror-options

For details see the forums.

Changelog

0.9.5

0.8.4

0.8.1-0.8.3

0.8.0

Shiny new things

Known Issues

0.7.0

Shiny new things

Improvements

0.6.0

Shiny new things

Improvements

0.5.3

0.5.2

0.5.1

0.5.0

Shiny new things

Bug fixes

0.4.2

0.4.1

0.4.0

Shiny new things

0.3.1

0.3.0

Shiny new things

0.2.1

0.2.0

0.1.4

0.1.3

0.1.2

0.1.1

0.1.0

0.0.8

0.0.7 (pre-release)

0.0.6

0.0.5

0.0.4

0.0.3

0.0.2

0.0.1