heading_level_display.css

.theme-light {
  --my-header-level-display-color: darkgray;
}

.theme-dark {
  --my-header-level-display-color: #585858;
}

.HyperMD-header.HyperMD-header-1.cm-line:hover:before,
.cm-formatting.cm-formatting-header.cm-formatting-header-1.cm-header.cm-header-1:before {
  content: "H1";
  font-size: 14px;
  color: var(--my-header-level-display-color);
  left: -20px;
  top: 0px;
  position: absolute;
}

.HyperMD-header.HyperMD-header-2.cm-line:hover:before,
.cm-formatting.cm-formatting-header.cm-formatting-header-2.cm-header.cm-header-2:before {
  content: "H2";
  font-size: 13px;
  color: var(--my-header-level-display-color);
  left: -19px;
  top: -1px;
  position: absolute;
}

.HyperMD-header.HyperMD-header-3.cm-line:hover:before,
.cm-formatting.cm-formatting-header.cm-formatting-header-3.cm-header.cm-header-3:before {
  content: "H3";
  font-size: 12px;
  color: var(--my-header-level-display-color);
  left: -18px;
  top: -2px;
  position: absolute;
}

.HyperMD-header.HyperMD-header-4.cm-line:hover:before,
.cm-formatting.cm-formatting-header.cm-formatting-header-4.cm-header.cm-header-4:before {
  content: "H4";
  font-size: 11px;
  color: var(--my-header-level-display-color);
  left: -17px;
  top: -3px;
  position: absolute;
}

.HyperMD-header.HyperMD-header-5.cm-line:hover:before,
.cm-formatting.cm-formatting-header.cm-formatting-header-5.cm-header.cm-header-5:before {
  content: "H5";
  font-size: 10px;
  color: var(--my-header-level-display-color);
  left: -16px;
  top: -4px;
  position: absolute;
}

.HyperMD-header.HyperMD-header-6.cm-line:hover:before,
.cm-formatting.cm-formatting-header.cm-formatting-header-6.cm-header.cm-header-6:before {
  content: "H6";
  font-size: 9px;
  color: var(--my-header-level-display-color);
  left: -15px;
  top: -5px;
  position: absolute;
}