sclass HTMLTokenization {
  S internalID = aRandomID();
  S className = "cnc-" + internalID;
  
  new LS tokensHTML; // need to fill these at least
  new LS spacingsHTML;

  // add params for the div here like style or class
  new MapSO divParams;
  
  S headStuff() { ret ""; }
  
  int nCodeTokens() { ret l(tokensHTML); }
  
  S htmlAndJS() { ret html(); }
  S html() {
    ret hcss(replaceIdentifiers([[
      .className {
        margin: 15px;
        flex: 1;
        display: grid;
        grid-template-columns: repeat(]] + (nCodeTokens()*2+2) + [[, 1fr);
        border: 1px solid;
      }
  
      .className div {
        text-align: center;
        margin: 0;
        box-sizing: border-box;
        box-shadow: 1px 1px 0 1px;
        grid-column: auto / span 2;
      }
  
      .className div:nth-child(1),
      .className div:nth-child(]] + (nCodeTokens()+2) + [[) {
        grid-column: auto / span 1
      }
  ]], +className)) + div(lines(
    concatLists(
      ll(div()),
      safeMap div(tokensHTML),
      ll(div()),
      safeMap div(padList(spacingsHTML, nCodeTokens()+1, "")))),
    paramsPlus(divParams, class := className));
  }
}