Shiki Theme Issues

[Xiaozuoyi]

I changed the Markdown theme inside the template, but the background of the code block didn't change. But removed the article tag style prose-pre:!bg-neutral-100 ,then it changed the Shiki theme normally!

<article
  class="
       prose
       max-w-full
       dark:prose-invert
       prose-p:text-justify
       prose-pre:rounded-lg
       prose- img:rounded-lg
       prose-video:rounded-lg
       [&_.toc-item]:my-0
       [&_.toc-level]:mt-0"
  class:list={{ '[&_.toc]:hidden': !show('toc') }}
 >
   <slot />
</article>

Modified code block effect:

[ladit]

Yes. The vitesse-light theme use #ffffff as background. I can not change it separately according to the doc. And the color is styled directly on element, so I use tailwind with css important to overwrite it. Removing prose-pre:!bg-neutral-100 revert that back. Reach me if you have more concern!

[Xiaozuoyi]

This place can also simplify the code.

<article 
  class={`prose max-w-full dark:prose-invert ${!show("toc") ? "[&_.toc]:hidden" : ""}`}
 >
   <slot />
 </article>

 extend:{
      typography: theme => ({
        DEFAULT: {
        css: {
            p: {
              textAlign: 'justify',
              hyphens: 'auto',
              code: {
                'borderRadius': theme('borderRadius.DEFAULT'),
                'backgroundColor': '#d6ecf0',
                'padding': theme('spacing.1'),
                'color': '#003399',
                'fontWeight': '400',
                '&::before': {
                  content: 'none',
                },
                '&::after': {
                  content: 'none',
                },
              },
            },
            pre: {
              borderColor: theme('colors.neutral.100'),
              borderRadius: theme('borderRadius.lg'),
            },
            img: {
              borderRadius: theme('borderRadius.lg'),
            },
            video: {
              borderRadius: theme('borderRadius.lg'),
            },
          },
        },
      }),
   }

[ladit]

I have rewrited long class strings to Astro class:list directive which is also clean: https://github.com/ladit/astro-blog-zozo/commit/835b7dcd0a62c712fec2a0b2bb6bb9ab726ecdf5#diff-0ff18620bf4ea5e1b9573e88ce62d06d19dcdc082294e9d34846a5b2c6c0c676