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. That can be made easier by including the FireBug Lite script in JavaFx preview. The latter is only compatible with JavaFx WebView.

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.
• FireBug Lite: gives inspection capabilities to preview.
• 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 Generator section. It has several text editor boxes which 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 decipher.

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

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.

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 use Swing as the preview browser 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 in 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.