Ability to change syntax highlighting

Hello,

I am new to docsy and hugo, I see here that hugo allows changing syntax highliting using chroma styles.

Is it possible to use these along side docsy?

[frodriguezsmartclip]

Yes, It's possible.

But, I changed that syntax highlighting for this better with custom plugins: Prism.JS

You can read more about this here:

Regards 😉

hello @frodriguezsmartclip , thankyou for the answer.

Can you guide where to put the the prism.js and prism.css files?

[frodriguezsmartclip]

hello @frodriguezsmartclip , thankyou for the answer.

Can you guide where to put the the prism.js and prism.css files?

Ok, it's easy. 📃

1. You need to custom and download Prism.JS from here.

BTW, in their website, there is a nice-easy "how-to" about basic usage.

2. Put your link prism.css inside the path:

layouts\partials\head-css.html
static\css\prism.min.css

3. Put your prism.js inside the path:

layouts\partials\scripts.html
static\js\prism.min.js

And that's all!! 😉 Hope it helps!!

grep -r 'prism*' layouts/partials  

layouts/partials/scripts.html:<script src="../../static/js/prism.js"></script>
layouts/partials/head-css.html:<link href="../../static/css/prism.css" rel="stylesheet" />

edited:
https://github.com/google/docsy/blob/master/layouts/partials/head-css.html
https://github.com/google/docsy/blob/master/layouts/partials/scripts.html

and added the lines shown above outputted by the grep command at the top.

then put the prism files in their respective folders.

ls static/css/prism.css 
static/css/prism.css

ls static/js/prism.js 
static/js/prism.js

When I serve locally with hugo serve, doesn't work. Also removed the goldmark.highlight from the config.toml.

Can't seem to get it to work for me.

@frodriguezsmartclip Do you see any thing that i might have missed?

[frodriguezsmartclip]

grep -r 'prism*' layouts/partials  

layouts/partials/scripts.html:<script src="../../static/js/prism.js"></script>
layouts/partials/head-css.html:<link href="../../static/css/prism.css" rel="stylesheet" />

That URL reference for CSS and JS is wrong. Need to be:

<link href="/css/prism.min.css" ...>
<script src="/js/prism.min.js" defer></script>

NOT static.... Hugo know when you put statics files there, that's their path.

Regards!!

aaaah nice @frodriguezsmartclip , work now! but still we got this issue which causes the background color to not change according to the highlight.

[LisaFC]

Prism support should be fixed by #325

[trombonehero]

You may also need #373 if using a non-empty BaseURL...

[LisaFC]

Closed as Prism issues were fixed.