Syntax highlighting not working as expected with styles besides monokai

I have tried (more than) two methods of setting the syntax highlighting: Following the last method in this forum post, and following the official documentation putting

[markup]
  [markup.highlight]
    style = 'github'

in my config.toml. This works as expected for the monokai style. However, it does not match the style gallery for any of the others I tried. For example, the github style is unreadable:

Screenshot_2022-06-10_00-23-54

Is this a bug?

Is there a way to deal with this problem? I have tried using hugo gen chromastyles --style=github > syntax.css as in the documentation, but my syntax.css which I placed in static/css seems to be ignored by hugo server.

I am unable to reproduce the problem.

Please post your markdown, or (even better) a link to the public repository for your site.

See https://discourse.gohugo.io/t/requesting-help/9132.

OK. Here is the markdown for the whole post, since this is just for testing and not on my repo:

my-first-post.md:

---
title: "My First Post"
date: 2022-06-09T20:29:58+07:00
draft: false
---

Code:

```python
def preprocess_data(flags, sequence_lengths=False):
    """Load data, shuffle it, process the vocabulary and save to DATA_FILENAME, if not done already.
       Returns processed data. NOTE: If the max_doc_len changes from a previous run,
       then DATA_FILENAME should be deleted so that it can be properly recreated."""

    preprocessed_path = path.join(flags.model_dir, DATA_FILENAME)
    if path.isfile(preprocessed_path):
        with open(preprocessed_path, 'rb') as f:
            train_raw, x_train, y_train, x_test, y_test, \
                train_lengths, test_lengths, classes = pickle.load(f)
    else:
        # Get the raw data, downloading it if necessary.
        train_raw, test_raw, classes = get_data(flags.data_dir)

        # Seeding is necessary for reproducibility.
        np.random.seed(flags.np_seed)
        # Shuffle data to make the distribution of classes roughly stratified for each mini-batch.
        # This is not necessary for full batch training, but is essential for mini-batch training.
        train_raw = shuffle(train_raw)
        test_raw = shuffle(test_raw)
        train_sentences, y_train, test_sentences, y_test = extract_data(train_raw, test_raw)
        # Encode the raw data as integer vectors.
        x_train, x_test, train_lengths, test_lengths, _, _ = process_vocabulary(
            train_sentences, test_sentences, flags,
            reuse=True, sequence_lengths=sequence_lengths)

        # Save the processed data to avoid re-processing.
        saved = False
        with open(preprocessed_path, 'wb') as f:
            try:
                pickle.dump([train_raw, x_train, y_train, x_test, y_test,
                             train_lengths, test_lengths, classes], f)
                saved = True
            except (OverflowError, MemoryError):
                # Can happen if max-doc-len is large.
                pass

        if not saved:
            remove(preprocessed_path)

    return train_raw, x_train, y_train, x_test, y_test, train_lengths, test_lengths, classes
```                                                                    `

I followed the Quick Start guide, creating a new hugo site, installing the ananke theme and then adding the new post. I tried with no theme, but I could not see my post when I did this. I’m not sure why.

I am still unable to reproduce the problem.

Please post a link to the public repository for your project.

Correction. I am able to reproduce the problem with the Ananke theme. More to follow…

1 Like

Btw, I created I public repo and I’m seeing the exact same issue when deployed on netlify:

This is the problem:
https://github.com/theNewDynamic/gohugo-theme-ananke/blob/master/assets/ananke/css/_code.css#L19

Please raise an issue with the theme authors:
https://github.com/theNewDynamic/gohugo-theme-ananke/issues

1 Like

I have raised the issue.

Another thing I tried, is to generate the css: hugo gen chromastyles --style=github > syntax.css and replace the contents of problem file assets/ananke/css/_code.css with syntax.css. I’m not sure if that is the correct way, but it gives a readable result, but it still doesn’t match the gallery example of the github style: function names inside the function body are not highlighted. Anyhow, I guess this is getting off topic…

PS. This wasn’t even the theme I wanted to use, so I am creating a new support issue.

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.