How to change the color of the output?
Closed this issue · 46 comments
Thanks for your great plugin.
This is my code:
It renders as so:
How can I change the color and background color of the output text and the color of the output background?
I tried this:
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:
Am I missing something?
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.
Thanks for your fast reply.
Yes, I have installed execute code plugin.
https://github.com/twibiral/obsidian-execute-code
with these settings:
Ok. I'll have a look at it. Either this week, or worst case next week, and give you a feedback.
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
But I suggest to put it in your plugin configuration. It is likely, that someone who uses your plugin also uses excecute code plugin.
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.
Thank you very much for your response. I understand.
In the meantime one can use my own css to make it look as so:
Perhaps you can put this or a similar CSS into the documentation to help others.
What theme are you using? That Python Icon looks horrible. It should look like this:
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?
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. ;-))
Minimal theme looks like this on my machine.
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.
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:
/* Lösung für den Edit- und den Ansichts-Modus */
.comment {
display: contents;
}
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.
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.
Yes I used it, before I knew about your plugin. ;-) But as you see, it's deactivated.
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.
Switched all of my 33 css-files of.
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:
And the python icon is transparent ... ;-)
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.
Try to insert a new comment to see how that is displayed
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
I have 100 of them ... and some of them are switches on and some off.
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.
Believe it or not:
Only activating and deactivating of some plugins (and perhaps a restart of Obsidian) corrected the rendering of the comments...
Yes! Victory!!!!!
But you have the wrong python icon again :D
Oh ...
Strg-Shift-i should be my friend ...
yepp
are your plugins and themes up to date?
The first thing I do every day...
Too much information. Computer says "no"..
The first time ever:
Click on "computed". There is a summary what is applied. Maybe it is possible to better point out the problem.
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.
Here it is ...
any plugin which does something with images?
There is no arrow when I hover over this ....
you already found it!
Yes, but where is the causing css?
There is no arrow when I hover over this ....
I meant on the "computed" tab. But you already found it. Now you just have to figure out, what is causing this.
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.
This line is in none of my custom .css files ...
then it is a plugin....
Do you know U2?
"But I still have it found what I was looking for..."
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!
No problem :) Happy to help!
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.
I have to agree on this one. It would be too complicated.