We're evolving to serve you better! This current forum has transitioned to read-only mode. For new discussions, support, and engagement, we've moved to GitHub Discussions.

Syntax Highlighter with prims js

October 11, 2019 at 2:32 pm #440

[anonymous]

Hi Bob,

I am trying to use Prism js in theme. I am following this docs:

https://getpublii.com/docs/highlight-your-code-syntax-with-prism-js.html

As suggested in the doc, I downloaded js and css files and put that in the respective folders.

head.hbs

`        {{/checkIf}}`

`      `

`       {{{@headCustomCode}}}`

`    `

`    `

`        {{{@bodyCustomCode}}}`

and in footer.hbs

`{{#if @renderer.previewMode}}`

`
Could you please help me out here.

Thanks,

Ajeet

October 11, 2019 at 3:18 pm #443

Bob

Hi Ajjet,

Just follow the instructions, everything is described in detail https://getpublii.com/docs/highlight-your-code-syntax-with-prism-js.html

Your example does not contain the prism.js file, this one must be added to the footer section. To have a popup with a list of coding languages you have to add them to the config.json file.

The” dark layout” was created by me and is available and delivered only with the following themes: Documentation and ProDocs.

October 11, 2019 at 4:44 pm #445

[anonymous]

Sorry,

I did add the code in footer, pasted it wrongly.

View post on imgur.com

View post on imgur.com

I did not add the languages in the config file. I have added now

View post on imgur.com

But the pop is still not there.

View post on imgur.com

AM I missing something ????

TIA.

Ajeet

October 11, 2019 at 4:46 pm #446

Bob

Use FORMATS select, not the Code.

October 11, 2019 at 4:55 pm #449

[anonymous]

Yes, I added the labels at the wrong place in config file. I had to add under here :

“customElements”: [ ]

It works.

Thanks so much