feat: improve code block feature with Expressive Code

[Hasenpfote]

I noticed that Expressive Code was briefly mentioned in #319, so I tried replacing the existing code block implementation with it. Please note that this is a large-scale change, and there are still open issues related to the previous implementation. For now, I’ve kept the features and design minimal.

Related open issues: #275 Related open PRs: #208 #283

close #319

[vercel[bot]]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
fuwari-yags	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Apr 5, 2025 4:01pm

[Kayxue]

I revert changes from tutorial by other person and change the codes with file changes, but it doesn't worked. The effect is like this, the theme is light-plus

[Hasenpfote]

I'm currently reviewing your repository. I've switched the light theme to rose-pine-dawn for better clarity. Everything seems to be working fine, but am I missing something?

One possibility is that the theme change might still be referencing cached data. Refreshing the page might resolve it.

Additionally, one noticeable difference between github-light and light-plus themes is the red line on the tabs. I believe the provided image is indeed from the light-plus theme.

Themes - Expressive Code

[Kayxue]

I'm currently reviewing your repository. I've switched the light theme to rose-pine-dawn for better clarity. Everything seems to be working fine, but am I missing something?

One possibility is that the theme change might still be referencing cached data. Refreshing the page might resolve it.

Additionally, one noticeable difference between github-light and light-plus themes is the red line on the tabs. I believe the provided image is indeed from the light-plus theme.

Themes - Expressive Code

Sorry I mean the language badge part. I didn't see language badge, did I miss something to change?

[Hasenpfote]

The conditions for the badge to appear are as follows:

.frame:not(.has-title):not(.is-terminal)

You can check this in src/plugins/expressive-code/language-badge.ts.

The reason for this is to avoid redundancy and clutter on the screen:

• If there is a title, the language can be identified
• Terminals have different frame displays and can be differentiated by their titles

I don't think this is the best approach, but if you prefer to have the badge always displayed, you can simply modify the CSS.

[baka-gourd]

related: https://github.com/saicaca/fuwari/issues/275

[didntchooseaname]

Hello, there is an issue with the long labels on their own lines from https://expressive-code.com/key-features/text-markers/ renders like this in a vercel/netlify project :

The sentence is not displayed :

Codeblock in md file:

  import time
  
  # Quick, count to ten!
  for i in range(10):
      # (but not *too* quick)
      time.sleep(0.5)
      print i

With ```python {"test badge":2-5} at first.

Should render like that :

Work in local but breaked with vercel/netlify...

[Hasenpfote]

@didntchooseaname Thank you for the report. I have confirmed the issue in my local (prod) environment as well. It may take some time to identify the cause.

---

Variables are broken in PROD mode, but the cause is still unknown.

---

[Hasenpfote]

@didntchooseaname After troubleshooting, I found that the behavior changes depending on whether astro-compress is enabled. The same issue occurs with the latest version as well. Could you check if disabling astro-compress resolves the issue on your end?

// astro.config.mjs
...
export default defineConfig({
  ...
  integrations: [
    ...,
    icon({
      include: {
        "preprocess: vitePreprocess(),": ["*"],
        "fa6-brands": ["*"],
        "fa6-regular": ["*"],
        "fa6-solid": ["*"],
      },
    }),
    svelte(),
    sitemap(),
    Compress({
      CSS: false,
      HTML: false, // Add this
      Image: false,
      Action: {
        Passed: async () => true, // https://github.com/PlayForm/Compress/issues/376
      },
    }),
    expressiveCode({

Currently testing a method to resolve the issue while keeping the compression enabled.

[didntchooseaname]

@didntchooseaname After troubleshooting, I found that the behavior changes depending on whether astro-compress is enabled. The same issue occurs with the latest version as well. Could you check if disabling astro-compress resolves the issue on your end?

// astro.config.mjs
...
export default defineConfig({
  ...
  integrations: [
    ...,
    icon({
      include: {
        "preprocess: vitePreprocess(),": ["*"],
        "fa6-brands": ["*"],
        "fa6-regular": ["*"],
        "fa6-solid": ["*"],
      },
    }),
    svelte(),
    sitemap(),
    Compress({
      CSS: false,
      HTML: false, // Add this
      Image: false,
      Action: {
        Passed: async () => true, // https://github.com/PlayForm/Compress/issues/376
      },
    }),
    expressiveCode({

Currently testing a method to resolve the issue while keeping the compression enabled.

@Hasenpfote

I confirm that astro-compress cause the issue there, here is the result without:

[Hasenpfote]

I've fixed an issue where astro-compress interfered with Expressive Code. While it may not be a perfect solution, it effectively addresses the problem. Additionally, I’ve added a new document for visual review.

[saicaca]

Thank you for your contribution! I am now merging this into a working branch.