Extending color-scheme from header-hierarchy to indentation-hierarchy:
Tip: each guide (= vertical line) could have different color, from rainbow palette, just like headers do.
Making it easy to visually distinguish indentation level.
Edit:
Colored indentation guides are requested also in Vertical lines for indents
Would it be possible to display “indentation guides” also in edit mode?
Don’t find a good solution yet. It will display differently if different tags - or * are used.
Hi, I’ve tried a lot of other themes but this and traffic signals seem to have become my favourites. I love the title bar from that theme but the overall colours seem much better in this one.
I see that you needed a solution for having the vertical lines in editor mode for lists, right now it only shows up in the preview. So I managed to fix that using the code below, perhaps you want to add it to the theme too!
.cm-hmd-list-indent-1::before,
.cm-hmd-list-indent-2::before{
content: ' ';
border-left: 1px solid var(--border-color);
position: absolute;
height: 100%;
}
Nice!
Same here, that is why I blended the two a bit:
My favorite right now, by far.
Thank you for the suggestion. I didn’t set the vertical lines in editor mode because all the solution I can find including yours is far from perfect. I am looking forward to a better one.
Could you point out what’s the issue with the code? I haven’t gotten to testing it a great deal as I don’t have many notes with lists many levels deep. Does it break something I’m not aware of?
Using above style, it gives:
Then I change it slightly
.cm-hmd-list-indent .cm-tab::before{
content: ' ';
border-left: 1px solid var(--border-color);
position: absolute;
height: 100%;
}
which gives:
You can see it works for - but not for *
Oh I see. So mine only works one level down and yours works only for -. I’ll snatch that since I prefer using a hyphen anyways. Thanks for pointing the error!
windows7, Obsidian v0.7.6, obsidian-pisum, both dark and light mode.
Number sign “#” in obsidian-pisum before title has incorrect font size since Obsidian v0.7.6.
Without custom CSS, “#” displays correctly.
Edit: thank you for the clarification.
It is my setting making it small. Sorry for that. You can recover it by removing the following setting in the css:
/* Changing size/color of the header hashtags ## */
.cm-formatting-header {
font-size: 0.6em !important;
}
Observed issue: indented code block does not display it’s indentation in edit mode. Picture in edit mode, rendered (preview) mode, and in third party text editor:
- a
- b
- example:
```
⚑ID.
- q: ![[ID.q]]
- a: ![[ID.a]]
```
- c
Edit: I solved this by commenting out padding: 1px !important; in:
/***************************************/
/* Code block in Editor */
/***************************************/
/* Editor CodeBlock TEXT Appearance */
.cm-s-obsidian pre.HyperMD-codeblock {
font-family: monaco !important;
font-size: var(--font-size-code) !important;
// padding: 1px !important;
display: block;
color: var(--code-block) !important;
font-weight: 500;
}
I tested issue with asterisks in Obsidian v0.9.15.
Indentation guides now render the same for hyphens and asterisks so it could now be included into this theme.
/***************************************/
/* at a rule line before ul list */
/***************************************/
ul ul { position: relative; }
ul ul::before {
content:'';
border-left: 1px solid var(--border-color);
position: absolute;
}
ul ul::before { left: -1em; top: 0; bottom: 0; }
/* rule line when there are checkboxes*/
ul .task-list-item ul::before {left: 0.15em !important}
/* indentation guides in edit mode */ /* enabled 2020-09-15 */
.cm-hmd-list-indent .cm-tab, ul ul { position: relative; }
.cm-hmd-list-indent .cm-tab::before, ul ul::before {
content:'';
border-left: 1px solid var(--border-color);
position: absolute;
}
.cm-hmd-list-indent .cm-tab::before { left: 0.5em; top: -5px; bottom: -4px; }
ul ul::before { left: -1em; top: 0; bottom: 0; }
Alternative code for indentation guides in edit mode: Vertical lines for indents
Issue with indentation by spaces is logged in Editor: inconsistent code with tabs vs spaces
Andy Matuschak mode is now available as “Sliding panes” plugin so this theme could utilize it instead of corresponding CSS code.
Optionally, light mode can now be created to complement existing dark mode.
I love Pisum – thanks so much for making it available.
I do wonder if you can help with the following issue. In the screenshot below, you can see that using emojis breaks the CSS. It seems to add an arbitrary newline or carriage return in the preview mode. This does not happen when I use the standard theme for Obsidian. Is there anything that can be done to address this?
Thanks again,
Jack
Replying to myself… Found the issue.
I had installed the emoji toolbar plugin a while back. According to @pjeby over in Discord, “It’s emoji toolbar, yeah? If Twitter Emoji is turned on, it replaces emojis with HTML.” To fix the issue, they suggest: “You might not need to disable it entirely, just turning off its Twitter Emoji feature.”
This solved my issue.
I wonder if anyone can help me here with some CSS editing. I really really love this theme, but I also really want to remove the active line color. I attach a picture to make sure that you know what I’m talking about (No expert on CSS whatsoever)
You can use this CSS snippet,
.CodeMirror-activeline .CodeMirror-linebackground {
background-color: transparent !important;
}
This helped Rishi! Thank you so much.
I had the exact same issue as you (when using the Tasks Plugin its particularly challenging as it uses Emoji to signify date).
Thanks for saving me hours of troubleshooting!
