在Lume中，当我们使用typography来渲染Markdown时，默认的配置比较难看，如果想要修改code的样式，按照typography里面说的修改prose-code是行不通的，因为这样它会同时改变行code和代码块。

要想单独改变行code的CSS，选择器应该这么写：

:not(pre) > code {
    /* Inline code only */
}

现在我们必须给Tailwind写一个插件，来添加一个自定义的变量。如下：

 site
   .use(tailwindcss({
     extensions: [".html", ".jsx"],
     options: {
       plugins: [
         typography,
         function ({addVariant}) {
           addVariant( 
             'prose-inline-code',
             '&.prose :where(:not(pre)>code):not(:where([class~="not-prose"] *))'
           );
         }
       ],
     },
   }))

然后，我们就可以在Layout中如下使用：

<div class="prose prose-inline-code:rounded prose-inline-code:border">
    <!-- All your content goes here -->
</div>

附录

原文地址： https://aaronfrancis.com/2023/targeting-only-inline-code-elements-with-tailwind-typography-3b5e8d43

评论