How to add custom highlighting

[mzfr]

Hey,

I read issue #35 but I am unable to use highlight.js to use monokai syntax highlighting.

Can you please give some detailed steps using which I can add custom highlight.

Thanks

[pacientes]

em..

first, add your config.yml file in pygmentsUseClasses: true
and then, modify(replace, but don't change filename) theme/hugo-PaperMod/assets/css/an-old-hope.min.css to this link files

highlight sample is here

[mzfr]

@pacientes So I have to change the theme's original file? Is there any way of adding highlights without changing the original file? I am asking cause for the build I am using submodule + github action so modifying it on my own repo would be difficult

[pacientes]

@mzfr I haven't found a way yet.
I'm sorry T-T

[adityatelange]

and then, modify(replace, but don't change filename)

Any .css file is bundled, filenames can be changed no issue !
but the file may get doubled up
Refer snippet below

hugo-PaperMod/layouts/partials/head.html

Lines 23 to 31 in 11c3230

	<!-- Styles -->
	{{- $stylesheet := (resources.Match "css/*.css") | resources.Concat "assets/css/stylesheet.css" | minify -}}
	{{- if not .Site.Params.assets.disableFingerprinting }}
	{{- $stylesheet := $stylesheet | fingerprint -}}
	<link href="{{ $stylesheet.Permalink }}" integrity="{{ $stylesheet.Data.Integrity }}" rel="preload stylesheet"
	as="style">
	{{- else}}
	<link href="{{ $stylesheet.Permalink }}" rel="preload stylesheet" as="style">
	{{- end}}

[mzfr]

@adityatelange So I need to make a new css file in /assets directory of the theme? or my blogs root directory?

[adityatelange]

https://adityatelange.github.io/hugo-PaperMod/posts/papermod/papermod-how-to/#override-theme-template

[adityatelange]

@pacientes So I have to change the theme's original file? Is there any way of adding highlights without changing the original file? I am asking cause for the build I am using submodule + github action so modifying it on my own repo would be difficult

when you'll put somestyle.css as an-old-hope.css , theme's an-old-hope.css won't be bundled but the file placed in assets/css/an-old-hope.css will be.
@pacientes is correct

[mzfr]

@adityatelange I am sorry but I am still confused with the steps needed to modify the highlighting theme.

Below I am listing what I understood please correct me if I am wrong:

1. Add pygmentsUseClasses: true
2. Download the .js file from https://cdnjs.com/libraries/. Ex: for monokai(https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.4.1/styles/monokai.min.css)
3. Place it mysite/static/css/
4. Add a extend_head.html in mysite/layout/_default/ which will include the css file?

Are these the right steps? If not can you please tell me the correct one

Thanks a lot for your help :)

[adityatelange]

1. create layouts/partials/extend_head.html

2. visit https://cdnjs.com/libraries/highlight.js/10.2.1

3. Select styling
   

4. You can see all the styling down below

5. click on copy link tag
   

6. Paste it in layouts/partials/extend_head.html
   

7. Custom style loaded 🎉

[mzfr]

@adityatelange Thanks for the help. It is working now :)

[mfaani]

@adityatelange I can get the custom syntax highlighting applied. However the code css background color often makes the coloring weird.

There's no way that that we can get a syntax and background that match?

[adityatelange]

idk man, so long not in touch.