shikijs / twoslash

You take some Shiki, add a hint of TypeScript compiler, and 🎉 incredible static code samples
https://shikijs.github.io/twoslash/
MIT License
1.08k stars 53 forks source link

Manually added line numbers don't show up if no language set #155

Closed crutchcorn closed 2 years ago

crutchcorn commented 2 years ago

I'm currently using remark-shiki-twoslash to process code samples. As such, I'd like to add line numbers using CSS, which I can do with the following CSS:

code {
    counter-reset: step;
    counter-increment: step 0;
}

code .line::before {
    content: counter(step);
    counter-increment: step;
    width: 1rem;
    margin-right: 1.5rem;
    display: inline-block;
    text-align: right;
    color: rgba(115,138,148,.4)
}

image

This is because the markdown code block looks like this:

image

However, earlier in the markdown code block, I have the following assembly example that I'd like to have line numbers associated with:

image

But it outputs the following in UI:

image

However, I thought I could work around this by adding a language into the markdown block, but if I change the markdown language to plain, I get no lines whatsoever

image

orta commented 2 years ago

I'm open to a fix for this 👍🏻

crutchcorn commented 2 years ago

Looking into this further (in hopes of making a PR), I think this issue actually:

1) Is caused by the base shiki package 2) Is resolved as-of shiki@0.10

I think this is the case because, when running my code through a debugger inside of remark, I see the following code:

   function codeToThemedTokens(code, lang = 'text', theme, options = { includeExplanation: true }) {
        if (isPlaintext(lang)) {
            return [[{ content: code }]];
        }
        const { _grammer } = getGrammer(lang);
        const { _theme, _colorMap } = getTheme(theme);
        return tokenizeWithTheme(_theme, _colorMap, code, _grammer, options);
    }

Where code should be split by newlines in order to properly fix this bug.

However, in the new version of the shiki codebase the code is as following:

  function codeToThemedTokens(
    code: string,
    lang = 'text',
    theme?: IThemeRegistration,
    options = { includeExplanation: true }
  ) {
    if (isPlaintext(lang)) {
      const lines = code.split(/\r\n|\r|\n/)
      return [...lines.map(line => [{ content: line }])]
    }
    const { _grammar } = getGrammar(lang)
    const { _theme, _colorMap } = getTheme(theme)
    return tokenizeWithTheme(_theme, _colorMap, code, _grammar, options)
  }

https://github.com/shikijs/shiki/blob/b0cade2f48f3d6e5c0897c81d0dd06c81f5916ab/packages/shiki/src/highlighter.ts#L119-L122

Which seems to split the lines properly.

Would it be OK for me to make a PR upgrading this dependency despite it's quasi-major release bump?

crutchcorn commented 2 years ago

In particular, this seems to've been fixed in 0.10 with this PR:

https://github.com/shikijs/shiki/pull/259