Syntax Highlighting Defaults?

[weab2013]

Checklist

• I have read and accepted the contributing guidelines.

How did you create the site?

Generated from chirpy-starter

Description

For example on this github.io page, in the syntax highlighting in the code blocks

-T4 -n -sC -sV -Pn -p- is highlighted a pale orange
"touch " . $_GET['democ'] . '.txt' or any thing in quotes is highlighted a poopy green

I can't seem to change the syntax highlighting for syntax in those formats so I assume it's some kind of default?

Operations you have already tried

I've played around with css file and looked at the variable definitions but none of them affect the syntax highlighting for those sections of code. Any idea how I can change it?

Anything else?

No response

[guillermodotn]

Chirpy uses Rouge for syntax highlighting, as specified in _config.yml. If you want to modify its theme, check out Rouge's theme documentation. You can also use styles created for Pygments, as they are compatible.

[guillermodotn]

Both have the same style, since chirpy-starter is just a template repository that uses the jekyll-theme-chirpy. In the first link you shared, all the code snippets except one are screenshots, so I'm not quite sure what you were trying to highlight.

[weab2013]

For the first link, it is the final code block towards the bottom. The code block styling here isn't what I expected as they look like in the second link

$ sudo -l
User mitch may run the following commands on Machine:
    (root) NOPASSWD: /usr/bin/vim

However, the first link somehow supports syntax highlighting for certain code snippets that don't work in the second link. In this example anything that begins with '-' e.g. bash command options (ls -l) are always highlighted in orange like the second link shows and custom CSS themes won't affect it. But custom CSS themes can change it for the first link

Custom CSS highlighting does affect some syntax in the second link but not all so I was wondering how I could change to be like that like the first link while also retaining the macOS code block style in the second link

[guillermodotn]

Okay, I think I finally understand what you mean. It’s possible that the issue is simply that you're not specifying the language for syntax highlighting in your code blocks.

When opening a code block, it's a good idea to specify the language right after the triple backticks. This helps the Markdown renderer apply proper syntax highlighting.

For example, if you're showing terminal commands, you can use console or shell:

```console
ls -la
```

This will highlight the command appropriately. Other commonly used shell identifiers include bash, fish, powershell, sh, and others, depending on the context of your code snippet.

Let me know if that’s what was causing the issue.

[weab2013]

The above links do specify the language, but unfortunately it does not apply the proper syntax highlighting in the first link.

I made a new test repo to try to make it more clear.

https://weab2013.github.io/posts/test/

The "$" symbol applies the syntax highlighting according to the .scss file using color: #4d4ef9;

But nothing changes the syntax highlighting that is in quotes and defaults to a dark green

[SoumyaK4]

@weab2013 the first link you provided uses a custom personal styling not the chirpy defaults.

[tis-starlight]

By default, Chirpy uses a modified version of the base16.dark syntax highlighting style (rougify style base16.dark) for Dark Mode and github (rougify style github) for Light Mode.

If you notice any inconsistencies in the syntax highlighting (which, in some cases, may not be apparent), it is due to the use of two different styles for Dark and Light Modes. To ensure consistency, I recommend using the github style for Light Mode (which Chirpy already uses) and github.dark for Dark Mode. However, you will need to adjust the styles to match the Chirpy theme.

For example, you might notice inconsistencies when displaying NASM assembly code blocks. Please disregard the colored dots and the JetBrains Mono font:

Dark Mode (Chirpy default):

Light Mode (Chirpy default):

To make the syntax highlighting consistent:

• Generate the theme styles:
  • rougify style github.dark > github-dark.scss
  • rougify style github > github-light.scss
  • The default themes will be generated, so if you see the "Example Text" in dark green, that's the default color. Customize the theme to your liking using browser inspect tools. For a list of available themes, use rougify help style. You can also check this to preview various theme styles with images.
• Move the generated styles (e.g., github-dark.scss, github-light.scss) to the /assets/css/ directory.
• Import the theme styles and apply them based on the color scheme mode by adding the following to /assets/css/jekyll-theme-chirpy.scss:
  • For Dark Mode:

    @media (prefers-color-scheme: dark) {
      html:not([data-mode]) {
        @import 'github-dark.scss';
      }
    }

  • For Light Mode:

    @media (prefers-color-scheme: dark) {
      html[data-mode=light] {
        @import 'github-light.scss';
      }
    }

[cybersec-k]

I think my issue was similar. I copied/pasted the css theme to the jekyll-theme-chirpy.scss under the "append your custom style here" line

so it just gets overwritten by the default theme base.16.dark-syntax as seen here

@tis-starlight has the right advice and if you create a separate custom css file and import that into jekyll-theme-chirpy.scss, the custom theme will apply and won't get overwritten. Also great tip on using browser inspect tool to figure out the elements, made life much easier

[weab2013]

Thanks a lot @tis-starlight and @cybersec-k!