MarkEdit-preview

Installing and choosing a view mode

MarkEdit-preview is an extension that adds Markdown view modes to MarkEdit and is built on the markedit-api project. Installation is done from the MarkEdit Extension Registry, which the README links to directly, rather than from a package manager. Building the extension locally uses yarn install and yarn build, which builds and deploys the script, and a lite version is built with yarn build:lite instead. Development commands are yarn test to run tests and yarn lint to run linting, and the README notes that linting also runs automatically before a build. To actually use the extension, you choose a mode from the Extensions menu under View Mode, or you use the keyboard shortcut Shift Command V to cycle through the available modes. The README also notes a requirement for local images: you need MarkEdit 1.24.0 or later and you must follow the customization guide to grant folder access. The extension exposes two global functions, MarkEditGetHtml and MarkEditRenderHtml, that other extensions or scripts can call to generate rendered HTML either from the current document or from arbitrary Markdown input. This makes the preview logic reusable by other parts of the MarkEdit ecosystem rather than locked inside the extension. The practical result is that a writer can keep working in MarkEdit and flip between writing and reading the rendered output without leaving the editor or opening a browser.

The settings you can tune

The extension is configured through a settings node named extension.markeditPreview in MarkEdit's settings.json, and the README prints the full default object so you can see every option. The updateBehavior setting controls how updates are applied and can be automatic, quiet, notify, or never. Sync scroll toggles scroll synchronization between the editor and the preview. Hide preview buttons controls the built in buttons in side by side mode, and the README notes this does not apply to the lite build. Syntax auto detect turns on language detection for code block highlighting, again not in the lite build. Image hover preview shows images on hover, and inline images controls whether mixed mode replaces image links with inline images. Theme name sets the preview color theme, with available themes in the styles/themes folder and none to disable styling. Styled HTML color scheme chooses light, dark, or auto for saved styled HTML files. Math delimiters customize KaTeX rendering and default to several common delimiters, with the README noting this is not in the lite build. The change mode block orders the modes by id, covering edit, side by side, preview, and syntax hidden, and assigns a hotkey. The markdownIt block lets you override the markdown-it preset and options. Each of these options is documented with a one line description, so the defaults are easy to adjust without guessing what a key does.

Styling, community extensions, and contribution

The preview applies github-markdown styling, and the README points to the github-markdown-css project as the source of that look. You can customize the appearance by following MarkEdit's customization guidelines, and the preview pane itself can be styled through the markdown-body CSS class. That class based approach means a theme author can adjust the preview with ordinary CSS rather than editing the extension. The README also lists two community extensions that build on MarkEdit-preview. Bidirectional Preview Sync keeps the editor and preview modes synchronized as you switch and scroll, replacing the extension's one way editor to preview sync. Direct Preview is a setup helper that configures the toolbar item and the change mode modes for you to give a one click two mode edit and preview toggle. Both are presented as optional companions rather than required parts of the extension. For people who want to change the extension itself, the contribution note asks for a discussion of the proposal before changes are made, on the grounds that this avoids misunderstandings and saves effort on both sides. Pull requests are welcome once that discussion has happened. The README keeps the main document focused on usage and settings and links out to the MarkEdit wiki for deeper customization, Quick Look support from MarkEdit 1.33.0, and toolbar item setup, which keeps the extension's own documentation concise while still pointing users to the details they need.

Editorial conclusion

MarkEdit-preview is a TypeScript extension under the MIT license that you install from the MarkEdit Extension Registry and configure through the extension.markeditPreview settings node in settings.json.