Feature Request: Inline Syntax Highlight

[aghArdeshir]

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

Support syntax highlight on inline code in docs.

The picture below is from an HTML code snippet using Prism and a syntax like this:

<code class="language-js">if (user.actionsHistory[0].type ==="undo")</code>

And the picture below is the same writing with Vitepress:

`if (user.actionsHistory.at(-1).type ==="undo")`

As you see the Syntax Highlighting is gone. Could be cool to have an automatic inline Syntax Highlighting for md docs.

Here is another example for a CSS code snippet. On the left using markdown and viteperss, and on the right, using html and prism:

Describe the solution you'd like

There'v been some suggestions before on vitepress: #1343 and vuepress: vuejs/vuepress#1212 on how the syntax could look like. I personally do not have a preference. But I believe this syntax:

And `if (someCondition === true)`{lang=js}

allows for future expansions:

And `if (someCondition === true)`{lang=js,someFlag=false,someOtherFlag=true}

Describe alternatives you've considered

Have not tried anything yet. Just faced this requirement while trying out vitepress. If I ever came up with a solution that did or did not work will share here.

Additional context

There was already 1 issue about this: #1343, but was closed as "Not seeing any demand for this". So I re-created this issue as a demand.

Validations

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

[sharpchen]

Shiki for Rehype supports the similar, can we have this?

[Zezombye]

Not sure why this issue and the associated PR were closed, seeing as it is a very simple addition.

In your style.css:

.vp-doc span.inline-code-highlight > code {
    border-radius: 4px;
    padding: 3px 6px;
    white-space: normal;
    background-color: var(--vp-code-block-bg);
    font-size: var(--vp-code-font-size);
}

.vp-doc div[class*="language-"], .vp-doc span.inline-code-highlight > code {
    border: 1px solid var(--vp-code-bg);
}

In your config.mjs:

import { inlineHighlightPlugin } from './inline-highlight.js';
export default defineConfig({
  markdown: {
    config: md => {
      md.use(inlineHighlightPlugin);
    }
  },
}

inline-highlight.js (fixed the HTML string replacement):

export const inlineHighlightPlugin = (md) => {
    const codeRender = md.renderer.rules.code_inline
    md.renderer.rules.code_inline = (...args) => {
        const [tokens, idx, options] = args
        const token = tokens[idx]
        if (token.attrs == null) {
            return codeRender(...args)
        } else {
            const lang = token.attrs[0][0]
            if (options.highlight) {
                const htmlStr = options.highlight(token.content, lang, '')
                return htmlStr.replace(/^<pre class="/, '<span class="inline-code-highlight ').replace(/<\/pre>$/, "</span>")
            } else {
                return codeRender(...args)
            }
        }
    }
}

Then you just do

`Some code()`{js}