Best approach for Syntax highlighting

This forum is for all Flare issues not related to any of the other categories.
Post Reply
DoTheWriteThing
Propeller Head
Posts: 27
Joined: Mon May 14, 2018 6:21 am

Best approach for Syntax highlighting

Post by DoTheWriteThing »

I want to avoid using screenshots of code blocks. What is the best approach for automatic syntax highlighting in Flare topics? There are a number of libraries available but not sure which is best to use with Flare. Any experience with this gratefully received!
cdschroeder
Sr. Propeller Head
Posts: 189
Joined: Mon Feb 22, 2016 9:18 am
Location: Cincinnati, OH

Re: Best approach for Syntax highlighting

Post by cdschroeder »

What type of output are you generating? I use prism.js for HTML5 output and it works beautifully. It just doesn't work for printed output (but neither will any other JS solution).
Casey

Image
bunnycat
Propeller Head
Posts: 70
Joined: Tue Nov 03, 2015 6:44 am

Re: Best approach for Syntax highlighting

Post by bunnycat »

I'm using prism.js as well.

Easy to incorporate into your projects, and as long as you follow their tagging standards, and you know the language of the code block you receive, it's great!

Tried to use prettify at a point in the past, but the prism.js is superior.
DoTheWriteThing
Propeller Head
Posts: 27
Joined: Mon May 14, 2018 6:21 am

Re: Best approach for Syntax highlighting

Post by DoTheWriteThing »

cdschroeder wrote:What type of output are you generating? I use prism.js for HTML5 output and it works beautifully. It just doesn't work for printed output (but neither will any other JS solution).
Hi CDschroeder,
I installed prism and it worked perfectly, or at least I thought it did...I can see it working in HTML preview mode, but when I output, the effect is lost...any ideas?
cdschroeder
Sr. Propeller Head
Posts: 189
Joined: Mon Feb 22, 2016 9:18 am
Location: Cincinnati, OH

Re: Best approach for Syntax highlighting

Post by cdschroeder »

DoTheWriteThing wrote: Hi CDschroeder,
I installed prism and it worked perfectly, or at least I thought it did...I can see it working in HTML preview mode, but when I output, the effect is lost...any ideas?
Hmm, that's odd. You are generating HTML5 (top nav/tripane/side nav) output, correct? (not to be confused with HTML Help/CHM)

If so, start by checking your output folders and verifying that the prism JS and CSS files are present.
Casey

Image
DoTheWriteThing
Propeller Head
Posts: 27
Joined: Mon May 14, 2018 6:21 am

Re: Best approach for Syntax highlighting

Post by DoTheWriteThing »

cdschroeder wrote:
DoTheWriteThing wrote: Hi CDschroeder,
I installed prism and it worked perfectly, or at least I thought it did...I can see it working in HTML preview mode, but when I output, the effect is lost...any ideas?
Hmm, that's odd. You are generating HTML5 (top nav/tripane/side nav) output, correct? (not to be confused with HTML Help/CHM)

If so, start by checking your output folders and verifying that the prism JS and CSS files are present.
Hi Casey, I did that, the files are all in their places, I also located the topic in Windows Explorer, the syntax highlighting displays correctly when the topic is viewed as a standalone HTML file in the browser. I called Flare Support, they said they don't deal with scripting issues.
cdschroeder
Sr. Propeller Head
Posts: 189
Joined: Mon Feb 22, 2016 9:18 am
Location: Cincinnati, OH

Re: Best approach for Syntax highlighting

Post by cdschroeder »

DoTheWriteThing wrote: Hi Casey, I did that, the files are all in their places, I also located the topic in Windows Explorer, the syntax highlighting displays correctly when the topic is viewed as a standalone HTML file in the browser. I called Flare Support, they said they don't deal with scripting issues.
Yeah, I wouldn't expect Flare's support to help in this area since it's not their script. Here's how I've implemented it in my Help Center (in my output, this works flawlessly in all browsers; no additional troubleshooting required):

In the main masterpage:

Code: Select all

<script type="text/javascript" src="../Scripts/prism.js"></script>
At the top of the main stylesheet:

Code: Select all

@import url('prism.css');
[My script file is located in ../Resources/Scripts; the stylesheet is located in ../Resources/Styleheets]

Other things to try:
- Open the browser console (F12 to open the panel, then select the Console tab) to verify that there are no errors
- Also in the console, choose the Network tab and refresh the page. You should see (among a lot of other assets) both the prism stylesheet and script loading at some point in the list
- Try a different browser/target/etc.

It's difficult to give more specific guidance without looking at your project, but hopefully, this will point you in the right direction!
Casey

Image
ArdisRamey
Propeller Head
Posts: 54
Joined: Wed Sep 05, 2018 9:04 am

Re: Best approach for Syntax highlighting

Post by ArdisRamey »

I'm having some trouble implementing prism.js solution in my project, and am hoping y'all can help.

I can get it working locally, linking both the stylesheet and the JS within a single Topic. However, I've hit a wall when trying to implement the same solution project-wide.

Essentially, I'm having trouble implementing what cdshroeder is describing here:
cdschroeder wrote: In the main masterpage:

Code: Select all

<script type="text/javascript" src="../Scripts/prism.js"></script>
At the top of the main stylesheet:

Code: Select all

@import url('prism.css');
[My script file is located in ../Resources/Scripts; the stylesheet is located in ../Resources/Styleheets]
When I open the file called "MasterPage" I don't see anywhere to input text of any kind, let alone the script link they're describing.

Can anyone help me find a home for the link to my Prism.js file?
ChoccieMuffin
Senior Propellus Maximus
Posts: 2630
Joined: Wed Apr 14, 2010 8:01 am
Location: Surrey, UK

Re: Best approach for Syntax highlighting

Post by ChoccieMuffin »

ArdisRamey wrote:...
When I open the file called "MasterPage" I don't see anywhere to input text of any kind, let alone the script link they're describing.

Can anyone help me find a home for the link to my Prism.js file?
If you open the relevant masterpage in a text editor, either the internal text editor or something like Notepad ++ (In Content Explorer right-click the masterpage and on the menu point to Open with and click your preferred editor) and then add the precious nugget at the top of the file. You might have to experiment a bit because I'm not certain about this next bit, but I think it goes BEFORE <head>.

Good luck!
Started as a newbie with Flare 6.1, now using Flare 2023.
Report bugs at http://www.madcapsoftware.com/bugs/submit.aspx.
Request features at https://www.madcapsoftware.com/feedback ... quest.aspx
Post Reply