syntax highlighting with prismjs

This forum is for all Flare issues related to styles, stylesheets and XML.
Post Reply
jingram
Jr. Propeller Head
Posts: 2
Joined: Tue Nov 01, 2016 9:37 am

syntax highlighting with prismjs

Post by jingram »

I'm trying to use syntax highlighting with prismjs and can't get it working. Can anyone help me with what might be wrong here?

1. Downloaded the prism.css and put it in my Resources\Stylesheets folder.
2. Downloaded the prism.js and put it in my Resources root folder.
3. In my Master page I put this link in the <head> <link href="../Resources/Stylesheets/prism.css" rel="stylesheet" MadCap:stylesheetType="text/css" />
4. Also in my Master page I put this in the <body> <script src="../Resources/prism.js"></script>
5. In a topic I added this around the code that I want to format <pre><code class="language-JSON">The text within these tags has a p style. </code></pre>

I get no change to the text at all.

Any help is appreciated. Thanks so much!
NorthEast
Master Propellus Maximus
Posts: 6359
Joined: Mon Mar 05, 2007 8:33 am

Re: syntax highlighting with prismjs

Post by NorthEast »

Is your target is set to use a master stylesheet?
If so, then all other stylesheet links are removed from the output, so you'd need to select Allow local stylesheets in the target.
If your version of Flare doesn't have this option (think it's in v12 onwards), then don't set a master stylesheet and set to (default).

(Note - I split this question from the original post, as it's a different subject.)
GregStenhouse
Sr. Propeller Head
Posts: 330
Joined: Tue May 13, 2008 3:27 pm
Location: Christchurch, New Zealand

Re: syntax highlighting with prismjs

Post by GregStenhouse »

Another option is to reference the prism CSS from your master CSS. Open your master stylesheet in a text editor, and put this at the top:

Code: Select all

@import url("prism.css");
Also I'm not sure if it's a requirement, but our project is using a single directory for both the prism javascript and CSS file.
Content\Resources\SyntaxHighlighting\Prism

Our code is this, hopefully it helps:

CSS reference:

Code: Select all

@import url("../SyntaxHighlighting/Prism/prism.css");
Master page:

Code: Select all

<script type="text/javascript" src="../SyntaxHighlighting/Prism/prism.js"> </script>
Topics (note there are no p styles in the code itself):

Code: Select all

<pre xml:space="preserve"><code class="language-xml"> <?xml version="1.0" encoding="utf-8"?> ... </code></pre>
jingram
Jr. Propeller Head
Posts: 2
Joined: Tue Nov 01, 2016 9:37 am

Re: syntax highlighting with prismjs

Post by jingram »

Thank you Dave and Greg for the responses. I did have a few things wrong that I fixed (with the help of Mike Kelly who was great) and was able to get it working. One of them was that the CSS was getting stripped out, but I added it as a linked stylesheet and that worked for me.
bboursaw
Propeller Head
Posts: 39
Joined: Thu Apr 02, 2015 4:20 pm

Re: syntax highlighting with prismjs

Post by bboursaw »

Hello all,

I am trying to get Prism working in my instance of Flare 2018 and am running in to issues as described (no formatting changed at all).

I have tried following the advice given in this article but am still missing something.

I was wondering if there may be a clearer set of steps somebody might have for configuring this? Or possibly assist me in determining what it is I am missing?

Much thanks!

Bob
AlexFox
Sr. Propeller Head
Posts: 149
Joined: Thu Oct 19, 2017 1:56 am

Re: syntax highlighting with prismjs

Post by AlexFox »

Hi Bob, if you inspect a page that should have syntax highlighting, do you have any JavaScript errors? Can you see a reference to prism.js and prism.css in the <head> of the document?
bboursaw
Propeller Head
Posts: 39
Joined: Thu Apr 02, 2015 4:20 pm

Re: syntax highlighting with prismjs

Post by bboursaw »

Your tip to look for the script error on the page pushed me in the direction I needed. Total newbie mistake/thought process, here.

I was expecting to see the syntax highlighting in the editor/preview, which in hindsight, makes no sense given that the java script is most likely not going to process in that environment. Once I built my project and viewed the generated output via Chrome, all looks good.

Thank you!
Bob
Post Reply