Code indentation is broken (v1.3.0)

[define-private-public]

Hi. Thanks for this, I love the project!

I like to add in source code to my docs. Here is how it looks without the doxygen-awesome-css applied:

And here's how it looks with the custom CSS enabled:

(It would also be cool if there was an option to turn off the dark-theme for the code, it's a little hard to read surrounded by a bunch of white).

[r0ckarong]

You need to set the variable --fragment-whitespace to "pre" to get proper indentation. I would personally argue this should be the default. Needs a little line-height tweaking though.

https://developer.mozilla.org/en-US/docs/Web/CSS/white-space#values

[guyikcgg]

I think I'm facing a similar issue when rendering Markdown files. If I include a code block in Markdown, spaces used for alignment are gobbled/not rendered. I found out that this snippet included in doxygen-awesome.css:815 fixes my problem (not sure if it has further implications):

div.fragment .line {
    white-space: pre-wrap;
}

Adding screenshots for clarity:

Screenshot 1 (current state):

Screenshot 2 (proposed fix):

Just to give some context, I'm using version 1.2.2 of the project.

PS: Great job putting this style together, it really enhances our doc's look!!

[jothepro]

Yep, thats definitely broken. 🙈 Thanks for your suggestions to solve it. I'll look into them.

@define-private-public I currently do not plan to provide a light theme for code blocks. You could override the responsible variables to create your own theme though: https://github.com/jothepro/doxygen-awesome-css/blob/main/doxygen-awesome.css#L133

If you'll design a nice looking light code theme for yourself, pls share it with us! :)

[jothepro]

I've prepared a fix for this based on @r0ckarong s recommendation: #12 @define-private-public can you confirm that this fixes the problem?

[r0ckarong]

If you'll design a nice looking light code theme for yourself, pls share it with us! :)

In my use case I've adopted the solarized light style:

I'm not 100% sure this matches other implementations of the color scheme but it comes close enough.

  --fragment-background: #fdf6e3;
  --fragment-foreground: #586e75;
  --fragment-keyword: #cb4b16;
  --fragment-keywordtype: #268bd2;
  --fragment-keywordflow: #859900;
  --fragment-token: #2aa198;
  --fragment-comment: #657b83;
  --fragment-link: #d33682;
  --fragment-preprocessor: #2aa198;
  --fragment-linenumber-color: #586e75;
  --fragment-linenumber-background: #eee8d5;

[jothepro]

@r0ckarong I came up with the idea to share cool user customizations like your solarized code style with other users. I did this in your name to provide an example: https://github.com/jothepro/doxygen-awesome-css/discussions/13#discussioncomment-636460

[jothepro]

Ok, it took me some time to figure this out... Now code indentation should work fine. @define-private-public pls close this issue if you can confirm that!

[define-private-public]

Hi,

I can confirm that the changes fixed it for me. Please add a new tag to this commit, as I clone this repo as a submodule in my project.

Thanks again.

On Tue, Apr 20, 2021 at 2:52 PM jothepro @.***> wrote:

Ok, it took me some time to figure this out... Now code indentation should work fine. @define-private-public https://github.com/define-private-public pls close this issue if you can confirm that!

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/jothepro/doxygen-awesome-css/issues/9#issuecomment-823521062, or unsubscribe https://github.com/notifications/unsubscribe-auth/ABCXGAIQDZLQ4UTW62EMUB3TJXEN7ANCNFSM43E74XAA .