DOM structure:
  <DIV.pikchr-wrapper>
    <DIV.pikchr-svg>
      <SVG.pikchr>...</SVG>
    </DIV.pikchr-svg>
    <PRE.pikchr-src>...</PRE>
  </DIV.pikchr-wrapper>

************************************************************/
div.pikchr-wrapper {/*outer wrapper elem for a pikchr construct*/}
div.pikchr-svg {/*wrapper for SVG.pikchr element*/}
svg.pikchr {/*pikchr SVG*/}
pre.pikchr-src {/*source code view for a pikchr (see fossil.pikchr.js)*/
  box-sizing: border-box;
  overflow: auto;
  text-align: left;
}
/* The .source-inline class tells the .source class that the
   source view, when enbaled, should be "inline" (same position
   as the graphic), else the sources are shifted to the left as
   if they were "plain text". */
div.pikchr-wrapper.center:not(.source),
div.pikchr-wrapper.center.source.source-inline{
  text-align: center;
}
div.pikchr-wrapper.center > div.pikchr-svg {
  width: 100%/*necessary for Chrome!*/;
}
div.pikchr-wrapper.center:not(.source) > pre.pikchr-src,
div.pikchr-wrapper.center:not(.source) > div.pikchr-svg,
div.pikchr-wrapper.center.source.source-inline > pre.pikchr-src,
div.pikchr-wrapper.center.source.source-inline > div.pikchr-svg{
  display:inline-block/*allows text-align to do the alignment*/;
}
div.pikchr-wrapper.indent:not(.source),
div.pikchr-wrapper.indent.source.source-inline{
  margin-left: 4em;
}
div.pikchr-wrapper.float-left:not(.source),
div.pikchr-wrapper.float-left.source.source-inline {
  float: left;
  padding: 4em;
}
div.pikchr-wrapper.float-right:not(.source),
div.pikchr-wrapper.float-right.source.source-inline{
  float: right;
  padding: 4em;
}

/* For .source view, pre.pikchr-src and reveal svg.pikchr... */
div.pikchr-wrapper.source > pre.pikchr-src {
  /* Source code  ^^^^^^^ is visible */
}

div.pikchr-wrapper:not(.source) > pre.pikchr-src {
  position: absolute !important;
  opacity: 0 !important;
  pointer-events: none !important;
  display: none !important;
}
div.pikchr-wrapper.source > div.pikchr-svg {

      pikFlags |= PIKCHR_PROCESS_DIV_FLOAT_LEFT;
    }else if( i==11 && strncmp(zArg, "float-right", 11)==0 ){
      pikFlags |= PIKCHR_PROCESS_DIV_FLOAT_RIGHT;
    }else if( i==6 && strncmp(zArg, "toggle", 6)==0 ){
      pikFlags |= PIKCHR_PROCESS_DIV_TOGGLE;
    }else if( i==6 && strncmp(zArg, "source", 6)==0 ){
      pikFlags |= PIKCHR_PROCESS_DIV_SOURCE;
    }else if( i==13 && strncmp(zArg, "source-inline", 13)==0 ){
      pikFlags |= PIKCHR_PROCESS_DIV_SOURCE_INLINE;
    }
    while( i<nArg && fossil_isspace(zArg[i]) ){ i++; }
    zArg += i;
    nArg -= i;
  }
  blob_append(&bSrc, zSrc, nSrc)
    /*have to dup input to ensure a NUL-terminated source string */;

/* These are described in pikchr_process()'s docs. */
#define PIKCHR_PROCESS_TH1        0x01
#define PIKCHR_PROCESS_TH1_NOSVG  0x02
#define PIKCHR_PROCESS_NONCE      0x04
#define PIKCHR_PROCESS_ERR_PRE    0x08
#define PIKCHR_PROCESS_SRC        0x10
#define PIKCHR_PROCESS_DIV        0x20
#define PIKCHR_PROCESS_DIV_INDENT        0x0100
#define PIKCHR_PROCESS_DIV_CENTER        0x0200
#define PIKCHR_PROCESS_DIV_FLOAT_LEFT    0x0400
#define PIKCHR_PROCESS_DIV_FLOAT_RIGHT   0x0800
#define PIKCHR_PROCESS_DIV_TOGGLE        0x1000
#define PIKCHR_PROCESS_DIV_SOURCE        0x2000
#define PIKCHR_PROCESS_DIV_SOURCE_INLINE 0x4000
#endif

/*
** Processes a pikchr script, optionally with embedded TH1, and
** produces HTML code for it. zIn is the NUL-terminated input
** script. pikFlags may be a bitmask of any of the PIKCHR_PROCESS_xxx
** flags documented below. thFlags may be a bitmask of any of the

**    this flag enables single-click toggling for the element.
**
**  - PIKCHR_PROCESS_DIV_SOURCE: adds the 'source' CSS class to the
**    outer DIV, which is a hint to the client-side renderer (see
**    fossil.pikchr.js) that the pikchr should initially be rendered
**    in source code form mode (the default is to hide the source and
**    show the SVG).
**
**  - PIKCHR_PROCESS_DIV_SOURCE_INLINE: adds the 'source-inline' CSS
**    class to the outer wrapper. If PIKCHR_PROCESS_DIV_SOURCE is
**    specified, this modifier indicates that the source code view
**    should be rendered "inline" (same position as the graphic), else
**    it is to be left-aligned.
**
** - PIKCHR_PROCESS_NONCE: if set, the resulting SVG/DIV are wrapped
** in "safe nonce" comments, which are a fossil-internal mechanism
** which prevents the wiki/markdown processors from re-processing this
** output. This is necessary when calling this routine in the context
** of wiki/embedded doc processing, but not (e.g.) when fetching
** an image for /pikchrpage.
**
** - PIKCHR_PROCESS_SRC: if set, a new PRE.pikchr-src element is
** injected adjacent to the SVG element which contains the
** HTML-escaped content of the input script. If
** PIKCHR_PROCESS_DIV_SOURCE or PIKCHR_PROCESS_DIV_SOURCE_INLINE is
** set, this flag is automatically implied.
**
** - PIKCHR_PROCESS_ERR_PRE: if set and pikchr() fails, the resulting
** error report is wrapped in a PRE element, else it is retained
** as-is (intended only for console output).
*/
int pikchr_process(const char * zIn, int pikFlags, int thFlags,
                   Blob * pOut){
  Blob bIn = empty_blob;
  int isErr = 0;

  if(!(PIKCHR_PROCESS_DIV & pikFlags)
     /* If any DIV_xxx flags are set, set DIV */
     && (PIKCHR_PROCESS_DIV_INDENT
         | PIKCHR_PROCESS_DIV_CENTER
         | PIKCHR_PROCESS_DIV_FLOAT_RIGHT
         | PIKCHR_PROCESS_DIV_FLOAT_LEFT
         | PIKCHR_PROCESS_DIV_SOURCE
         | PIKCHR_PROCESS_DIV_SOURCE_INLINE
         | PIKCHR_PROCESS_DIV_TOGGLE
         ) & pikFlags){
    pikFlags |= PIKCHR_PROCESS_DIV;
  }
  if(!(PIKCHR_PROCESS_TH1 & pikFlags)
     /* If any TH1_xxx flags are set, set TH1 */
     && (PIKCHR_PROCESS_TH1_NOSVG & pikFlags || thFlags!=0)){

            zWrapperClass = " float-left";
          }else if(PIKCHR_PROCESS_DIV_FLOAT_RIGHT & pikFlags){
            zWrapperClass = " float-right";
          }
          if(PIKCHR_PROCESS_DIV_TOGGLE & pikFlags){
            zClassToggle = " toggle";
          }
          if(PIKCHR_PROCESS_DIV_SOURCE_INLINE & pikFlags){
            if(PIKCHR_PROCESS_DIV_SOURCE & pikFlags){
              zClassSource = " source source-inline";
            }else{
              zClassSource = " source-inline";
            }
            pikFlags |= PIKCHR_PROCESS_SRC;
          }else if(PIKCHR_PROCESS_DIV_SOURCE & pikFlags){
            zClassSource = " source";
            pikFlags |= PIKCHR_PROCESS_SRC;
          }
          blob_appendf(pOut,"<div class='pikchr-wrapper "
                       "%s%s%s'>"
                       "<div class=\"pikchr-svg\" "
                       "style=\"max-width:%dpx\">\n",
                       zWrapperClass/*safe-for-%s*/,
                       zClassToggle/*safe-for-%s*/,
                       zClassSource/*safe-for-%s*/, w);
        }
        blob_append(pOut, zOut, -1);

**
** It optionally accepts a p=pikchr-script-code URL parameter or POST
** value to pre-populate the editor with that code.
*/
void pikchrshow_page(void){
  const char *zContent = 0;
  int isDark;              /* true if the current skin is "dark" */
  int pikFlags =
    PIKCHR_PROCESS_DIV
    | PIKCHR_PROCESS_SRC
    | PIKCHR_PROCESS_ERR_PRE;

  login_check_credentials();
  if( !g.perm.RdWiki && !g.perm.Read && !g.perm.RdForum ){
    cgi_redirectf("%s/login?g=%s/pikchrshow", g.zTop, g.zTop);
  }