VitePress中Markdown的基本应用

更加方便的显示表情

🎉 💯

卡片信息

INFO卡片信息

INFO

This is an info box.

TIP卡片信息

TIP

This is a tip.

WARNING卡片信息

WARNING

This is a warning.

DANGER卡片信息

DANGER

This is a dangerous warning.

DATAILS卡片信息

Details

This is a details block.

DANGER STOP卡片信息

STOP

Danger zone, do not proceed

DATAILS CODE卡片信息

Click me to view the code

console.log('Hello, VitePress!')

代码高亮

export default {
  name: 'MyComponent',
  // ...
}

代码块中的行突出显示

export default {
  data () {
    return {
      msg: 'Highlighted!'
    }
  }
}

指定多行突出

export default { // Highlighted
  data () {
    return {
      msg: `Highlighted!
      This line isn't highlighted,
      but this and the next 2 are.`,
      motd: 'VitePress is awesome',
      lorem: 'ipsum'
    }
  }
}

高斯模糊代码块

export default {
  data () {
    return {
      msg: 'Focused!' 
    }
  }
}

代码中的增删提示

export default {
  data () {
    return {
      msg: 'Removed' 
      msg: 'Added' 
    }
  }
}

代码中的错误和警告

export default {
  data () {
    return {
      msg: 'Error', 
      msg: 'Warning' 
    }
  }
}

导入代码片段

可以导入现有文件到代码片段（@的根目录在docs下）

typescript

console.log("用于测试脚本，将会被Markdown导入");
console.log("TESTING");

VitePress中Markdown的基本应用 #

目录 #

更加方便的显示表情 #

卡片信息 #

代码高亮 #

代码块中的行突出显示 #

高斯模糊代码块 #

代码中的增删提示 #

代码中的错误和警告 #

导入代码片段 #