vitepress

vitepress copied to clipboard

Is your feature request related to a problem? Please describe.

I want to be able to write an error message inside my code block and make it look like it's an error.

Currently, it blends with the code:

Describe the solution you'd like

I'm not sure if there's a known syntax for it, but I would like the option to "highlight" a row as an error row:

```typescript{2:error}
client.query(sql`
    SELECT idd FROM comments
           ~~~ <<<< Invalid Query: column "idd" does not exist
`);

 ```.

Describe alternatives you've considered

Haven't found any

Additional context

No response

Validations

• [X] Follow our Code of Conduct
• [X] Read the docs.
• [X] Read the Contributing Guidelines.
• [X] Check that there isn't already an issue that asks for the same feature to avoid creating a duplicate.

As a workaround, add these styles:

.error {
    --vp-code-line-highlight-color: var(--vp-c-red-dimm-2);
}

And in markdown, do something like this:

<div class="error">

```ts{3}
client.query(sql`
    SELECT idd FROM comments
           ~~~ <<<< Invalid Query: column "idd" does not exist
`);
```

</div>

This won't work if you want normal as well as error highlighting in same code block.

Output:

That's amazing! thanks!