https://github.com/markedit-app/markedit-preview
Markdown preview for MarkEdit.
https://github.com/markedit-app/markedit-preview
Last synced: about 2 months ago
JSON representation
Markdown preview for MarkEdit.
- Host: GitHub
- URL: https://github.com/markedit-app/markedit-preview
- Owner: MarkEdit-app
- License: mit
- Created: 2025-05-25T10:06:49.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2026-04-29T14:18:03.000Z (about 2 months ago)
- Last Synced: 2026-04-29T16:19:27.199Z (about 2 months ago)
- Language: CSS
- Size: 8.39 MB
- Stars: 179
- Watchers: 4
- Forks: 10
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# MarkEdit-preview
Markdown preview for MarkEdit that leverages [markedit-api](https://github.com/MarkEdit-app/MarkEdit-api).
## Installation
Copy [dist/markedit-preview.js](dist/markedit-preview.js?raw=true) to `~/Library/Containers/app.cyan.markedit/Data/Documents/scripts/`. Details [here](https://github.com/MarkEdit-app/MarkEdit/wiki/Customization#entries).
Use [dist/lite/markedit-preview.js](dist/lite/markedit-preview.js?raw=true) if you don't need [mermaid](https://mermaid.js.org/), [katex](https://katex.org/) and [highlight.js](https://highlightjs.org/); it's much smaller (about 200 KB, compared to about 4 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](https://github.com/MarkEdit-app/MarkEdit/wiki/Customization#grant-folder-access) to grant file access.
This extension also exposes a global function, `MarkEditGetHtml(styled: boolean) => Promise`, allowing other extensions or scripts to easily generate the rendered HTML.
## Styling
This extension applies the [github-markdown](https://github.com/sindresorhus/github-markdown-css) styling. You can customize the appearance by following the [customization](https://github.com/MarkEdit-app/MarkEdit/wiki/Customization) guidelines.
The preview pane can be styled using the `markdown-body` CSS class.
## Settings
In [settings.json](https://github.com/MarkEdit-app/MarkEdit/wiki/Customization#advanced-settings), you can define a settings node named `extension.markeditPreview` to configure this extension, default settings are:
```json
{
"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`: `"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`](styles/themes) folder.
- `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](https://github.com/MarkEdit-app/MarkEdit/wiki/Customization#generalmainwindowhotkey).
- `markdownIt.preset`: Override the default [markdown-it](https://markdown-it.github.io/markdown-it/#MarkdownIt.new) preset.
- `markdownIt.options`: Customize [markdown-it](https://markdown-it.github.io/markdown-it/#MarkdownIt.new) options.
> Extension settings require MarkEdit 1.24.0 or later.
## Contribution
Pull requests are welcome, but please discuss the proposal before making changes. This helps avoid misunderstandings and saves effort on both sides.