Customizing HTML Preview

Customizing the preview can be done by providing a custom CSS to use for the preview HTML page and/or adding HTML code into the final preview page so you can control what you include and where. No validation is done on the custom CSS or HTML you add so you will have to debug your customizations. For JavaFX WebView you can use Google Chrome Dev Tools by enabling debugging: Debug Settings#javafx-webview-debugging-with-google-chrome-dev-tools

You can also create different rendering profiles and assign them based on scopes, allowing you to control rendering profiles on a per file basis. Rendering Profiles Settings

Stylesheet customization settings are found in Preferences on OS X and File/Settings on Windows and Linux, Languages & Frameworks > Markdown > Stylesheet

Scripts

If you have JavaFX browser based preview then these can be enabled to be included in the page for the following effects:

• Details tag opener: will put all <details> tags into their open state. Useful when working on documents that contain these to allow seeing their content in the preview. Without this script the tags will revert to their closed state every time you modify the document and the preview is updated.
• HighlightJS: used for syntax highlighting fenced code and indented code elements without line numbers.
• Prism.js: used for syntax highlighting fenced code and indented code elements with line numbers. Note that experience has shown that it can affect rendering performance of JavaFX browser and with it the typing response in the editor.
• GitHub Collapse Markdown: will convert all headers to collapsible sections based on header hierarchy. Currently marked as experimental because open/closed state information for headers is not persisted across preview updates causing all headers to start in their open state. In a future version open/closed state will be persisted making this script useful for working on large documents.

HTML Generation

HTML customization settings are found in Markdown Navigator preferences in Html Generation Settings section. Text editor boxes let you insert custom HTML code in a particular point in the generated HTML. The location of the insertion is shown in the form to make it easier to see where the text will be inserted in the HTML document.

The customization process and effort will depend on whether you are customizing Swing HTMLEditorKit Preview or the new JavaFX WebView Preview.

Included Style Sheets

• Swing stylesheets
  darcula.css
  default.css
  layout.css

• JavaFX stylesheets
  darcula-fx.css
  default-fx.css
  layout-fx.css

  • HighlightJS syntax highlighter script stylesheets
    hljs-darcula.css
    hljs-default.css

  • Prism syntax highlighter script stylesheets
    prism-darcula.css
    prism-default.css

JavaFX WebView Preview

The javaFX based preview tab is easier to customize because WebView is more compliant to current HTML and CSS standards. It also includes JavaScript so the customization spectrum is much wider.

Since the JavaFX based preview is highly compatible with a browser, the most comfortable way to tweak the CSS is to select the Show HTML Text used for rendering preview option . This will allow you to copy the generated HTML text to an HTML file and use the browser for previewing. When you are satisfied with the results you can copy the final Custom CSS text into the Custom CSS Text field or save it to a file and use the Custom CSS URL to load your file.

Adobe Brackets editor will allow you to preview live changes, edit css attributes right in the HTML page. It will also show you live preview of selector changes in the CSS which makes it easier to debug your CSS.

JavaFX WebView debugging with Google Chrome Dev Tools

Starting with version 2.5.0, enhanced plugin has JavaFx WebView Debugger for Google Chrome Dev Tools integrated into the preview window for comfortable JavaFX WebView debugging of scripts, HTML and CSS. It is a bit quirky and dependent on specific Chrome version but does allow HTML and script debugging directly in JavaFX WebView:

Debug Settings#javafx-webview-debugging-with-google-chrome-dev-tools

Swing HTMLEditorKit Preview

Customizing Swing HTMLEditorKit preview is more difficult. Many common and expected attributes are not supported and the only workaround that I found was to post process the generated HTML before passing it for rendering. That said, colors in the old preview can be easily customized.

This preview is not compatible with any browser. Browsers will render what Swing preview renders without much effort and usually identical results. The reverse will not hold and the only way to preview accurate results is to apply your changes and see what they look like in the preview.

The easiest way to customize the style sheet for Swing browser is to export HTML of a sample markdown file and enable Split Preview for HTML Documents in Markdown settings and select Default Swing as the preview browser for the preview Preview Settings. This way you will be able to see a preview of the current HTML and styles contained in the document. You can tweak the style and see if you get the desired results in the preview.

⚠️ Swing preview parses the document for <link href=""> that include .css files and loads them into the EditorKit as stylesheets. If none are found then it is assumed that default stylesheets provided by the plugin should be used. If you do not want this you should include a link to an empty css file.