Live preview¶

To view your content in Visual Studio CodeCursorZedJetBrains IDEs, you can use the Markdown Preview that Zensical Studio provides. Simply click the Open Preview button on top of your active editor. Preview needs no separate Python installation of its own: it's powered by a bundled renderer, so it works the same regardless of your project's Python environment.

Zensical Studio synchronizes the Markdown Preview with your editor location. Simply place the cursor into the content you wish to edit and the preview will follow. This includes opening the correct content tab or opening a collapsible details block to show the content that you are working on.

You can also open the Markdown Preview with Open the Command PaletteOpen the Command PaletteOpen the command paletteOpen Find ActionCtrl+Shift+PmacOSCmd+Shift+PWindowsCtrl+Shift+PLinuxCtrl+Shift+P and Zensical: Open Preview.

What preview renders¶

Preview is project-aware, not a generic Markdown renderer. It resolves snippets and strips their section markers, keeps front matter out of the rendered body, and renders configured emoji and icons, content tabs, interactive collapsible details blocks, math, Mermaid diagrams, relative links, and sanitized HTML: the parts of a page that are hardest to judge correctly from raw Markdown alone. Rendered content stays mapped back to the Markdown that produced it, including content pulled in from snippets.

Preview is a fast authoring view, not a full reproduction of your site build: it does not replicate arbitrary theme JavaScript, plugins, or custom runtime behavior. Use it for everyday editing feedback, then run the normal site build when you need to verify custom runtime behavior or the final theme. See troubleshooting if a rendered page looks different from what you expect.

Preview follows active file¶

When you select another file to edit, the Markdown Preview will switch to that file so that what you see always matches what you are working on. This works when you switch the editor manually or when you follow a link. Whichever way another editor gets activated, Markdown Preview follows.

Following links from preview¶

A relative Markdown link inside the preview opens the linked document in the editor rather than a browser. An anchor link, same-document or cross-document, positions the cursor at the linked heading and keeps editor and preview in sync. An external link shows a subtle outbound-link indicator so you can tell before clicking.

Visual Studio Code's integrated browser¶

You can run Zensical within a terminal window and display the output in a browser window.

1. Open the terminal panelOpen the terminal panelopen the terminal panelopen the terminal panelCtrl+`. If you are running Zensical in a virtual environment, make sure the correct virtual environment has activated. Run zensical serve to start Zensical in preview mode.

2. Open the Command PaletteOpen the Command PaletteOpen the command paletteOpen Find ActionCtrl+Shift+PmacOSCmd+Shift+PWindowsCtrl+Shift+PLinuxCtrl+Shift+P and type "Browser", then select Browser: Open Integrated Browser and point it at http://localhost:8000.