How to use Prism.js correctly with Frontity

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. :slight_smile:

3 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.

Do you mean these code samples?

Yes!! You got it right. these code snippets.

  1. I would like to use Prism.js for these as prism provide more control and lightweight
  2. 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. :slight_smile:
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. :sweat_smile:

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. :star_struck:

3 Likes

@Divaksh

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. :slight_smile:

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.