As the title suggests, I want to use prism.js with my custom theme (based on mars). I have added CSS cdn in the head section and js files from at the end of my post.js and I can see them all in my html source code at correct location like mentioned here. But the is not getting highlighted. It would be great favour if one of the experts guide me to right direction how these external packages/js/css should be used with the frontity.
Hi @Divaksh
Welcome to the community - great to see that you’re interested in trying Frontity.
Check out this repo to see an example of including an external CSS framework. This example imports Bootstrap, but the same principle should apply to other CSS frameworks.
In particular check out this file from that repo that shows how to add the imported styles to the <Global> component.
Hope this helps. By the way, we’d love to know what you’re planning to build with Frontity.
1 Like
The problem is highlighting doesn’t work in case of PrismJS.com and in case of highlightjs.org highlighting only works on page refresh.
Here is the repo: https://github.com/Divaksh/forgotten-developer
I have replaced prismjs with the highlighjs but both are not working as they should.
I really want to use prismjs, but after trying everything had to use highlightjs.
I have also watched your video and it was great, I was easily able to learn CSS in JS from it. 
4 Likes
Hi @Divaksh
I’ve cloned your repo. Can you tell me what I should be looking for. i.e. where in your site the behaviour you expect is not happening, and what behaviour you are expecting. Thanks.
1 Like
Thank you, you should open the first article called Beginner’s Guide to Spreadsheet…. Here all code shouhighlightedighted by default when you open it, but it gets highlighted only after the reload in case of highlight.js or nothing happens in case of prism.js.
Yes!! You got it right. these code snippets.
- I would like to use Prism.js for these as prism provide more control and lightweight
- In current setup, hightlight.js is used but with Frontity it works only on page reload.
I found this https://betterstack.dev/blog/code-highlighting-in-react-using-prismjs/
It requires special setup to work with React.
I don’t remember exactly how but we’re using prismjs for the terminals that are shown in our web frontity.org (the repo is public - https://github.com/frontity/frontity.org/). I’m aware we defined some styles here to match the colors we wanted, and we added the class language-javascript to the elements we wanted to apply it, but I’m not sure what else was needed.
1 Like
Thank you so much for pointing me the right direction and sharing the helpful resource.
I searched prism in the frontity.org repo and surprisingly found only one use of it
here and import statement in index.ts this commit was by @luisherranz stating added prism back here
Sorry but I’m still not sure how this implementation should be done in Frontity this is first time I’m working with JS and React. 
Sorry I skipped this part. I’m trying to learn JS, React and Frontity and building own first ever theme using Frontity for my blog, aiming to achieve console/IDE like UX. Once I learn all concept, I would love to be a part of Frontity family. 
3 Likes
You don’t need to wait until you’ve learned all the concepts to be part of the Frontity family. We’re all learning all the time - the fact that you’re learning Frontity means you’re already part of the Frontity family. As you learn more we look forward to your contributions in helping out other members of the community here.
We also look forward to seeing your blog rendered using Frontity once you’ve made some more progress with it.
3 Likes
You don’t need to wait until you’ve learned all the concepts to be part of the Frontity family. We’re all learning all the time - the fact that you’re learning Frontity means you’re already part of the Frontity family.
Beautiful thoughts.
We also look forward to seeing your blog rendered using Frontity once you’ve made some more progress with it.
Waiting for the next npm release so can figure out and fix webpack/vercel issue.
If I’m not wrong, it seems prism syntax highlighting is not working on Frontity blog please check following link
Building a blog using Frontity and WordPress
We’re not using Prism in the blog part. We use two different themes, one for the web and the twentytwenty-theme for the blog, and we’re using Prism only in the first one. You can see that we have two different packages, and we defined when to use each one in the frontity.settings.js file. You can find more info about this in the docs.
1 Like
Finally, Prism.js started highlighting the code but with the strange behaviour.
- Code doesn’t get highlighted on first visit to post from the home page.
- Code gets highlighted if I go back to the home page and open the page again (second attempt).
- Code also gets highlighted on page refresh.
- Open the post directly using the link.
Here is the link where it can be seen live in action.
Go to divaksh.com Open the first post (Spreadsheet Beginners Guide using Java)
I have tried everything I could,
- adding Prism.highlightAll() in beginning of the useEffect, in the end of the useEffect.
- Not using it Prism.highlightAll() - in this case highlighting works only on page refresh.
- Adding the Prism.js from frontity.org repo
- Adding Prism as a module and importing it
- Adding the Prism.js file same as Frontity.org
- Trying different versions of the Prism.js
Here is my commit related to Prism changes
Using the outdated version of Frontity, but I have updated it on local and it didn’t help as well.
@frontity/core ^1.7.3 → ^1.8.0
@frontity/html2react ^1.3.5 → ^1.4.0
@frontity/wp-source ^1.8.1 → ^1.8.4
frontity ^1.10.1 → ^1.11.1
I’m stuck, and it’s not letting me go further and learn more. Any kind of help would be a great favour.
I think highlighting on server side can resolve the issue, how can I add it to SSR?
Hey @Divaksh, maybe it would help to see how I’ve added syntax highlighting to our frontity blog: https://github.com/frontity/frontity.org/pull/143
The prism.js file that you see in this PR is a custom build of prism.js that I’ve downloaded from https://prismjs.com/download.html. I would recommed that you do the same
2 Likes
Thank you so much for the link, I’m following it closely. It seems you guys are also facing the same issue. Hopefully, now there will be a solution. 