How To Use Pikchr In Fossil Markdown and Fossil Wiki Markup

Embedded Pikchr In Markdown

To include a Pikchr diagram in the middle of a Markdown document in Fossil, simple place the Pikchr script in a fenced code block that has a class of "pikchr". Like this:

   ~~~ pikchr
   arrow; box "Hello!"; arrow

Or like this:

   ``` pikchr
   arrow; box "Hello!"; arrow

The result appears as follows:

arrow; box "Hello!"; arrow

Image Placement and Source Code Toggle Options

By default, the Pikchr-generated image appears left-justifed. If you would prefer that the picture be centered, put the keyword "center" after the class tag. Thus:

   ``` pikchr center
   arrow; box "Hello" "again"; arrow <-

Results in the following:

Hello again
arrow; box "Hello" "again"; arrow <-

Pikchrs embedded in Fossil documents can be toggled between their SVG and raw source code forms using the ctrl key and left mouse button, noting that (A) "ctrl" is actually environment-dependent and might be "alt" or the Mac-specific "Command" key, and (B) this feature requires that JavaScript is activated. If the source code should also be revealed by a simple click, add the word "toggle" after the pikchr class tag, as in this click-toggleable example:

Click to toggle
arrow ->; box "Click to" "toggle"; arrow <-

Notice that the source code is displayed left-aligned by default. It can be configured to display in the same approximate position as the image by adding the "source-inline" modifier:

Click to toggle (centered)
arrow ->; box "Click to" "toggle" "(centered)"; arrow <-

The full list of such modifiers, in alphabetical order:

Embedded Pikchr In Fossil Wiki

Fossil supports its own document markup format called (uncreatively) "Fossil Wiki". Fossil Wiki is basically just a safe subset of HTML with a few simple hyperlink, paragraph break, and list formatting enhancements. Fossil Wiki supports something similar to "fenced code blocks" in a special "<verbatim>" tag. All content in between "<verbatim>" and the next "</verbatim>", is displayed exactly as written. Hence, just as fenced code blocks are used to add Pikchr support to Markdown, so too the "<verbatim>" mechanism is used to add Pikchr support to Fossil Wiki.

In Fossil Wiki, Pikchr source text can be enclosed within "<verbatim type="pikchr">" or "<verbatim type="pikchr center"> through the next "</verbatim>" tag. Hence, code like this:

   <verbatim type="pikchr center">
   arrow; ellipse "Hi, Y'all"; arrow

Will result in a display like this:

Hi, Y'all
arrow; ellipse "Hi, Y'all"; arrow

Fossil's verbatim format supports the same range of modifiers as the Markdown format, as described above: simply add each modifier in the type attribute after the word pikchr.