search

openstatusHQ / openstatus

🏓 The open-source synthetic monitoring platform 🏓
https://openstatus.dev
GNU Affero General Public License v3.0
6k stars 378 forks source link

feat: add `rehype-pretty-code` dark mode support #930

Closed mxkaske closed 1 month ago

mxkaske commented 1 month ago

Description

Right now, the pre code block doesn't support dark mode. It would be great to have a dark theme.

Documentation: https://rehype-pretty.pages.dev/#multiple-themes-dark-and-light-mode

Open for theme suggestions.

CleanShot 2024-07-12 at 22 20 06@2x CleanShot 2024-07-12 at 22 19 44@2x

PrateekPsingh commented 1 month ago

Hello I want to work on this issue, could you please assign this issue to me. Thanks!

Sahilpingale commented 1 month ago

Hello I want to work on this issue, could you please assign this issue to me. Thanks!

I tried to work on this one and looks like there might be an issue with rehype-pretty-code as it is rendering code blocks twice when using multiple themes.

Reference https://github.com/rehype-pretty/rehype-pretty-code/issues/107

Trjindal commented 1 month ago

hi @mxkaske the rehype pretty , say that the config file should be of .mjs instead .js extension. So do i change the config file for the same or should we switch to some other package ?? image

mxkaske commented 1 month ago

Hey guys! Amazing for your interest!

Ideally we stick with shiki and rehype-pretty-code. Feel free to bump or change file extension name if it helps.

Feel free to share more issues you face.

manaskumar3003 commented 1 month ago

Hey , is it already assigned or may i work on this??

mxkaske commented 1 month ago

This is not assigned to anyone.

amardeep911 commented 1 month ago

Hey, I would like to work on this. Is this already fixed?

mxkaske commented 1 month ago

Hey guys, please simply create a PR and attach that issue.

Ratnadeep2k commented 1 month ago

Hey guys, please simply create a PR and attach that issue.

can you please elaborate the issue ?

mxkaske commented 1 month ago

Hey @Ratnadeep2k! My bad. I was referring to this issue, #930.

The best would be to start with a PR that has a first draft of how to possibly solve dark mode support for the code sections.

I haven't assigned anyone because of the amount of helpful hands. I'd be happy to exchange on a PR! Of course, if something is unclear, this thread would be the best.

Cheers!

Trjindal commented 1 month ago

Hey @mxkaske , i have tried to work on this issue . but there is some issue with rehype-pretty-code and shiki that when dual theme is applied on code blocks it renders twice. for reference you can see this https://github.com/rehype-pretty/rehype-pretty-code/issues/107

Sama-004 commented 1 month ago

Hey @mxkaske , i have tried to work on this issue . but there is some issue with rehype-pretty-code and shiki that when dual theme is applied on code blocks it renders twice. for reference you can see this rehype-pretty/rehype-pretty-code#107

yeah I am also facing the same issue of duplicate codeblocks(one in light and one in dark) when adding dark theme to rehype

mxkaske commented 1 month ago

Gotcha! Do you have a reproducible PR for that where I can test it? Otherwise, will check try it out!

mxkaske commented 1 month ago

Solution: use tailwind to display or hide the blocks based on the data-theme. See #973 for the implementation.