mugiwara85 / CodeblockCustomizer

Codeblock Customizer plugin for Obsidian
MIT License
168 stars 7 forks source link

How to change the color of the output? #14

Closed merlinuwe closed 1 year ago

merlinuwe commented 1 year ago

Thanks for your great plugin.

This is my code:

image

It renders as so:

image

How can I change the color and background color of the output text and the color of the output background?

image

I tried this:

image

image

I also tried:

print("Es klappt - natürlich.")
print("Es klappt - natürlich.")
print("Es klappt - natürlich.")
print("Es klappt - natürlich.")
print("Es klappt - natürlich.")
print("Es klappt - natürlich.")
print("Es klappt - natürlich.")
print("Es klappt - natürlich.")
print("Es klappt - natürlich.")

The changes are ment for the code, not for the output:

image

Am I missing something?

mugiwara85 commented 1 year ago

Well, yes :) You are mixing two plugins here as far as I see. My plugin doesn't have an "output". You have an additionally installed plugin which runs the code. This plugin inserts the "output" part for the code block. So, to answer your question, this second plugin had to be modified to change the color. If you tell me what this plugin is called, I can have a look at it. Maybe I can somehow set the color for that part as well, but I don't want to promise anything.

merlinuwe commented 1 year ago

Thanks for your fast reply.

Yes, I have installed execute code plugin.

https://github.com/twibiral/obsidian-execute-code

with these settings:

image

mugiwara85 commented 1 year ago

Ok. I'll have a look at it. Either this week, or worst case next week, and give you a feedback.

merlinuwe commented 1 year ago

This is what I found:

/ background-color output Python, Javascript, ... / code.language-output { background-color: #0a4554 !important; / teal / }

/ background-color of text / .stdout { background-color: #d0f0c0; / hellgelb / }

/ color of text / :not(.use-custom-output-color) code.language-output span.stdout { color: black !important; font-weight: bold !important; }

I use it as R304.css in the folder .obsidian/snippets and activate it in Appearance

image

But I suggest to put it in your plugin configuration. It is likely, that someone who uses your plugin also uses excecute code plugin.

mugiwara85 commented 1 year ago

I looked at this problem, but unfortunately, this is not so easy to solve, if it is even possible. As I said earlier, this is a different plugin. I understand that it would be great if my plugin could also highlight lines in the output and offer the same functionality, but this just raises so many problems and questions, that I am not sure if it is feasible to solve this. I leave this ticket open, so I can think about it, but it might take a while until I have a solution.

merlinuwe commented 1 year ago

Thank you very much for your response. I understand.

In the meantime one can use my own css to make it look as so:

image

Perhaps you can put this or a similar CSS into the documentation to help others.

mugiwara85 commented 1 year ago

What theme are you using? That Python Icon looks horrible. It should look like this: image

I forgot to mention, when I tried it out, the background color was set for the output by default. Have you tried using a different theme?

merlinuwe commented 1 year ago

Yes, I work with Minimal theme dark mode.

I see, my Python icon has no transparent background.

Isn't the color of the line numbers a little bit to dark for this color? (Ok, mine is a little bit to light. ;-))

image

mugiwara85 commented 1 year ago

Minimal theme looks like this on my machine. image

Did you make any other changes? Maybe custom css or something like that? There is something wrong with the icon. Every icon has a transparent background. So it should work properly. You can change the color of the line numbers. It is called Gutter text color in the setting.

merlinuwe commented 1 year ago

Yes, I remember I had changed the color of the numbers. Now it is #dadada

Because of this issue with the comments I had to add some individual CSS:

image

/* Lösung für den Edit- und den Ansichts-Modus */

.comment  {
display: contents;

}
mugiwara85 commented 1 year ago

Wow! There is something very wrong with your Obsidian :D The plugin definitely does not show comments like that. I am 100% sure about that. image

I saw that behavior however, in other plugins. Do you maybe have installed and enabled Better Codeblock or Advanced Codeblock plugins? Or any other plugins which does something with code blocks? I would suggest to disable them one by one, and restart Obsidian every time after you disabled one. You can do that with the custom CSS as well. Something is messing things up.

merlinuwe commented 1 year ago

Yes I used it, before I knew about your plugin. ;-) But as you see, it's deactivated.

image

mugiwara85 commented 1 year ago

Hm.. but still. The comments should not look like that. I would still recommend disabling every plugin and custom CSS one by one and restarting obsidian, to see which causes this behavior. I think other people would have mentioned that already if it would cause this.

merlinuwe commented 1 year ago

Switched all of my 33 css-files of.

image

Aaaaaa...

(Good, that I noted before the ones that were off of them.)

But I found my lists.css, which changes the color of the background to black.

Found the bi...

/ Aufzählungen mit Nummern / / Nutze das minimal theme / /* .markdown-rendered pre {

    background-color: black !important;

} */

Now it looks so:

image

And the python icon is transparent ... ;-)

mugiwara85 commented 1 year ago

Looks much much better. Also note the python icon is shown as it should!

Now back to the comment. It is one line, because it has one line number. Are you sure there isn't any line break there. Or just insert a new comment.

mugiwara85 commented 1 year ago

Try to insert a new comment to see how that is displayed

merlinuwe commented 1 year ago

image

mugiwara85 commented 1 year ago

There is definitely something else. Did you also disable every plugin (just temporarily) and restarted obsidian? Minimal theme is not that black by default. So you must have something else

merlinuwe commented 1 year ago

I have 100 of them ... and some of them are switches on and some off.

mugiwara85 commented 1 year ago

ok :D You could just hit Ctrl + Shift + I hover to the comment, and maybe that way you could see what CSS is applied. That way maybe it would simpler to identify what is causing this.

merlinuwe commented 1 year ago

Believe it or not:

image

Only activating and deactivating of some plugins (and perhaps a restart of Obsidian) corrected the rendering of the comments...

mugiwara85 commented 1 year ago

Yes! Victory!!!!!

mugiwara85 commented 1 year ago

But you have the wrong python icon again :D

merlinuwe commented 1 year ago

Oh ...

merlinuwe commented 1 year ago

Strg-Shift-i should be my friend ...

mugiwara85 commented 1 year ago

yepp

mugiwara85 commented 1 year ago

are your plugins and themes up to date?

merlinuwe commented 1 year ago

The first thing I do every day...

merlinuwe commented 1 year ago

Too much information. Computer says "no"..

image

The first time ever:

image

mugiwara85 commented 1 year ago

Click on "computed". There is a summary what is applied. Maybe it is possible to better point out the problem.

merlinuwe commented 1 year ago

image

mugiwara85 commented 1 year ago

background color! What is setting that. If you hover to background color, a small arrow should appear. If you klick on it, it should take you the css what is setting that.

merlinuwe commented 1 year ago

Here it is ...

image

mugiwara85 commented 1 year ago

any plugin which does something with images?

merlinuwe commented 1 year ago

There is no arrow when I hover over this ....

image

mugiwara85 commented 1 year ago

you already found it!

merlinuwe commented 1 year ago

Yes, but where is the causing css?

mugiwara85 commented 1 year ago

There is no arrow when I hover over this ....

image

I meant on the "computed" tab. But you already found it. Now you just have to figure out, what is causing this.

mugiwara85 commented 1 year ago

Yes, but where is the causing css?

This is the causing css. There is some plugin which sets for img the background color. Unfortunately it is not visible which plugin it is.

merlinuwe commented 1 year ago

This line is in none of my custom .css files ...

mugiwara85 commented 1 year ago

then it is a plugin....

merlinuwe commented 1 year ago

Do you know U2?

merlinuwe commented 1 year ago

"But I still have it found what I was looking for..."

image

I searched wrong, so I did not found the image_size_color_border.css which had this line with background-color:

img  {
        border: solid 1px #c81c80; /* pink Rolli. Damit man svg-Bilder auf schwarzen Grund wenigstens am Rahmen erkennt */ 
       background-color: #f6f6f6;
}

Thank you VERY much for your support!

mugiwara85 commented 1 year ago

No problem :) Happy to help!

mayurankv commented 1 year ago

Hi, in regards to the original FR to do with letting highlighting work with the execute code plugin, I would vehemently argue against this aggregation. First of all, the execute plugin can allow for live response (i.e. a prompt which can be used to input to the program) so the number of lines would not be static necessarily even in Preview mode. Second, the execute plugin output is code OUTPUT, not source code, and as such highlighting this should have a totally different meaning to highlighting in the source code. I can probably come up with a number of other reasons to avoid doing this (let alone the added effort and overhead) but I would suggest avoiding this.

mugiwara85 commented 1 year ago

I have to agree on this one. It would be too complicated.