Неожиданный отступ первой строки ⇐ CSS

[Anonymous]

Я создаю генератор сайтов документации, используя Nuxt.js и MDX. Я создал собственный компонент CodeBlock для отображения фрагментов кода в моих файлах MDX. Кажется, что компонент отображается правильно, и стиль в целом нормальный, за исключением одной специфичной проблемы:
Проблема:
Первая строка кода внутри блока имеет постоянный отступ или слегка сдвинут вправо по сравнению с последующими строками. Это происходит только в первой строке блока кода. Сам тег кода не имеет каких-либо дополнений, и я убедился, что в исходных файлах MDX нет лишних пробелов, которые могли бы вызвать это.
Вот визуальное представление проблемы:< /p>


Настройка:
Nuxt.js: использование последней версии (пожалуйста, укажите версию, если возможно)
MDX: использование MDX для синтаксический анализ уценки
Пользовательский компонент CodeBlock: многомерные выражения визуализируются с использованием специального компонента CodeBlock Vue, который генерирует блок кода.
Подсветка синтаксиса: (укажите, если ты используя что-то вроде Prism.js илиhighlight.js)
исходный код моего компонента vue

Код: Выделить всё

import { Button } from '@/components/ui/button'
import { IconCopy } from '@tabler/icons-vue'
import { Toaster, toast } from 'vue-sonner'
import hljs from 'highlight.js'
import 'highlight.js/styles/github.css'
import vue from "highlight.js/lib/languages/vbscript-html"
import bash from "highlight.js/lib/languages/bash"

// Register the Vue and Bash languages
hljs.registerLanguage('vue', vue)
hljs.registerLanguage('bash', bash)

const props = defineProps({
content: { type: String, default: '' },
lang: { type: String, default: 'plaintext' },
})

import { ref, watch } from 'vue'
const highlightedCode = ref('')

watch(
() => props.content,
(newCode) => {
try {
highlightedCode.value =
props.lang && props.lang !== 'auto'
? hljs.highlight(props.lang, newCode.trim()).value
: hljs.highlightAuto(newCode.trim()).value
} catch {
highlightedCode.value = newCode.trim()
}
},
{ immediate: true }
)

const copyQuick = () => {
navigator.clipboard.writeText(props.content.trim())
toast.success('Copied to clipboard')
}






{{ props.lang }}

/* Firefox (uncomment to work in Firefox, although other properties will not work!) */
/** {
scrollbar-width: thin;
scrollbar-color: #397524 #DFE9EB;
}*/

/* Chrome, Edge and Safari */
*::-webkit-scrollbar {
height: 10px;
width: 10px;
}
*::-webkit-scrollbar-track {
border-radius: 5px;
@apply bg-background;
}

*::-webkit-scrollbar-thumb {
@apply bg-border pb-2 rounded-md;
}

.code-content {
@apply overflow-x-auto mb-1;
}
.code-content pre{
@apply m-0 p-0;
}
.code-content code{
@apply m-0 p-0;
white-space: pre;
}


вот рабочий пример на vue player:
https://play.vuejs.org/#eNrtV21v2zYQ/it ... njPXfHe+P5 dvSqqmarWozmozMTa1lZMsLW1YuwDMtYlcZSpVVl6JwSsZCleOd2k9uwJMKxFaWd0y3ZbSXm9MFqWaZTx8nrHAdjowphMxCJR6q2hLUhfNZagbbOtm7jiTlkU8 WTRCRYLwVx7DRPNa8yCqHOZsJ9daz4LZUueD6m3dRZk/My/ZwpVc4l7N3YBrA7CsuzoLmyv+yZFQV4rMCO6CyRK4pzbsx5OFrkYkPui8Uqp5RX7ISKLTsNR573 DnesEhHlKl6WfEVaQKRcCVqzRZ3nVG3ZY6o27EkjDwpjwWJ4UWiKlE6EZptuYUmruoRDmGVF0lGbn171HeXugswUjYoODjD0nrYSPimI6Pa2ifbMOZN2u15FAB 17hRe1taqkl3Eu46W/cbX9pcZ6chSOaMW15KUFHRF3sQLNyD8ECBIpg11nbJEzXltFWqaZhV+sqgZO9areAnEJ8T3GSWLPICTY2xM0BnXBGBh7dq24cb7tuA+ cFaUs4vEy9X661ztDFxYWYd9HpFTIwi6q7CmqoQ37MDSVFgd5gQTyNXN4SXdCK5bZIvd8LQvNO+hvYxeQmqeCjembQYx+h6CzwOEH3oDSv7iiW50FgzTH1tht7 pazoXW+utcysdmcTk9OVuvvHCETLkzz08cn1cYTGheBpdqQUblMkO0JKssXlpc7mo6sgdCFTGc3RpXoMl62u2RRyVzonysr0WXCEUq3sTkc8TxX6x88zepa+Or 2mEzEy3voN2bjaOHonRZG6BUSrj+zXKcCvnTHVx9+QnUMDguV1Dm4P3P4XuBmtbOxYbtA+GH2gM9b+7aolLboONfmagMXmu5SzlDH2fSocIRWe/mZq+/NfTJ76 nHwJ7zoMF2bfsAYLSCg4i4+QTwPfsWtTcCTQpbBa2GWqKPgjcvLa/TCtqujb9+I2BokS1pKFN3p7CT4mKjYUWB9ibib4DX2Fy6JHbXNZ6eXGHPJc+eFkP7W6L ltQ9jRQquCxi+HImsZRP54PAD0Zd1DLI/gk8B1CMOgccjdFvEUDQKLHgMuhqQqhd4zZ/mNaY8zpGvuUhapt2c4IDdpaoJU2qyOZrEZMLpbe0Hh6ACSyyjoqtEE q6jxiS/ecNSjI26yfwB3bA4VlkFA70UqfbPCU0cfoZ6jK104QT0gLN0FZ7rl/LGlT5wvxlNnM561T7A4XeBxP2D6L173f/H0DqKrxWJKa27jbBhZBKIxsPeeSC 5dnzx3gMl47IV42MTZMDmi8xdtZ2xN97ZNSrF2OH/c1pnV226JtnYof7biOVx/vm/Pgxfx0aPh7sH5OY3dAwZbO2ai730Oznqxkz1iSq0xM7iomBwdNcqG6Pkd 9CuI765wH2pHsffc313njuYWvO9MtySLQiQSD0PTtNzhIE36Jx6iGld7jRhxZMqt0jPMalWkuE5may2tuEa025u30eisdzBfxzNTx7EwZjJGJ5AY+9CUeikuv M1D8nVC+zqhfWET2p0a+x8nNcI0VYkElOCY3kh0QrWhSY0iRfWW+H+laK30kmTZnU6J5zZTdZqRwruivUkCs4rAvzAJz5TKesyDI6LjwAk+bmoblafyPOKataO g+yPnB7/9CapNYQJ8+OT5t88eP6WHr99cPb+6ANPOifJWXmZo6WJKV0navGgf+AL553Udz+dsLaKlREV0Mhvl7bCJ8bMdNvtx1O+R9/dhmdXIlkZCmyWaJ7I2c 3rWynnJqyrf0kFiNQI/JTKri6gROcA2uVdFqIl9AnZy7ozTB2C1EnqBiZFtmsoqInba4A4xSI0hrEBmo6ndx+k297PCaxl6MTMVetjciWzw/Xi++xORR2hv

Подробнее здесь: https://stackoverflow.com/questions/793 ... ndentation