Style Suggestions, Code Highlighting Customization

[fandean]

Add border to the table, and set margin

Reduce the blockquote font size, cancel italics, and add margins

and

[zzossig]

Good suggestions thank you. But have some questions. What is the last picture means? And I think the blockquote style you suggest is not standard and normal. I’m afraid people may not recognize the blockquote. What is this blockquote style from? What about add it instead of replace it. We can name it blockquote2 or something

[fandean]

After observing the blockquotes of many websites, I found that it was not appropriate for me to modify them like that. However, it is recommended to optimize it. As for the last picture, don't you feel something wrong? I'm a bit difficult to express in language, because my English is too poor, and I don't know much about the front end.

[zzossig]

Ok I also poor on English 😁. No worries. Anyway I’ll give it a try

[fandean]

Syntax highlighting is not available in the following languages

• bash/shell/sh
• yaml
• toml

In addition, when viewing the code against a dark background, the contrast is too high, which makes the eyes uncomfortable. I think the brightness of the code text should be reduced.

It would be nice if you could enable users to select syntax highlighting styles in configuration files in a way similar to the following

pygmentsUseClasses = false
pygmentsStyle = "monokai"

At the moment there are problems if you do that.

[theoriginalkien]

for markdown table

you can put this in your custom.css

table {
    border-spacing: 1rem; 
    border: solid 1px white;
}

table th,
table td {
    border-bottom: solid 1px white;
    padding: 0.5rem;
}

the table rendered will look like this

[zzossig]

@fandean I made some changes. I agree that the color contrast on code block is so high so I adjusted it little a bit. I'll have to think more about syntax highlighting config param. And I think it's good idea. As to blockquote styling, I prefer simple one. So I'll leave it as it is. Tell me if I'm doing wrong or if you have any other suggestions

[fandean]

I thought it might be better to just change the background color of the code block in the dark theme, so I changed it to look like this.Blockquote has been improved a lot. I think it is ok.Here's another little problem. See the picture. This is my custom. scss

$code-font-stack: mononoki, "Cascadia Code",FiraCode, Consolas, "ubuntu mono", monospace;
$code-font-size: .95em; //默认为 0.9em
$content-pre-color: #b8b8b8;
$content-pre-background-color: #282c34;

.theme__dark .highlight>.chroma {
  color: $content-pre-color;
  background: $content-pre-background-color;

  table::after {
    //content-pre-header-color
    color: $content-pre-color;
    // content-pre-header-background-color
    background: darken($content-pre-background-color, 5%);
  }

  code, 
  pre {
    font-size: $code-font-size;
    font-family: $code-font-stack;
    background: $content-pre-background-color;
  }
}

---

Finally, I don't think you should specify the font "Montserrat" directly here. As I understand it, this will cause users who don't want to use "Montserrat" to download the font as well. Is my understanding correct?

https://github.com/zzossig/hugo-theme-zzo/blob/e5f6738ff643a644e914e9c7280d9e4917a06560/assets/sass/pages/_single.scss#L335

[zzossig]

Thanks another bugs! I’ll fix it soon. And you are right! I’ll delete that line.

[zzossig]

@fandean Hey~ I changed font system. Also fixed the problem you mentioned. Maybe you need to set $title-font and $content-font variable if you want use your own font. And check the file at themes/zzo/data/skin.toml. I made one param named 'prism_theme' that can change code block theme. you can override this value by making file at root/data/skin.toml. There are currently five themes supported. I think you probably want to apply your own color. Is that right? If that is the case, tell me more about how you want to change the code block color. Do you want to change only one or two colors in an already created theme? Or do you want to change dozens of colors?

Edit: Maybe I misunderstood what you mean. You mean you wanna use hugo built in syntax highlighting by setting like pygmentsStyle = "monokai", right? I have tested this and found that hugo's built in syntax highlighting is much much faster than prism.js. So I decide to change this part. It will take some time to do this. I'll open new issue regarding this.

[fandean]

@zzossig Yes, I just want to adjust on the existing theme. Let me try your modification.

[zzossig]

pygmentsStyle = "monokai" is not supported right now. I'll update this soon.

[fandean]

I tried customizing themes before, when I copied the dark theme's color scheme but lost the block syntax highlighting.So I tried pygmentsStyle = "monokai"

[zzossig]

There is a problem to customizing syntax highlight right now. I have to make a way to do that. I am thinking about which approach is the best practice.

[fandean]

Hi, I found that the margin(padding) between the first line of code and the top title bar is too small

[zzossig]

You are right! I updated this now.

[fandean]

Hi, You can add the following to the .gitignore file to ignore the exampleSite/resources directory generated by Hugo

# Generated files by hugo
resources/_gen/

[zzossig]

Actually, It it necessary to update resources folder because hugo theme website use that file. And I just finished code highlight! I'll upload it soon and update readme.md Edit: @fandean Have a look at readme.md custom-syntax-highlighting section

[fandean]

I'm sorry that I'm having some other problems here, so I just briefly tried custom-syntax-highlighting and it looks OK.If there are any other questions, I will continue here.

[zzossig]

@fandean I think this issue is too long. I want people to be able to search topic one by one(So that other people get help easily). It makes difficult to read if issue is too long and have many topics in one issue. We can close this issue now. Feel free to open another issue.