Strange block that hides top of the page in edit mode

[januszj]

Hi,

There is strange block that hides top of the page in edit mode:

Only visible with this theme.
When in preview mode it disapears.

[larsmew]

Hi,

I also experience the same issue when inserting a code block into a note. Otherwise, I haven't experienced this issue.

Would really love a fix for this!

[webbanthony]

I am also having this issue on Ubuntu 20.04

This is my favorite theme by far and I do a lot of coding so I would like this to be fixed as well!

[TibixDev]

I am also having the exact same issue, anyone any tips?

[PerryFinn]

I just ran into this problem too, maybe it's because I don't know how to write with this style of code block.
But I found the corresponding class to make it disappear by debugging tool .
First open the theme's css file and just comment out the following code.
You can use the shortcut Ctrl+F to find them.

.cm-s-obsidian pre.HyperMD-codeblock {
  color: var(--text-sub-accent);
}

.cm-s-obsidian div.HyperMD-codeblock-bg {
  background-color: #191621;
}

.cm-s-obsidian div.HyperMD-codeblock-begin-bg {
  border-top-left-radius: 0.3em;
  border-top-right-radius: 0.3em;
  border: none;
}

.cm-s-obsidian div.HyperMD-codeblock-begin-bg:before {
  position: absolute;
  content: '';
  top: -5%;
  left: 0;
  width: 100%;
  height: 60%;
  border-top-left-radius: 0.3em;
  border-top-right-radius: 0.3em;
  background-color: #191621;
} 

Of course if there is a way to do this without changing the source code, or if this is a bug, please let me know, thank you very much!

[frames75]

I just ran into this problem too, maybe it's because I don't know how to write with this style of code block. But I found the corresponding class to make it disappear by debugging tool . First open the theme's css file and just comment out the following code. You can use the shortcut Ctrl+F to find them.

.cm-s-obsidian pre.HyperMD-codeblock {
  color: var(--text-sub-accent);
}

.cm-s-obsidian div.HyperMD-codeblock-bg {
  background-color: #191621;
}

.cm-s-obsidian div.HyperMD-codeblock-begin-bg {
  border-top-left-radius: 0.3em;
  border-top-right-radius: 0.3em;
  border: none;
}

.cm-s-obsidian div.HyperMD-codeblock-begin-bg:before {
  position: absolute;
  content: '';
  top: -5%;
  left: 0;
  width: 100%;
  height: 60%;
  border-top-left-radius: 0.3em;
  border-top-right-radius: 0.3em;
  background-color: #191621;
} 

Of course if there is a way to do this without changing the source code, or if this is a bug, please let me know, thank you very much!

This works OK. However, by changing only next line works for me too (commented in this issue):

.cm-s-obsidian div.HyperMD-codeblock-begin-bg:before {
 - position: absolute;
 + position: relative;