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']
})
```
app.config.ts
export default defineAppConfig({
b24ui: {
prose: {
pre: {
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'
},
variants: {
filename: {
true: {
root: '[&>pre]:rounded-t-none [&>pre]:my-0 my-5'
}
}
}
},
codeIcon: {
'package.json': 'NodeIcon',
'tsconfig.json': 'TsconfigIcon',
'.npmrc': 'NpmIcon',
'.editorconfig': 'EditorconfigIcon',
'.eslintrc': 'EslintIcon',
'.eslintrc.cjs': 'EslintIcon',
'.eslintignore': 'EslintIcon',
'eslint.config.js': 'EslintIcon',
'eslint.config.mjs': 'EslintIcon',
'eslint.config.cjs': 'EslintIcon',
'.gitignore': 'GitIcon',
'yarn.lock': 'YarnIcon',
'.env': 'DotenvIcon',
'.env.example': 'DotenvIcon',
'.vscode/settings.json': 'VscodeIcon',
nuxt: 'NuxtIcon',
'.nuxtrc': 'NuxtIcon',
'.nuxtignore': 'NuxtIcon',
'nuxt.config.js': 'NuxtIcon',
'nuxt.config.ts': 'NuxtIcon',
'nuxt.schema.ts': 'NuxtIcon',
'tailwind.config.js': 'TailwindIcon',
'tailwind.config.ts': 'TailwindIcon',
vue: 'VueIcon',
ts: 'TypescriptIcon',
tsx: 'TypescriptIcon',
mjs: 'JsIcon',
cjs: 'JsIcon',
js: 'JsIcon',
jsx: 'JsIcon',
md: 'MarkdownIcon',
py: 'PythonIcon',
cs: 'CsharpIcon',
asm: 'AssemblyIcon',
f: 'FortranIcon',
hs: 'HaskellIcon',
fs: 'FsharpIcon',
kt: 'KotlinIcon',
rs: 'RustIcon',
rb: 'RubyIcon',
lsp: 'LispIcon',
ps1: 'PowershellIcon',
psd1: 'PowershellIcon',
psm1: 'PowershellIcon',
go: 'GoIcon',
gleam: 'GleamIcon',
bicep: 'BicepIcon',
bicepparam: 'BicepIcon',
exs: 'ElixirIcon',
erl: 'ErlangIcon',
sbt: 'ScalaIcon',
h: 'CppheaderIcon',
ino: 'ArduinoIcon',
pl: 'PerlIcon',
jl: 'JuliaIcon',
dart: 'DartlangIcon',
ico: 'FaviconIcon',
npm: 'NpmIcon',
pnpm: 'PnpmIcon',
npx: 'NpmIcon',
yarn: 'YarnIcon',
bun: 'BunIcon',
yml: 'YamlIcon',
terminal: 'TerminalIcon'
}
}
}
})
vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import bitrix24UIPluginVite from '@bitrix24/b24ui-nuxt/vite'
export default defineConfig({
plugins: [
vue(),
bitrix24UIPluginVite({
b24ui: {
prose: {
pre: {
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'
},
variants: {
filename: {
true: {
root: '[&>pre]:rounded-t-none [&>pre]:my-0 my-5'
}
}
}
},
codeIcon: {
'package.json': 'NodeIcon',
'tsconfig.json': 'TsconfigIcon',
'.npmrc': 'NpmIcon',
'.editorconfig': 'EditorconfigIcon',
'.eslintrc': 'EslintIcon',
'.eslintrc.cjs': 'EslintIcon',
'.eslintignore': 'EslintIcon',
'eslint.config.js': 'EslintIcon',
'eslint.config.mjs': 'EslintIcon',
'eslint.config.cjs': 'EslintIcon',
'.gitignore': 'GitIcon',
'yarn.lock': 'YarnIcon',
'.env': 'DotenvIcon',
'.env.example': 'DotenvIcon',
'.vscode/settings.json': 'VscodeIcon',
nuxt: 'NuxtIcon',
'.nuxtrc': 'NuxtIcon',
'.nuxtignore': 'NuxtIcon',
'nuxt.config.js': 'NuxtIcon',
'nuxt.config.ts': 'NuxtIcon',
'nuxt.schema.ts': 'NuxtIcon',
'tailwind.config.js': 'TailwindIcon',
'tailwind.config.ts': 'TailwindIcon',
vue: 'VueIcon',
ts: 'TypescriptIcon',
tsx: 'TypescriptIcon',
mjs: 'JsIcon',
cjs: 'JsIcon',
js: 'JsIcon',
jsx: 'JsIcon',
md: 'MarkdownIcon',
py: 'PythonIcon',
cs: 'CsharpIcon',
asm: 'AssemblyIcon',
f: 'FortranIcon',
hs: 'HaskellIcon',
fs: 'FsharpIcon',
kt: 'KotlinIcon',
rs: 'RustIcon',
rb: 'RubyIcon',
lsp: 'LispIcon',
ps1: 'PowershellIcon',
psd1: 'PowershellIcon',
psm1: 'PowershellIcon',
go: 'GoIcon',
gleam: 'GleamIcon',
bicep: 'BicepIcon',
bicepparam: 'BicepIcon',
exs: 'ElixirIcon',
erl: 'ErlangIcon',
sbt: 'ScalaIcon',
h: 'CppheaderIcon',
ino: 'ArduinoIcon',
pl: 'PerlIcon',
jl: 'JuliaIcon',
dart: 'DartlangIcon',
ico: 'FaviconIcon',
npm: 'NpmIcon',
pnpm: 'PnpmIcon',
npx: 'NpmIcon',
yarn: 'YarnIcon',
bun: 'BunIcon',
yml: 'YamlIcon',
terminal: 'TerminalIcon'
}
}
}
})
]
})
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`
app.config.ts
export default defineAppConfig({
b24ui: {
prose: {
code: {
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'
}
}
}
}
})
vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import bitrix24UIPluginVite from '@bitrix24/b24ui-nuxt/vite'
export default defineConfig({
plugins: [
vue(),
bitrix24UIPluginVite({
b24ui: {
prose: {
code: {
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"}