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!
syntax highlighting with prismjs
Re: syntax highlighting with prismjs
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.)
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.)
-
- Sr. Propeller Head
- Posts: 330
- Joined: Tue May 13, 2008 3:27 pm
- Location: Christchurch, New Zealand
Re: syntax highlighting with prismjs
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:
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:
Master page:
Topics (note there are no p styles in the code itself):
Code: Select all
@import url("prism.css");
Content\Resources\SyntaxHighlighting\Prism
Our code is this, hopefully it helps:
CSS reference:
Code: Select all
@import url("../SyntaxHighlighting/Prism/prism.css");
Code: Select all
<script type="text/javascript" src="../SyntaxHighlighting/Prism/prism.js"> </script>
Code: Select all
<pre xml:space="preserve"><code class="language-xml"> <?xml version="1.0" encoding="utf-8"?> ... </code></pre>
Re: syntax highlighting with prismjs
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.
Re: syntax highlighting with prismjs
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
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
Re: syntax highlighting with prismjs
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?
Re: syntax highlighting with prismjs
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
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