Best approach for Syntax highlighting
-
- Propeller Head
- Posts: 27
- Joined: Mon May 14, 2018 6:21 am
Best approach for Syntax highlighting
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!
-
- Sr. Propeller Head
- Posts: 189
- Joined: Mon Feb 22, 2016 9:18 am
- Location: Cincinnati, OH
Re: Best approach for Syntax highlighting
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
Re: Best approach for Syntax highlighting
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.
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.
-
- Propeller Head
- Posts: 27
- Joined: Mon May 14, 2018 6:21 am
Re: Best approach for Syntax highlighting
Hi CDschroeder,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).
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?
-
- Sr. Propeller Head
- Posts: 189
- Joined: Mon Feb 22, 2016 9:18 am
- Location: Cincinnati, OH
Re: Best approach for Syntax highlighting
Hmm, that's odd. You are generating HTML5 (top nav/tripane/side nav) output, correct? (not to be confused with HTML Help/CHM)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?
If so, start by checking your output folders and verifying that the prism JS and CSS files are present.
Casey
-
- Propeller Head
- Posts: 27
- Joined: Mon May 14, 2018 6:21 am
Re: Best approach for Syntax highlighting
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 wrote:Hmm, that's odd. You are generating HTML5 (top nav/tripane/side nav) output, correct? (not to be confused with HTML Help/CHM)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?
If so, start by checking your output folders and verifying that the prism JS and CSS files are present.
-
- Sr. Propeller Head
- Posts: 189
- Joined: Mon Feb 22, 2016 9:18 am
- Location: Cincinnati, OH
Re: Best approach for Syntax highlighting
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):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.
In the main masterpage:
Code: Select all
<script type="text/javascript" src="../Scripts/prism.js"></script>
Code: Select all
@import url('prism.css');
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
-
- Propeller Head
- Posts: 54
- Joined: Wed Sep 05, 2018 9:04 am
Re: Best approach for Syntax highlighting
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:
Can anyone help me find a home for the link to my Prism.js file?
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:
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.cdschroeder wrote: In the main masterpage:At the top of the main stylesheet:Code: Select all
<script type="text/javascript" src="../Scripts/prism.js"></script>
[My script file is located in ../Resources/Scripts; the stylesheet is located in ../Resources/Styleheets]Code: Select all
@import url('prism.css');
Can anyone help me find a home for the link to my Prism.js file?
-
- Senior Propellus Maximus
- Posts: 2630
- Joined: Wed Apr 14, 2010 8:01 am
- Location: Surrey, UK
Re: Best approach for Syntax highlighting
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>.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?
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
Report bugs at http://www.madcapsoftware.com/bugs/submit.aspx.
Request features at https://www.madcapsoftware.com/feedback ... quest.aspx