Code blocks
Code blocks are rendered by the ProsePre component of @nuxtjs/mdc and code highlighting is done underneath by Shiki.
export default defineNuxtConfig({
modules: ['@bitrix24/b24ui-nuxt']
})
```ts
export default defineNuxtConfig({
modules: ['@bitrix24/b24ui-nuxt']
})
```
https://github.com/bitrix24/b24ui/tree/main/src/theme/pre.ts
export default {
slots: {
root: 'relative group my-5 w-full',
header: 'flex items-center gap-1.5 border border-(--ui-color-design-tinted-na-stroke) bg-(--ui-color-base-8) text-(--ui-color-design-tinted-na-content) border-b-0 relative rounded-t-md px-4 py-3',
filename: 'text-(--ui-color-design-tinted-na-content) text-(length:--ui-font-size-md)/(--ui-size-xl)',
icon: 'size-[16px] shrink-0 mt-px',
copy: 'absolute top-[11px] right-[11px] lg:opacity-0 lg:group-hover:opacity-100 transition',
base: 'text-green-350 group text-pretty text-(length:--ui-font-size-md)/(--ui-font-line-height-md) font-[family-name:var(--ui-font-family-system-mono)] border border-(--ui-color-design-tinted-na-stroke) bg-(--ui-color-g-plastic-greish-bg) rounded-(--ui-border-radius-md) px-4 py-3 whitespace-pre-wrap break-words overflow-x-auto focus:outline-none **:[.line]:block **:[.line.highlight]:-mx-4 **:[.line.highlight]:px-4 **:[.line.highlight]:bg-(--ui-color-g-plastic-bluish-bg)/30!'
},
variants: {
filename: {
true: {
root: '[&>pre]:rounded-t-none [&>pre]:my-0 my-5'
}
}
}
}
Language
Syntax highlighting is available for dozens of programming languages.
<script setup lang="ts">
const message = ref('Hello World!')
function updateMessage() {
message.value = 'Button clicked!'
}
</script>
<template>
<div>
<h1>{{ message }}</h1>
<B24Button @click="updateMessage">
Click me
</B24Button>
</div>
</template>
```vue
<script setup lang="ts">
const message = ref('Hello World!')
function updateMessage() {
message.value = 'Button clicked!'
}
</script>
<template>
<div>
<h1>{{ message }}</h1>
<B24Button @click="updateMessage">
Click me
</B24Button>
</div>
</template>
```
By default for syntax highlighting,
material-theme-lighter and material-theme-palenight VSCode themes are used for light & dark mode respectively.Filename
Code blocks support filename display with automatic icon detection.
nuxt.config.ts
export default defineNuxtConfig({
modules: ['@bitrix24/b24ui-nuxt']
})
```ts [nuxt.config.ts]
export default defineNuxtConfig({
modules: ['@bitrix24/b24ui-nuxt']
})
```
Line highlighting
Highlight specific lines to draw attention to important parts.
nuxt.config.ts
export default defineNuxtConfig({
modules: ['@bitrix24/b24ui-nuxt'], // This line is highlighted
css: ['~/assets/css/main.css']
})
```ts [nuxt.config.ts] {2}
export default defineNuxtConfig({
modules: ['@bitrix24/b24ui-nuxt'], // This line is highlighted
css: ['~/assets/css/main.css']
})
```
Code diff
Use the diff language to show changes between code versions.
nuxt.config.ts
export default defineNuxtConfig({
modules: [
- '@bitrix24/b24ui'
+ '@bitrix24/b24ui-nuxt'
]
})
```diff [nuxt.config.ts]
export default defineNuxtConfig({
modules: [
- '@bitrix24/b24ui'
+ '@bitrix24/b24ui-nuxt'
]
})
```
Inline code
Inline code snippets are rendered by the ProseCode component of @nuxtjs/mdc.
inline code
`inline code`
https://github.com/bitrix24/b24ui/tree/main/src/theme/code.ts
export default {
slots: {
base: 'px-1.5 py-0.5 font-[family-name:var(--ui-font-family-system-mono)] font-(--ui-font-weight-medium) text-(length:--ui-font-size-sm)/[normal] rounded-(--ui-border-radius-md) inline-block ring ring-inset text-(--b24ui-color) bg-(--b24ui-background) ring-(--b24ui-border-color)'
},
variants: {
color: {
'air-primary': {
base: 'style-tinted'
},
'air-primary-success': {
base: 'style-tinted-success'
},
'air-primary-alert': {
base: 'style-tinted-alert'
},
'air-primary-copilot': {
base: 'style-tinted-copilot'
},
'air-primary-warning': {
base: 'style-tinted-warning'
},
'air-secondary': {
base: 'style-tinted-no-accent-1'
},
'air-tertiary': {
base: 'style-filled-black'
},
default: {
base: 'style-old-default'
},
danger: {
base: 'style-old-danger'
},
success: {
base: 'style-old-success'
},
warning: {
base: 'style-old-warning'
},
primary: {
base: 'style-old-primary'
},
secondary: {
base: 'style-old-secondary'
},
collab: {
base: 'style-old-collab'
},
ai: {
base: 'style-old-ai'
}
}
},
defaultVariants: {
color: 'air-secondary'
}
}
Color
Use the color prop to change the color of the inline code. Defaults to air-secondary.
inline code
`inline code`{color="air-primary-alert"}
Lang
Use the lang prop to specify the language of the inline code.
nuxt.config.ts
`nuxt.config.ts`{lang="ts-type"}