Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: improve code highlight style, close #222, #223 #226

Merged
merged 2 commits into from
Jul 26, 2024
Merged

Conversation

pengzhanbo
Copy link
Member

Before submitting the PR, please make sure you do the following

  • Read the Contributing Guidelines.
  • Provide a description in this PR that addresses what the PR is solving. If this PR is going to solve an existing issue, please reference the issue (e.g. close #123).

What is the purpose of this pull request?

  • Bug fix
  • New feature
  • Other

Description

close #222
close #223

@coveralls
Copy link

coveralls commented Jul 26, 2024

Pull Request Test Coverage Report for Build 10107871722

Details

  • 0 of 0 changed or added relevant lines in 0 files are covered.
  • No unchanged relevant lines lost coverage.
  • Overall coverage remained the same at 57.473%

Totals Coverage Status
Change from base Build 10088694602: 0.0%
Covered Lines: 1089
Relevant Lines: 1703

💛 - Coveralls

Comment on lines +37 to +62
onMounted(() => {
if (!groupRef.value) return
const codeBlock = groupRef.value.querySelector(
'div[class*="language-"]',
) as HTMLDivElement
if (codeBlock && codeBlock.dataset.highlighter === 'shiki') {
const lightColor = codeBlock.style.getPropertyValue('--shiki-light')
const darkColor = codeBlock.style.getPropertyValue('--shiki-dark')
const lightBg = codeBlock.style.getPropertyValue('--shiki-light-bg')
const darkBg = codeBlock.style.getPropertyValue('--shiki-dark-bg')
watch(
isDark,
(val) => {
groupRef.value!.style.setProperty(
'--c-code-group-tab-bg',
val ? darkBg : lightBg,
)
groupRef.value!.style.setProperty(
'--c-code-group-tab-title',
val ? darkColor : lightColor,
)
},
{ immediate: true },
)
}
})
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Does the code work with prismjs? I did not see any fallback from it.

Copy link
Member Author

@pengzhanbo pengzhanbo Jul 26, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

prismjs is functioning properly and does not require JavaScript to calculate styles.

@Mister-Hope Mister-Hope merged commit 2a4768d into main Jul 26, 2024
29 of 32 checks passed
@Mister-Hope Mister-Hope deleted the fix-222 branch July 26, 2024 15:24
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Plugin cannot control highlight lines [Bug report] Code group has unreadable background in light mode
3 participants