Last active
February 5, 2026 14:55
-
-
Save GitMurf/5122c0c8405ffa36a03049d9f4434bf4 to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* 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; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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.