MarkEdit-preview

Markdown preview for MarkEdit that leverages markedit-api.

Installation

Copy dist/markedit-preview.js to ~/Library/Containers/app.cyan.markedit/Data/Documents/scripts/. Details here.

Use dist/lite/markedit-preview.js if you don't need mermaid, katex and highlight.js; it's much smaller (about 250 KB, compared to about 5 MB for the full build).

Once installed, restart MarkEdit to apply the changes.

This extension automatically checks for updates and notifies you when a new version is available.

Building

Run yarn install && yarn build to build and deploy the script.

To build the lite version, run yarn build:lite instead.

Development

• yarn test — run tests
• yarn lint — run linting (also runs automatically before build)

How to Use

Access it from the Extensions menu in the menu bar, or use the keyboard shortcut Shift–Command–V.

To display local images, please ensure you're using MarkEdit 1.24.0 or later and follow the guide to grant file access.

This extension also exposes global functions, MarkEditGetHtml(styled: boolean) => Promise<string> and MarkEditRenderHtml(markdown: string, styled: boolean) => Promise<string>, allowing other extensions or scripts to easily generate the rendered HTML — either from the current document or from arbitrary markdown input.

Styling

This extension applies the github-markdown styling. You can customize the appearance by following the customization guidelines.

The preview pane can be styled using the markdown-body CSS class.

Settings

In settings.json, you can define a settings node named extension.markeditPreview to configure this extension, default settings are:

{
  "extension.markeditPreview": {
    "updateBehavior": "quiet",
    "syncScroll": true,
    "hidePreviewButtons": true,
    "syntaxAutoDetect": false,
    "imageHoverPreview": false,
    "themeName": "github",
    "styledHtmlColorScheme": "auto",
    "mathDelimiters": [],
    "changeMode": {
      "modes": ["side-by-side", "preview"],
      "hotKey": {
        "key": "V",
        "modifiers": ["Command"]
      }
    },
    "markdownIt": {
      "preset": "default",
      "options": {}
    }
  }
}

• updateBehavior: "automatic" downloads and installs the latest build in place, "quiet" shows a button, "notify" shows an alert, "never" disables update checks.
• syncScroll: Whether to enable scroll synchronization.
• hidePreviewButtons: Whether to hide the built-in preview buttons in side-by-side mode (not applicable for lite build).
• syntaxAutoDetect: Whether to enable automatic language detection for syntax highlighting in code blocks (not applicable for lite build).
• imageHoverPreview: Whether to enable image preview on hover.
• themeName: Set the preview color theme, available themes can be found in the styles/themes folder. Use "none" to disable preview styling and render the raw HTML.
• styledHtmlColorScheme: Determine the color scheme of saving styled html files, valid values are light, dark, and auto.
• mathDelimiters: Customize math delimiters for KaTeX rendering (not applicable for lite build), each delimiter object has left, right, and display properties, defaults to $...$, $$...$$, \(...\), and \[...\].
• changeMode.modes: Define available preview modes for the "Change Mode" feature.
• changeMode.hotKey: Assign keyboard shortcuts for mode switching. See the specification here.
• markdownIt.preset: Override the default markdown-it preset.
• markdownIt.options: Customize markdown-it options.

[!TIP]

In MarkEdit 1.33.0 or later, this extension also provides preview support in Quick Look.

To add menu items to the toolbar, see MarkEdit Customization wiki.

Community Extensions

• Direct Preview (by @Squarelight-ai): A setup helper that provides a one-click setup for a two-mode Edit/Preview toggle by configuring the toolbar item and changeMode.modes for you.

Contribution

Pull requests are welcome, but please discuss the proposal before making changes. This helps avoid misunderstandings and saves effort on both sides.