Skip to content

Stylesheet Settings

Vladimir Schneider edited this page Sep 22, 2018 · 4 revisions

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

Screen Shot Settings Css

  • Scheme: color scheme to use for the HTML preview:

    • Application UI: use the same scheme default/darcula as the application UI
    • Darcula: use the dark UI scheme
    • Default: use the light UI scheme
  • Stylesheet: the built in stylesheet to use

    • Default JavaFx Stylesheet: stylesheet for the JavaFX WebView browser
    • Default Swing Stylesheet : stylesheet for the Swing WebView browser
    • No Stylesheet: no stylesheet
  • Dynamic Width: when set dynamic page width will be used, otherwise page width will be set as per GitHub page style.

  • Apply CSS URI: when enabled allows injecting a CSS URI into the generated HTML

    • URI: URI to add to generated HTML

    • Add query suffix to URI which increments when file changes: when enabled will add a ?# to the end of the URI where # is an integer which will be incremented when the file represented by the URI changes.

      ⚠️ File changes are detected only if the URI represents a local file which is part of the current project.

  • Apply custom CSS text: when enabled allows adding custom CSS text into the generated HTML.

    The text will be automatically wrapped in <style></style> tags and should only contain valid CSS constructs.

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.
  • Katex Script: used for rendering GitLab Math LaTex extension. ⚠️ This script requires HTML Generation option Add <!DOCTYPE html> to be selected.
  • Mermaid Script: used for rendering GitLab Charts extension.
  • 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.