Подсветка синтаксиса Prism

https://ecosystem.vuejs.press/plugins/markdown/prismjs.html

Базовые возможности

Обычный блок кода JS

import { defaultTheme } from '@vuepress/theme-default'
import { defineUserConfig } from 'vuepress'

export default defineUserConfig({
  title: 'Hello, VuePress',

  theme: defaultTheme({
    logo: 'https://vuepress.vuejs.org/images/hero.png',
  }),
})

Посмотреть код

```js
import { defaultTheme } from '@vuepress/theme-default'
import { defineUserConfig } from 'vuepress'

export default defineUserConfig({
  title: 'Hello, VuePress',

  theme: defaultTheme({
    logo: 'https://vuepress.vuejs.org/images/hero.png',
  }),
})
```

Блок кода JS без номеров строк

import { defaultTheme } from '@vuepress/theme-default'
import { defineUserConfig } from 'vuepress'

export default defineUserConfig({
  title: 'Hello, VuePress',

  theme: defaultTheme({
    logo: 'https://vuepress.vuejs.org/images/hero.png',
  }),
})

Посмотреть код

```js :no-line-numbers
import { defaultTheme } from '@vuepress/theme-default'
import { defineUserConfig } from 'vuepress'

export default defineUserConfig({
  title: 'Hello, VuePress',

  theme: defaultTheme({
    logo: 'https://vuepress.vuejs.org/images/hero.png',
  }),
})
```

Выделение конкретных строк (2,7-9)

import { defaultTheme } from '@vuepress/theme-default'
import { defineUserConfig } from 'vuepress'

export default defineUserConfig({
  title: 'Hello, VuePress',

  theme: defaultTheme({
    logo: 'https://vuepress.vuejs.org/images/hero.png',
  }),
})

Посмотреть код

```js {2,7-9}
import { defaultTheme } from '@vuepress/theme-default'
import { defineUserConfig } from 'vuepress'

export default defineUserConfig({
  title: 'Hello, VuePress',

  theme: defaultTheme({
    logo: 'https://vuepress.vuejs.org/images/hero.png',
  }),
})
```

Сворачивание кода после N строки (3)

import { defaultTheme } from '@vuepress/theme-default'
import { defineUserConfig } from 'vuepress'

export default defineUserConfig({
  title: 'Hello, VuePress',

  theme: defaultTheme({
    logo: 'https://vuepress.vuejs.org/images/hero.png',
  }),
})

Посмотреть код

```js :collapsed-lines=3
import { defaultTheme } from '@vuepress/theme-default'
import { defineUserConfig } from 'vuepress'

export default defineUserConfig({
  title: 'Hello, VuePress',

  theme: defaultTheme({
    logo: 'https://vuepress.vuejs.org/images/hero.png',
  }),
})
```

Блок кода с произвольным заголовком

.vuepress/config.js
import { defaultTheme } from '@vuepress/theme-default'
import { defineUserConfig } from 'vuepress'

export default defineUserConfig({
  title: 'Hello, VuePress',

  theme: defaultTheme({
    logo: 'https://vuepress.vuejs.org/images/hero.png',
  }),
})

Посмотреть код

```js title=".vuepress/config.js"
import { defaultTheme } from '@vuepress/theme-default'
import { defineUserConfig } from 'vuepress'

export default defineUserConfig({
  title: 'Hello, VuePress',

  theme: defaultTheme({
    logo: 'https://vuepress.vuejs.org/images/hero.png',
  }),
})
```

Выделение отдельных слов в кода

Чувствительно к регистру! Используются регулярные выражения.

const msg = 'Hello World'
console.log(msg) // prints Hello World

Посмотреть код

```js /Hello World/ /msg/
const msg = 'Hello World'
console.log(msg) // prints Hello World
```

Расширенные возможности

Отображение добавленных и удаленных строк кода

Лучше всего отключать номера строк при помощи :no-line-numbers!

// Обычный комментарий в коде
console.log('hi') 
console.log('hello') 
console.log('goodbye')

Посмотреть код

```js :no-line-numbers
// Обычный комментарий в коде
console.log('hi') // [!code --]
console.log('hello') // [!code ++]
console.log('goodbye')
```

Отображение фокуса и выделения на строках кода

Лучше всего отключать номера строк при помощи :no-line-numbers!

// Обычный комментарий в коде
console.log('Not focused')
console.log('Focused') 
console.log('Not focused')

Посмотреть код

```js :no-line-numbers
// Обычный комментарий в коде
console.log('Not focused')
console.log('Focused') // [!code focus]
console.log('Not focused')
```

// Обычный комментарий в коде
console.log('Not highlighted')
console.log('Highlighted') 
console.log('Not highlighted')

Посмотреть код

```js :no-line-numbers
// Обычный комментарий в коде
console.log('Not highlighted')
console.log('Highlighted') // [!code highlight]
console.log('Not highlighted')
```

Отображение уровней ошибок в коде

Лучше всего отключать номера строк при помощи :no-line-numbers!

// Обычный комментарий в коде
console.log('No errors or warnings')
console.warn('Warning') 
console.error('Error')

Посмотреть код

```js :no-line-numbers
// Обычный комментарий в коде
console.log('No errors or warnings')
console.warn('Warning') // [!code warning]
console.error('Error') // [!code error]
```