Prettify not prettifying

This forum is for all Flare issues related to styles, stylesheets and XML.
Post Reply
tbschaus
Propeller Head
Posts: 26
Joined: Fri Nov 22, 2013 6:08 pm
Location: Victoria, British Columbia, Canada
Contact:

Prettify not prettifying

Post by tbschaus »

Hi all,

I've followed the (very helpful) MadCap blog post about using Google prettify: http://www.madcapsoftware.com/blog/2012 ... by-google/.

I've created a few test topics that contain code samples (classic .ASP and some JavaScript).

Everything has worked well, except for the following:
  • Flare published the code without syntax highlighting; and,
  • extra-long lines of code extend beyond the borders of the transparent .png
I've reviewed the blog post, and my code, and as far as I can tell I've done things properly.

Is there anything I may have missed? Any suggestions?

Thanks in advance!

Brent
T. BRENT SCHAUS | Beanstream, A Digital River Company | Technical Writer
p: +1 (250) 984-8712 customer support: +1 888.472.0811 | bschaus@beanstream.com | digitalriver.com
Msquared
Propellus Maximus
Posts: 848
Joined: Mon Aug 06, 2012 10:19 am
Location: Southampton, UK

Re: Prettify not prettifying

Post by Msquared »

Your link was really interesting for me, as I've been looking for a method to do this, so I shall try it myself soon, I hope. Although, like one of the commenters in the original post, I'd like to be able to do this for PDF output too. But that's another story, although perhaps someone here can help with that too?

As for your issue, I note the blog post mentions a sample project you can download. If you haven't already done so, I would download that, build it and check whether that works as expected for your output type, in your choice of browser, and using the version of Flare you have installed. Nothing in the browser world is static, and it may be a browser-related issue, or even an issue in your version of Flare, rather than an issue in your implementation.

If that project works, then I would go through your steps again in your project, replacing any code you copied manually from the blog post with the equivalent code cut-and-pasted from the sample project download. This may seem a bit extreme, but even a tiny error in a space, character or punctuation could break what you are trying to do. Such errors are often very hard to spot with the naked eye and very easy to miss, even if you understand the syntax of the content you are entering (in fact I'd say they may be harder to spot if you do understand what you are coding up, as your brain is more likely to fill in the gaps with what it expects to see). But since you say your output isn't working as expected, then, if the demo project's output is working, something has to be wrong in your project.

Good luck!
Marjorie

My goal in life is to be as good a person as my dogs already think I am.
NorthEast
Master Propellus Maximus
Posts: 6358
Joined: Mon Mar 05, 2007 8:33 am

Re: Prettify not prettifying

Post by NorthEast »

tbschaus wrote:Hi all,

I've followed the (very helpful) MadCap blog post about using Google prettify: http://www.madcapsoftware.com/blog/2012 ... by-google/.

I've created a few test topics that contain code samples (classic .ASP and some JavaScript).

Everything has worked well, except for the following:
  • Flare published the code without syntax highlighting; and,
  • extra-long lines of code extend beyond the borders of the transparent .png
I've reviewed the blog post, and my code, and as far as I can tell I've done things properly.

Is there anything I may have missed? Any suggestions?

Thanks in advance!

Brent

I use prettyprint, but the steps in that blog post don't match the instructions in the prettyprint documentation.

Perhaps the blog is out of date - you now use a different js file, and you don't need the transparent image or the link to the CSS file.

All you need to do is include the code below in the master page head section - where the path is from your master page folder to the folder containing prettify.

Code: Select all

<script src="../google-code-prettify/run_prettify.js" ></script>
tbschaus
Propeller Head
Posts: 26
Joined: Fri Nov 22, 2013 6:08 pm
Location: Victoria, British Columbia, Canada
Contact:

Re: Prettify not prettifying

Post by tbschaus »

Thanks, Dave and Msquared.

Dave: that worked like a charm. Much appreciated!
T. BRENT SCHAUS | Beanstream, A Digital River Company | Technical Writer
p: +1 (250) 984-8712 customer support: +1 888.472.0811 | bschaus@beanstream.com | digitalriver.com
arkana
Propeller Head
Posts: 22
Joined: Wed Mar 14, 2018 11:10 pm

Re: Prettify not prettifying

Post by arkana »

Dave Lee wrote:
I use prettyprint, but the steps in that blog post don't match the instructions in the prettyprint documentation.

Perhaps the blog is out of date - you now use a different js file, and you don't need the transparent image or the link to the CSS file.

All you need to do is include the code below in the master page head section - where the path is from your master page folder to the folder containing prettify.

Code: Select all

<script src="../google-code-prettify/run_prettify.js" ></script>
Hi Dave, I'm attempting to use prettyprint, but the link you provided is not valid any more. I guess this is because this project has been converted to this open source project https://github.com/google/code-prettify?

When I followed their instructions (https://github.com/google/code-prettify ... started.md), I got a few questions/confusions:
  • You mentioned that the only thing you need to do is to add the script code on the master page, but their docs still requires you to link to the CSS and JS file, and call a function. Why does it go from a simple approach to a more complex one?
  • On the home page of the GitHub project, it mentions the list of browsers that it supports. It's very weird that they list several very old browser versions. How is it possible that a project created by google doesn't support Chrome. And why does it only support some very old versions of browsers that nobody uses now..
These make me wonder whether I've found the correct project or the correct version.

Last, the code I added is not working. I've followed their instructions and added the following code, but the last JS code was not executed.

Code: Select all

<link href="../Resources/Stylesheets/google-code-prettify/prettify.css" rel="stylesheet" type="text/css" />
		<script type="text/javascript" src="../Resources/Stylesheets/google-code-prettify/prettify.js">
		</script>
		<script type="text/javascript">/*<![CDATA[*/$(document).ready(function () {
			PR.prettyPrint();			
		});/*]]>*/</script>
Any help is appreciated.
Arthur Cui
Flare 2019
arkana
Propeller Head
Posts: 22
Joined: Wed Mar 14, 2018 11:10 pm

Re: Prettify not prettifying

Post by arkana »

I end up using Prism for the same purpose, so ignore my previous post unless you want to provide the answer that you already know.

Prism is easier to configure IMO.

Now, one more question :P : anybody has implemented a Copy Code/Select All control, so that the user can click to copy the code to the clipboard? I tried to search for this in the forum and didn't find anything..
Arthur Cui
Flare 2019
NorthEast
Master Propellus Maximus
Posts: 6358
Joined: Mon Mar 05, 2007 8:33 am

Re: Prettify not prettifying

Post by NorthEast »

Edit: Just noticed where you put the PR.prettyPrint() script. This needs to be in the body of the master page, not the head. Put it in the body and it'll work.

What you've done should work fine - it works ok for me, linking to the js and css files.
arkana
Propeller Head
Posts: 22
Joined: Wed Mar 14, 2018 11:10 pm

Re: Prettify not prettifying

Post by arkana »

Awesome. I finally got Prettify working. Funny that I added another variation during my test and moved the second script to the end, but it was after the body tag :o
Arthur Cui
Flare 2019
Beaver
Propeller Head
Posts: 45
Joined: Fri Mar 10, 2017 4:09 am

Re: Prettify not prettifying

Post by Beaver »

This is also a good solution.
How to Create “Copy to Clipboard” Buttons in HTML5 Outputs in MadCap Flare with Clipboard.min.js

see https://www.madcapsoftware.com/blog/201 ... pboard-js/

Code:

Code: Select all

<?xml version="1.0" encoding="utf-8"?>
<html xmlns:MadCap="http://www.madcapsoftware.com/Schemas/MadCap.xsd">
    <head>
        <script src="/Content/Resources/Scripts/clipboard.min.js">
        </script>
    </head>
    <body>
        <h1>Test button for copy to clipbboard</h1>
        <p><a href="https://www.madcapsoftware.com/blog/2019/04/18/how-to-create-copy-to-clipboard-buttons-in-html5-outputs-in-madcap-flare-with-clipboard-js/">Madcap copy to clipboard</a>>
		<!--Comment --></p>
        <p id="target"><code>C:\Program Files\MadCap Software\MadCap Flare 15\Flare.app</code>
        </p>
        <button class="btn" id="copy-button" data-clipboard-target="#target">Copy</button>
        <script>new ClipboardJS('.btn');</script>
    </body>
</html>
You do not have the required permissions to view the files attached to this post.
Toasteata_Flare
Jr. Propeller Head
Posts: 1
Joined: Wed Apr 25, 2018 2:31 pm

Re: Prettify not prettifying

Post by Toasteata_Flare »

I'm sure this thread is dead by now, but do you know if there's a way to get the copy to clipboard to output in a .chm? I can get the prettify.js to output, why not the copy to clipboard?
Post Reply