Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Missing italic styles in 0.11?

See original GitHub issue

Reproduction (https://runkit.com/brc-dd/6309d1529e302e000a926cad):

const shiki_10 = require('shiki@0.10.1')
const shiki_11 = require('shiki')

const h_10 = await shiki_10.getHighlighter({ theme: 'material-palenight' })
const h_11 = await shiki_11.getHighlighter({ theme: 'material-palenight' })

console.log(h_10.codeToHtml(`import foo from 'bar'`, { lang: 'js' }))
console.log(h_11.codeToHtml(`import foo from 'bar'`, { lang: 'js' }))

Output (notice the difference in style of import and from):

Is some additional config required to render it like before, or the theme itself has changed?

Issue Analytics

State:
Created a year ago
Comments:5 (2 by maintainers)

Top GitHub Comments

1reaction

octrefcommented, Sep 21, 2022

Thanks @LaPenna for the test case! This is a tokenization problem and I fixed it by upgrading to vscode-textmate@7.0.1.

0reactions

LaPennacommented, Sep 20, 2022

Experiencing the same lack of italics issue.

Interestingly, if I specify "fontStyle": "bold" in the theme, then it applies the "font-style: italic" style.

Here are some tests

import { getHighlighter } from '../index'

// passes
test('No font-style is applied if none is specified', async () => {
  const highlighter = await getHighlighter({
    theme: 'font-none',
    langs: ['js']
  })
  const out = highlighter.codeToHtml(`function() {return 1}`, { lang: 'js' })

  expect(out).not.toContain('font-style:')
})

// fails - doesn't apply any font-style
test('An italic font-style is applied if specified', async () => {
  const highlighter = await getHighlighter({
    theme: 'font-italic',
    langs: ['js']
  })
  const out = highlighter.codeToHtml(`function() {return 1}`, { lang: 'js' })

  expect(out).toContain('font-style: italic')
})

// fails - incorrectly applies font-style: italic
test('A bold font-style is applied if specified', async () => {
  const highlighter = await getHighlighter({
    theme: 'font-bold',
    langs: ['js']
  })
  const out = highlighter.codeToHtml(`function() {return 1}`, { lang: 'js' })

  expect(out).toContain('font-style: bold')
})

// fails - test for the bug encountered above
test('A bold fontStyle should not apply an italic font-style', async () => {
  const highlighter = await getHighlighter({
    theme: 'font-bold',
    langs: ['js']
  })
  const out = highlighter.codeToHtml(`function() {return 1}`, { lang: 'js' })

  expect(out).not.toContain('font-style: italic')
})

For simplicity & isolation I used the following stubs as the themes but the same issue occurs when I test with any normal theme that uses italics.

// font-none.json
{
  "tokenColors": [
    {
      "name": "Keyword",
      "scope": "keyword",
      "settings": {
        "foreground": "#ffffff"
      }
    }
  ]
}

// font-bold.json
{
  "tokenColors": [
    {
      "name": "Keyword",
      "scope": "keyword",
      "settings": {
        "foreground": "#ffffff",
        "fontStyle": "bold"
      }
    }
  ]
}

// font-italic.json
{
  "tokenColors": [
    {
      "name": "Keyword",
      "scope": "keyword",
      "settings": {
        "foreground": "#ffffff",
        "fontStyle": "italic"
      }
    }
  ]
}