konstantinmuenster / gatsby-theme-portfolio-minimal

A Gatsby Theme to create modern one-page portfolios with a clean yet expressive design.

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Please add a code block support (or at least PrismJS support)

Skythrew opened this issue · comments

Hi ! I really enjoy your theme but I can't install prismjs with your theme so I can't highlight my code in my articles. I think it is a good feature to add to your theme :)

Hej! Thanks for opening this issue! Sounds interesting to me ☺️

Do you know what exactly needs to be added so that PrismJS can be supported? Perhaps you have some sort of docs?

I don't really know how can PrismJS be supported but I saw many errors when installing it on this theme. I will build a basic website without this theme but only with PrismJS to see how can it be supported

commented

Gatsby actually has its own prismJS plugin. It does not use the default prismJS plugin since it assumes you’re running things client side. I have successfully added code highlighting by following this documentation page: https://www.gatsbyjs.com/plugins/gatsby-remark-prismjs/

Note that after the npm install I was getting errors developing the site, running gatsby clean, then redeveloping resolved any issues.

You will need to update the gastby-config.js as described in the documentation page, as well as add a gatsby-browser.js file in the same location. Instead of adding the line require("prismjs/themes/prism-solarizedlight.css") as pointed out in the documentation, I instead used require("./src/prism.css"), where the src folder is the default src folder in the gastby site's directory. That prism.css file is the css file downloaded from the prismJS website with my desired prismJS theme.

The way the documentation says to do this part may work, I just never tried as I'd rather have the css referenced locally.

After all of this was done, you can highlight code in the markdown files for the blog post articles. The way its done is different than the default prismJS way, so refer to the documentation, it is actually quite simple.

This is a sample of what I was able to produce.
Screen Shot 2022-05-08 at 10 16 52 AM

Thanks for the details, @tjoab! Unfortunately, I don't have time to implement it in the near future - so if anyone wants to add it, PR are always welcome!

Hey @konstantinmuenster I think you should close this issue now haha.