Frosti 🧊
How to customize code box

How to customize code box

Thu Jul 18 2024
2 minutes
tech Frosti Blog Project
191 words

添加行号#

在 src\styles\global.scss 中添加以下内容：

SCSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
pre .line {
  counter-increment: line;
  padding-left: 2.5em;
}

pre :not(:last-child).line::before {
  content: counter(line);
  position: absolute;
  left: 0;
  width: 3em;
  text-align: right;
  margin-right: 10px;
  color: #888;
}

改变主题#

Frosti 使用 Shiki 来渲染代码框， Shiki 已经提供了足够多的主题，不推荐使用 Prism。

有关于 Shiki 的主题详见：https://shiki.style/themes

在 astro.config.mjs 中修改内容：

JS
1
2
3
4
5
6
7
8
markdown: {
  shikiConfig: {
    themes: {
      light: 'github-light',
      dark: 'github-dark',
    },
  },
},