Best approach for Syntax highlighting

This forum is for all Flare issues not related to any of the other categories.

Best approach for Syntax highlighting

Postby DoTheWriteThing on Wed May 23, 2018 4:32 am

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!
DoTheWriteThing
Propeller Head
 
Posts: 25
Joined: Mon May 14, 2018 6:21 am

Re: Best approach for Syntax highlighting

Postby cdschroeder on Wed May 23, 2018 5:59 am

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 Schroeder

Image
cdschroeder
Sr. Propeller Head
 
Posts: 174
Joined: Mon Feb 22, 2016 9:18 am
Location: Cincinnati, OH

Re: Best approach for Syntax highlighting

Postby bunnycat on Wed May 23, 2018 8:13 am

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.
bunnycat
Propeller Head
 
Posts: 38
Joined: Tue Nov 03, 2015 6:44 am

Re: Best approach for Syntax highlighting

Postby DoTheWriteThing on Thu Jul 05, 2018 2:33 am

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?
DoTheWriteThing
Propeller Head
 
Posts: 25
Joined: Mon May 14, 2018 6:21 am

Re: Best approach for Syntax highlighting

Postby cdschroeder on Thu Jul 05, 2018 6:00 am

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 Schroeder

Image
cdschroeder
Sr. Propeller Head
 
Posts: 174
Joined: Mon Feb 22, 2016 9:18 am
Location: Cincinnati, OH

Re: Best approach for Syntax highlighting

Postby DoTheWriteThing on Wed Jul 11, 2018 2:34 am

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.
DoTheWriteThing
Propeller Head
 
Posts: 25
Joined: Mon May 14, 2018 6:21 am

Re: Best approach for Syntax highlighting

Postby cdschroeder on Wed Jul 11, 2018 6:01 am

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 Schroeder

Image
cdschroeder
Sr. Propeller Head
 
Posts: 174
Joined: Mon Feb 22, 2016 9:18 am
Location: Cincinnati, OH

Re: Best approach for Syntax highlighting

Postby ArdisRamey on Wed Sep 26, 2018 8:37 am

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?
ArdisRamey
Propeller Head
 
Posts: 33
Joined: Wed Sep 05, 2018 9:04 am

Re: Best approach for Syntax highlighting

Postby ChoccieMuffin on Wed Sep 26, 2018 9:16 am

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 2018.
Report bugs at http://www.madcapsoftware.com/bugs/submit.aspx.
Request features at https://www.madcapsoftware.com/feedback ... quest.aspx
ChoccieMuffin
Propellus Maximus
 
Posts: 1798
Joined: Wed Apr 14, 2010 8:01 am


Return to Flare's General Discussion

Who is online

Users browsing this forum: Google [Bot] and 6 guests

cron