Skip to content

Fenced Code Settings

Vladimir Schneider edited this page Apr 10, 2020 · 1 revision

Fenced code rendering customization settings are found in Markdown Navigator preferences in Fenced Code section, under the HTML Generator.

Screen Shot Screenshot Fenced Code

  • Info (Language) column shows the fenced code info string of the fenced code
  • Rendering column allows selecting from a list of supported rendering options
  • Description column shows the description for the currently selected option

ℹ️ Not all rendering methods are interchangeable since they are provided by third-party sites. When changing rendering method, please verify that your fenced code content is properly rendered by the new selection.

Kroki Diagram Rendering

Markdown Navigator Enhanced supports rendering diagram images via https://kroki.io, by enabling the corresponding Kroki diagram type and using fenced code with corresponding info string to select diagram type:

Diagram Type Fenced Code Info png svg
C4 with PlantUML c4plantuml
Ditaa ditaa
Erd erd
GraphViz graphviz
Mermaid mermaid
Nomnoml nomnoml
PlantUML plantuml
Svgbob svgbob
UMlet umlet
Vega vega
Vega-Lite vegalite
WaveDrom wavedrom

The fenced code will be converted to an image with the diagram text encoded in the URL. Additionally, intentions to convert from fenced code to a markdown image element with an encoded URL and vice-versa are also supported.

The following Kroki.io diagram types are not supported because they caused server error at time of the plugin release:

Diagram Type Fenced Code Info png svg
BlockDiag blockdiag
SeqDiag seqdiag
ActDiag actdiag
NwDiag nwdiag
PacketDiag packetdiag
RackDiag rackdiag