Skip to content

Instantly share code, notes, and snippets.

@GitMurf
Last active February 5, 2026 14:55
Show Gist options
  • Select an option

  • Save GitMurf/5122c0c8405ffa36a03049d9f4434bf4 to your computer and use it in GitHub Desktop.

Select an option

Save GitMurf/5122c0c8405ffa36a03049d9f4434bf4 to your computer and use it in GitHub Desktop.
/* RAINBOW INDENT COLORS */
:root {
/* default */
--font-use-default: var(--default-font);
--font-size-use-default: var(--editor-font-size);
--indent-use-default: 1.8ch;
/* ------- */
/* theme */
--font-use-theme: inherit;
--font-size-use-theme: inherit;
--indent-use-theme: 1.8ch;
/* ----- */
/* wide */
--font-use-wide: monospace;
--font-size-use-wide: 12.5px;
--indent-use-wide: 4.0155ch;
/* ---- */
/* custom */
--font-use-custom: Arial;
--font-size-use-custom: 13px;
--indent-use-custom: 14.5px;
/* ------ */
/* SET FROM VARIABLES ABOVE UPDATING LAST WORD (e.g. ...-default) */
/* Copy and replace one of following: default, theme, wide, custom */
--rb-indent-font-family: var(--font-use-wide);
--rb-indent-font-size: var(--font-size-use-wide);
--rb-indent-width: var(--indent-use-wide);
--rb-left-offset: 3px;
/* ---------------------------------------------- */
--rb-line-width: 2px;
--rb-color-count: 8;
--rb-indent-1: #6854c1;
--rb-indent-2: #c724b1;
--rb-indent-3: #ff6900;
--rb-indent-4: #f6be00;
--rb-indent-5: #e4002b;
--rb-indent-6: #97d700;
--rb-indent-7: #00ab84;
--rb-indent-8: #00a3e0;
--rb-indent-bg-size: calc(var(--rb-color-count) * var(--rb-indent-width)) 1px;
--rb-indent-rainbow-bg: linear-gradient(
to right,
var(--rb-indent-1) 0 var(--rb-line-width),
transparent var(--rb-line-width) calc(1 * var(--rb-indent-width)),
var(--rb-indent-2) calc(1 * var(--rb-indent-width)) calc(1 * var(--rb-indent-width) + var(--rb-line-width)),
transparent calc(1 * var(--rb-indent-width) + var(--rb-line-width)) calc(2 * var(--rb-indent-width)),
var(--rb-indent-3) calc(2 * var(--rb-indent-width)) calc(2 * var(--rb-indent-width) + var(--rb-line-width)),
transparent calc(2 * var(--rb-indent-width) + var(--rb-line-width)) calc(3 * var(--rb-indent-width)),
var(--rb-indent-4) calc(3 * var(--rb-indent-width)) calc(3 * var(--rb-indent-width) + var(--rb-line-width)),
transparent calc(3 * var(--rb-indent-width) + var(--rb-line-width)) calc(4 * var(--rb-indent-width)),
var(--rb-indent-5) calc(4 * var(--rb-indent-width)) calc(4 * var(--rb-indent-width) + var(--rb-line-width)),
transparent calc(4 * var(--rb-indent-width) + var(--rb-line-width)) calc(5 * var(--rb-indent-width)),
var(--rb-indent-6) calc(5 * var(--rb-indent-width)) calc(5 * var(--rb-indent-width) + var(--rb-line-width)),
transparent calc(5 * var(--rb-indent-width) + var(--rb-line-width)) calc(6 * var(--rb-indent-width)),
var(--rb-indent-7) calc(6 * var(--rb-indent-width)) calc(6 * var(--rb-indent-width) + var(--rb-line-width)),
transparent calc(6 * var(--rb-indent-width) + var(--rb-line-width)) calc(7 * var(--rb-indent-width)),
var(--rb-indent-8) calc(7 * var(--rb-indent-width)) calc(7 * var(--rb-indent-width) + var(--rb-line-width)),
transparent calc(7 * var(--rb-indent-width) + var(--rb-line-width)) calc(8 * var(--rb-indent-width))
);
}
.mod-cm6.is-live-preview .HyperMD-list-line.cm-line:not(.HyperMD-list-line-1) {
overflow: hidden;
}
.mod-cm6.is-live-preview .HyperMD-list-line.cm-line .cm-hmd-list-indent {
position: relative;
font-family: var(--rb-indent-font-family) !important;
font-size: var(--rb-indent-font-size) !important;
vertical-align: top;
}
.mod-cm6.is-live-preview .HyperMD-list-line.cm-line .cm-hmd-list-indent::before {
content: '';
font-family: var(--rb-indent-font-family) !important;
font-size: var(--rb-indent-font-size) !important;
display: block;
position: absolute;
width: 100%;
top: -1.6em;
padding-bottom: 999em;
background-image: var(--rb-indent-rainbow-bg);
background-size: var(--rb-indent-bg-size);
left: var(--rb-left-offset);
}
.markdown-source-view.mod-cm6.is-live-preview .HyperMD-list-line {
padding-top: 0.15em;
padding-bottom: 0.15em;
}
@Cateroo
Copy link

Cateroo commented Feb 5, 2026

Anyone know how to edit the position of the text to align the left margin with the next level bullet?
eg. in the image, I want the 'L' in each of the Level texts to be right above the bullet point in the next sub-level.
Screenshot 2026-02-05 at 2 52 10 pm

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment