Comments (5)
octref
commented on June 28, 2024
1
Thanks @LaPenna for the test case! This is a tokenization problem and I fixed it by upgrading to [email protected].
from shiki.
orta
commented on June 28, 2024
yeah, I agree it's likely that the theme or langauge updated inbetween
from shiki.
brc-dd
commented on June 28, 2024
Theme still has that italics stuff. Say here are these things for comments. But if you try to render a comment, then it won't have any font-style. Also, if the language had changed, then how are colors being properly applied? Seems like some regression to me, or maybe some stuff was refactored to a separate option?
shiki/packages/shiki/themes/material-palenight.json
Lines 104 to 119 in 525e986
from shiki.
orta
commented on June 28, 2024
Yeah, I agree, though not much changed inside the renderer - and it still looks like the italics support is in there.
Open to some tests in the area to see if there's something which broke
from shiki.
LaPenna
commented on June 28, 2024
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"
}
}
]
}from shiki.
Related Issues (20)
- shiki transformer this.addClassToHast is not a function in astro HOT 3
- The `transformerRenderWhitespace` option in `@shikijs/rehype` doesn't work
- shiki-renderer-svg support HOT 2
- Color replacement in multiple theme modes HOT 3
- `@shikijs/vitepress-twoslash`: Use twoslash in the case of using imported code snippets.
- Row of `language-*` on a single `code` element HOT 1
- Vue 当没有写 `template` 时无法正常高亮 HOT 1
- @shikijs/markdown-it: code block is wrong when entering a non-existent language HOT 2
- Twoslash node query blocks (^?) no longer display on separate lines since 0.x
- `remove-notation-escape`: notation escape syntax’s normalize transformer HOT 2
- Rehype: default language
- "TypeError: onigBinding.UTF8ToString is not a function" after some time / parallel requests in Next.js HOT 10
- Inconsistent behavior between `@shikijs/twoslash` and `@shikijs/vitepress-twoslash`
- Diff syntax highlighting doesn't work with css variables theme
- `light-dark()` CSS function for dual themes HOT 3
- how to use codeToHtml + transformer (meta) ? HOT 5
- Detect Notation Transformers dynamically
- Properly disposing of highlighters HOT 1
- Describe the bug here HOT 2
- `@shikijs/rehype`: support `langAlias` options
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from shiki.