在个人博客里面,如果用的是 .md 格式的文档,那么像下面这样写 r 或其他语言的代码,网页上是能够正常显示语法高亮的,且修改 code 元素相关的 css 设定能够起作用。
```r
```
```bash
```
但是如果使用 .rmd 格式文档,再像下面这样写 r 代码,网页上除了无法正常显示语法高亮,连代码的背景颜色都是透明的,简直就像是写的不是代码而是普通的文本。
```{r}
```
我翻了下个人博客用的主题里面和 code 元素相关的 css 设定,如下。不造是哪里没设定好?
p code {
font-family: SFMono-Regular, Consolas, Liberation Mono, Menlo, Courier, monospace;
font-size: inherit;
background-color: rgba(238, 233, 233, 0.3);
padding: 0 2px;
border: 1px solid rgba(0, 0, 0, 0.08);
border-radius: 2px 2px;
line-height: inherit;
word-wrap: break-word;
text-indent: 0;
}
pre code {
font-family: SFMono-Regular, Consolas, Liberation Mono, Menlo, Courier, monospace;
display: block;
}
p code {
font-family: SFMono-Regular, Consolas, Liberation Mono, Menlo, Courier, monospace;
font-size: inherit;
background-color: rgba(238, 233, 233, 0.3);
padding: 0 2px;
border: 1px solid rgba(0, 0, 0, 0.08);
border-radius: 2px 2px;
line-height: inherit;
word-wrap: break-word;
text-indent: 0;
}
pre code {
font-family: SFMono-Regular, Consolas, Liberation Mono, Menlo, Courier, monospace;
display: block;
}
上面两段一样的代码,也是分别用这两种方式写的,结果一样。
```css
```
```{css}
```
打开浏览器的开发者模式看了看,两段代码的底层设定也没撒区别,除了……迷惑中……
# 对应```css
<code class="language-css hljs">
</code>
# 对应```{css}
<code class="hljs language-css">
</code>