代码测试

代码行高亮

.vuepress/config.js

import { hopeTheme } from "vuepress-theme-hope";

export default {
  theme: hopeTheme({
    plugins: {
      shiki: {
        // 你想要使用的主题
        themes: {
          light: "github-light",
          dark: "one-dark-pro",
        },
      },
    },
  }),
};

代码折叠

你可以在代码块添加 :collapsed-lines / :no-collapsed-lines 标记来覆盖配置项中的设置。还可以在 :collapsed-lines 之后添加 = 来自定义起始折叠行号，例如 :collapsed-lines=12 表示代码块从第 12 行开始折叠。

html {
  margin: 0;
  background: black;
  height: 100%;
}

body {
  margin: 0;
  width: 100%;
  height: inherit;
}

/* the three main rows going down the page */

body > div {
  height: 25%;
}

.thumb {
  float: left;
  width: 25%;
  height: 100%;
  object-fit: cover;
}

.main {
  display: none;
}

.blowup {
  display: block;
  position: absolute;
  object-fit: contain;
  object-position: center;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2000;
}

.darken {
  opacity: 0.4;
}

代码差异标记

console.log('code')
console.log('ikun')
console.log('hewwo') 
console.log('hello') 
console.log('goodbye')

代码聚焦标记

console.log('Not focused')
console.log('Focused') 
console.log('Not focused')
console.log('Not focused')

版权所有

许可证：署名 4.0 国际 (CC-BY-4.0)