reorx/hugo-PaperModX

[BUG] Code block can't read in light mode (PaperMod migrate to PaperModX)

Triple-Z opened this issue · 2 comments

Describe the bug

  • Device/Os: macOS
  • Type: Desktop
  • Browser and version [e.g. Chrome 86.0]: Chrome 103.0.5060.134
  • Hugo Version [ >=0.83.0 expected]: v0.101.0+extended
  • Theme Version [e.g. v4.0, master, or commit-id ]: 61452c1

Steps to reproduce the behavior:

Using the PaperModX theme for my blog (it use PaperMod before).

The code in the code block cannot be read in light mode. If you switch to dark mode, it will be fine.

Expected behavior:

The code block can be read easily.

Screenshots

Light mode (also the four black corners maybe a "bug" too?)
image

Night mode (it works well)
image

Additional context

You can preview the example page in here: https://test-papermodx.my-hugo-blog.pages.dev/posts/mastering-git-cherry-pick/

Current config file
baseURL: "https://blog.triplez.cn/"
languageCode: "zh-cn"
defaultContentLanguage: "zh"
hasCJKLanguage: true
title: "TripleZ's Blog"
theme: "PaperMod"

disqusShortname: triplezs-blog
googleAnalytics: UA-xxxx-3

menu:
    main:
        # - identifier: categories
        #   name: Categories
        #   url: /categories/
        #   weight: 10
        - identifier: tags
          name: 标签 
          url: /tags/
          weight: 20
        - identifier: archives
          name: 归档
          url: /archives/
          weight: 30

params:
    env: production
    defaultTheme: auto # to switch between dark or light according to browser theme
    disableThemeToggle: false
    ShowBreadCrumbs: false
    ShowPostNavLinks: true
    TocSide: 'left'  # or 'right'
    EnableInstantClick: true
    author: ["TripleZ"]
    description: ""
    BeiAn: 粤ICP备xxxxx号
    comments: true
    ShowToc: true
    TocOpen: false
    ShowReadingTime: true
    ShowShareButtons: true
    ShowCodeCopyButtons: true
    fuseOpts: # for search
        isCaseSensitive: false
        shouldSort: true
        location: 0
        distance: 1000
        threshold: 0.4
        minMatchCharLength: 0
        keys: ["title", "permalink", "summary", "content"]
    assets:
        favicon: "/favicon.ico"
        favicon16x16:  "/favicon-16x16.png"
        favicon32x32:  "/favicon-32x32.png"
        apple_touch_icon:  "/apple-touch-icon.png"
        safari_pinned_tab:  "/safari-pinned-tab.svg"

# for search
outputs:
    home:
        - HTML
        - RSS
        - JSON # is necessary

markup:
  highlight:
    # anchorLineNos: true
    codeFences: true
    guessSyntax: true
    lineNos: true
    style: monokai
  goldmark:
    renderer:
      unsafe: true # enable raw html in markdown

Never mind, this issue is because the missing setting of pygmentsUseClasses.

Add this into the config.yml will solve the problem.

pygmentsUseClasses: true

Thanks for the great theme.

Thanks so much for including the discovered fix here, I didn't even realize I had the issue but I did.

Easy fix :)