mugiwara85 / CodeblockCustomizer

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

FeatureRequest - change colour of text inside code block #76

Closed hackerman-Dan closed 3 months ago

hackerman-Dan commented 4 months ago

It would be nice to be able to change the colour of the text inside the codeblock - to overwrite syntax highlighting if desired

I want to use code blocks in some cases for copy+pasting only and want a specific colour of the text

Unless there is something I'm missing in the settings that it can be done already

mugiwara85 commented 4 months ago

No, that is not possible currently. How would you want to overwrite the color exactly? For whole code blocks? or just specific lines? Let's say, you define a color yellow, for code blocks with a code block language "abcd". This would mean, that every code block with this language defined will have it's text colored to yellow. Is this what you mean?

hackerman-Dan commented 4 months ago

Exactly! yeah like in previous note tools, I like to use light green for text with commands to paste into console. I would like to have a code block that then just the text is green. Currently we can edit all aspects of the code block except controlling the colour of the text within it

mugiwara85 commented 4 months ago

ok, I just didn't know if you wanted specific lines or the whole text in the code block. But the whole text is easier to implement :) I will look into it, because I am not sure what happens if you define colors for a language, which applies syntax highlighting. I look into, and get back to you.

hackerman-Dan commented 3 months ago

hey @mugiwara85, do you think this is possible?

mugiwara85 commented 3 months ago

Yes, I think, it will work. I will start to work on it at this weekend.

hackerman-Dan commented 3 months ago

hey man, any progress on this one?

mugiwara85 commented 3 months ago

Yeah, I am working on it. I think it will be ready on the weekend in worst case

mugiwara85 commented 3 months ago

hi, I just pushed it. It is not yet released, but you can just take the main.js file, and overwrite yours with it. In the "Language specific colors" tab you can now select "codeblock textcolor" and set a color. However, I just realized, that there is no way to set the colors for code blocks without a language specified. I have to add that as well.

Please test it and give a feedback! Thanks!

hackerman-Dan commented 3 months ago

I really like it thank you! Is there a way for the colours to also show when in editing mode? I only see it applying in reading mode

I have the setting enabled "Enable plugin in source mode", and I can see the codeblock border colours in editing mode for example but not the changes to the text colour

mugiwara85 commented 3 months ago

Hmm. It should apply to editing view as well. image Could you check in the console please, if you get any errors?

hackerman-Dan commented 3 months ago

weird I dont see any errors in the console image

and then when I switch to reading mode: image

mugiwara85 commented 3 months ago

That's interesting. It works on my machine image Could you send me your data.json file from your vault folder inside the plugins folder?

hackerman-Dan commented 3 months ago

data.json thanks for taking a look. I have saved my custom settings as theme with name Daniel

mugiwara85 commented 3 months ago

yeah, no problem. That's why I wanted you to test it. But interestingly it is still green on my machine: image

Could you please check in the inspector, if you select one line, which should be colored, and then check if the marked style is applied to cm-hmd-codeblock? Or if it is even applied at all? Probably not, and that's the problem. The question is why? The line should have the class codeblock-customizer-languageSpecific-credential (credential or run, or what language you specified) image

hackerman-Dan commented 3 months ago

huh yeah its crossed out in the source view weird image

and then if i look in the reading view, its not crossed out image

mugiwara85 commented 3 months ago

ah ok. So it is applied, but something overwrites it. What Obsidian Theme are you using? Maybe that causes the problem.

hackerman-Dan commented 3 months ago

ah yeah I am using the Atom theme, if I change to default it works perfectly :( I guess I have to try tweak something with Atom theme, thanks for helping me troubleshoot. I'll close the issue I guess

mugiwara85 commented 3 months ago

No, don't worry. I just have to add the !important flag, and then it will work :). I push it in a few seconds

mugiwara85 commented 3 months ago

I pushed it. Take the main.js, and it should work now, but please give a feedback :)

hackerman-Dan commented 3 months ago

wohoo it works! you're an absolute legend

mugiwara85 commented 3 months ago

Glad I could help :)