Search code examples
htmlcssvue.jsnuxt.jssyntax-highlighting

Unexpected First Line Indentation

I'm building a documentation site generator using Nuxt.js and MDX. I've created a custom CodeBlock component to render code snippets within my MDX files. The component seems to be rendering correctly, and the styling is generally fine, except for one peculiar issue:

Problem:

The first line of code within block is consistently indented or pushed slightly to the right compared to subsequent lines. This happens only on the first line of the code block. The code tag itself does not have any padding set, and I've verified that there's no extra whitespace in my source MDX files that would cause this.

Here's a visual of the issue:

FirstLineIndentedToRightProblemImg

Setup:

Nuxt.js: Using a recent version (please specify version, if possible)

MDX: Using MDX to parse markdown

Custom CodeBlock Component: The MDX is rendered using a custom CodeBlock Vue component that generates the code block.

Syntax Highlighting: (mention if you're using something like Prism.js or highlight.js)

the source code of my vue component

<!-- filepath: /c:/Users/admin/Desktop/Full Typescript Projects/cognito 1.0/Vdocs/components/DocsBlocks/codeblock.vue -->
<script setup>
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')
}
</script>

<template>
  <div class="flex flex-col gap-0 my-1">
    <div class="codeblocknav relative w-full py-2 px-3 flex-place-center border-x border-t rounded-t-md border-border">
      <div class="text-sm px-3 rounded-md py-1 border border-border">
        {{ props.lang }}
      </div>
      <Button @click="copyQuick()" variant="outline" size="icon" class="ml-auto right-2 top-1">
        <IconCopy class="size-5" />
      </Button>
    </div>
    <Toaster />
    <div class="bg-background border border-border rounded-md mt-0 rounded-t-none w-full p-4 codeblock">
      <pre class="code-content">
        <code v-html="highlightedCode" :class="['language-' + props.lang]"></code>
      </pre>
    </div>
  </div>
</template>

<style scoped>
/* 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;
}
</style>

here is a workable example in vue playground:

https://play.vuejs.org/#eNrtV21v2zYQ/itXF6idzLSSvmCol3Rt0hToMGxdm/XLtA+UREuMJVEgKb8s8H/fQ+rFcpZ2AzYM/VDAsMnjPXfHe+P5dvSqqmarWozmozMTa1lZMsLW1YuwDMtYlcZSpVVl6JwSsZCleOd2k9uwJMKxFaWd0y3ZbSXm9MFqWaZTx8nrHAdjowphMxCJR6q2hLUhfNZagbbOtm7jiTlkU8WTRCRYLwVx7DRPNa8yCqHOZsJ9daz4LZUueD6m3dRZk/My/ZwpVc4l7N3YBrA7CsuzoLmyv+yZFQV4rMCO6CyRK4pzbsx5OFrkYkPui8Uqp5RX7ISKLTsNR573DnesEhHlKl6WfEVaQKRcCVqzRZ3nVG3ZY6o27EkjDwpjwWJ4UWiKlE6EZptuYUmruoRDmGVF0lGbn171HeXugswUjYoODjD0nrYSPimI6Pa2ifbMOZN2u15FAB17hRe1taqkl3Eu46W/cbX9pcZ6chSOaMW15KUFHRF3sQLNyD8ECBIpg11nbJEzXltFWqaZhV+sqgZO9areAnEJ8T3GSWLPICTY2xM0BnXBGBh7dq24cb7tuA+cFaUs4vEy9X661ztDFxYWYd9HpFTIwi6q7CmqoQ37MDSVFgd5gQTyNXN4SXdCK5bZIvd8LQvNO+hvYxeQmqeCjembQYx+h6CzwOEH3oDSv7iiW50FgzTH1tht7pazoXW+utcysdmcTk9OVuvvHCETLkzz08cn1cYTGheBpdqQUblMkO0JKssXlpc7mo6sgdCFTGc3RpXoMl62u2RRyVzonysr0WXCEUq3sTkc8TxX6x88zepa+Or2mEzEy3voN2bjaOHonRZG6BUSrj+zXKcCvnTHVx9+QnUMDguV1Dm4P3P4XuBmtbOxYbtA+GH2gM9b+7aolLboONfmagMXmu5SzlDH2fSocIRWe/mZq+/NfTJ76nHwJ7zoMF2bfsAYLSCg4i4+QTwPfsWtTcCTQpbBa2GWqKPgjcvLa/TCtqujb9+I2BokS1pKFN3p7CT4mKjYUWB9ibib4DX2Fy6JHbXNZ6eXGHPJc+eFkP7W6LltQ9jRQquCxi+HImsZRP54PAD0Zd1DLI/gk8B1CMOgccjdFvEUDQKLHgMuhqQqhd4zZ/mNaY8zpGvuUhapt2c4IDdpaoJU2qyOZrEZMLpbe0Hh6ACSyyjoqtEEq6jxiS/ecNSjI26yfwB3bA4VlkFA70UqfbPCU0cfoZ6jK104QT0gLN0FZ7rl/LGlT5wvxlNnM561T7A4XeBxP2D6L173f/H0DqKrxWJKa27jbBhZBKIxsPeeSC5dnzx3gMl47IV42MTZMDmi8xdtZ2xN97ZNSrF2OH/c1pnV226JtnYof7biOVx/vm/Pgxfx0aPh7sH5OY3dAwZbO2ai730Oznqxkz1iSq0xM7iomBwdNcqG6Pkd9CuI765wH2pHsffc313njuYWvO9MtySLQiQSD0PTtNzhIE36Jx6iGld7jRhxZMqt0jPMAlWkuE5may2tuEa025u30eisdzBfxzNTx7EwZjJGJ5AY+9CUeikuvM1D8nVC+zqhfWET2p0a+x8nNcI0VYkElOCY3kh0QrWhSY0iRfWW+H+laK30kmTZnU6J5zZTdZqRwruivUkCs4rAvzAJz5TKesyDI6LjwAk+bmoblafyPOKataOg+yPnB7/9CapNYQJ8+OT5t88eP6WHr99cPb+6ANPOifJWXmZo6WJKV0navGgf+AL553Udz+dsLaKlREV0Mhvl7bCJ8bMdNvtx1O+R9/dhmdXIlkZCmyWaJ7I2c3rWynnJqyrf0kFiNQI/JTKri6gROcA2uVdFqIl9AnZy7ozTB2C1EnqBiZFtmsoqInba4A4xSI0hrEBmo6ndx+k297PCaxl6MTMVetjciWzw/Xi++xORR2hv

Solution

  • https://developer.mozilla.org/en-US/docs/Web/HTML/Element/pre

    The HTML element represents preformatted text which is to be presented exactly as written in the HTML file

    so despite you are wrapping your text in <code> elements, the white spaces preceeding those elements still count as text nodes that will be rendered as is.

    The solution could be to just use a regular <div> instead of the parent <pre>