Syntax Highlighting / Code Highlighting for Pdf output

This forum is for all Flare issues related to PDF, eBook, Microsoft Word, Adobe FrameMaker, XPS, and XHTML book targets.

Syntax Highlighting / Code Highlighting for Pdf output

Postby iand on Thu May 01, 2014 7:41 am

Does anyone have a automatic or semi automatic method for highlighting source code (XML, scripts, java code) for pdf output. I know this is easy to do for HTML output using javascript.
I found the following tool http://www.andre-simon.de/doku/highligh ... hlight.php which can produce highlighted html from code. See attached example.
However if I try and paste the pre block generated by this tool into my flare topic xhtml then the colors are lost.
I've tried pasting the relevant css into my stylesheet

pre.hl { color:#000000; background-color:#eeeeee; font-size:10pt; font-family:'Courier New';}
.hl.num { color:#800080; font-weight:bold; }
.hl.esc { color:#ff00ff; font-weight:bold; }
.hl.str { color:#a68500; }
.hl.pps { color:#0000ff; }
.hl.slc { color:#f27900; }
.hl.com { color:#ff8000; }
.hl.ppc { color:#0080c0; font-weight:bold; }
.hl.opt { color:#ff0080; font-weight:bold; }
.hl.ipl { color:#9e5dff; }
.hl.lin { color:#303030; }
.hl.kwa { color:#bb7977; font-weight:bold; }
.hl.kwb { color:#8080c0; font-weight:bold; }
.hl.kwc { color:#0080c0; }
.hl.kwd { color:#004466; }

But no joy, the output is still black. Anyone else have any more luck or can tell me what I am doing wrong?
The same tool can produce svg but I am not sure that Flare will break large svgs correctly over mutliple pages.
Thanks for your help
Ian

XHTML is as follows (apologies for pasting it won't allow me to upload as an attachment):
<pre class="hl"><span class="hl kwa">import</span> java<span class="hl opt">.</span>sql<span class="hl opt">.*;</span>

<span class="hl kwa">public class</span> updateTable <span class="hl opt">{</span>
<span class="hl kwa">public static</span> <span class="hl kwb">void</span> <span class="hl kwd">main</span><span class="hl opt">(</span>String<span class="hl opt">[]</span> args<span class="hl opt">) {</span>
<span class="hl kwa">try</span> <span class="hl opt">{</span>
Class<span class="hl opt">.</span><span class="hl kwd">forName</span><span class="hl opt">(</span><span class="hl str">&quot;org.apache.derby.jdbc.ClientDriver&quot;</span><span class="hl opt">);</span>
<span class="hl opt">}</span>
<span class="hl kwa">catch</span><span class="hl opt">(</span>ClassNotFoundException e<span class="hl opt">) {</span>
System<span class="hl opt">.</span>out<span class="hl opt">.</span><span class="hl kwd">println</span><span class="hl opt">(</span><span class="hl str">&quot;Class not found &quot;</span><span class="hl opt">+</span> e<span class="hl opt">);</span>
<span class="hl opt">}</span>
<span class="hl kwa">try</span> <span class="hl opt">{</span>
Connection con <span class="hl opt">=</span> DriverManager<span class="hl opt">.</span>getConnection
<span class="hl opt">(</span><span class="hl str">&quot;jdbc:derby://localhost:1527/testDb&quot;</span><span class="hl opt">,</span><span class="hl str">&quot;username&quot;</span><span class="hl opt">,</span>
<span class="hl str">&quot;password&quot;</span><span class="hl opt">);</span>
Statement stmt <span class="hl opt">=</span> con<span class="hl opt">.</span><span class="hl kwd">createStatement</span><span class="hl opt">();</span>
String query1<span class="hl opt">=</span><span class="hl str">&quot;update emp set name='ravi' where id=2&quot;</span><span class="hl opt">;</span>
String query2 <span class="hl opt">=</span> <span class="hl str">&quot;delete from emp where id=1&quot;</span><span class="hl opt">;</span>
String query3 <span class="hl opt">=</span> <span class="hl str">&quot;insert into emp values</span>
<span class="hl str"> (1,'ronak','manager')&quot;</span><span class="hl opt">;</span>
stmt<span class="hl opt">.</span><span class="hl kwd">execute</span><span class="hl opt">(</span>query1<span class="hl opt">);</span>
stmt<span class="hl opt">.</span><span class="hl kwd">execute</span><span class="hl opt">(</span>query2<span class="hl opt">);</span>
stmt<span class="hl opt">.</span><span class="hl kwd">execute</span><span class="hl opt">(</span>query3<span class="hl opt">);</span>
ResultSet rs <span class="hl opt">=</span> stmt<span class="hl opt">.</span><span class="hl kwd">executeQuery</span><span class="hl opt">(</span><span class="hl str">&quot;SELECT * FROM emp&quot;</span><span class="hl opt">);</span>
System<span class="hl opt">.</span>out<span class="hl opt">.</span><span class="hl kwd">println</span><span class="hl opt">(</span><span class="hl str">&quot;id name job&quot;</span><span class="hl opt">);</span>
<span class="hl kwa">while</span> <span class="hl opt">(</span>rs<span class="hl opt">.</span><span class="hl kwd">next</span><span class="hl opt">()) {</span>
<span class="hl kwb">int</span> id <span class="hl opt">=</span> rs<span class="hl opt">.</span><span class="hl kwd">getInt</span><span class="hl opt">(</span><span class="hl str">&quot;id&quot;</span><span class="hl opt">);</span>
String name <span class="hl opt">=</span> rs<span class="hl opt">.</span><span class="hl kwd">getString</span><span class="hl opt">(</span><span class="hl str">&quot;name&quot;</span><span class="hl opt">);</span>
String job <span class="hl opt">=</span> rs<span class="hl opt">.</span><span class="hl kwd">getString</span><span class="hl opt">(</span><span class="hl str">&quot;job&quot;</span><span class="hl opt">);</span>
System<span class="hl opt">.</span>out<span class="hl opt">.</span><span class="hl kwd">println</span><span class="hl opt">(</span>id<span class="hl opt">+</span><span class="hl str">&quot; &quot;</span><span class="hl opt">+</span>name<span class="hl opt">+</span><span class="hl str">&quot; &quot;</span><span class="hl opt">+</span>job<span class="hl opt">);</span>
<span class="hl opt">}</span>
<span class="hl opt">}</span>
<span class="hl kwa">catch</span><span class="hl opt">(</span>SQLException e<span class="hl opt">){</span>
System<span class="hl opt">.</span>out<span class="hl opt">.</span><span class="hl kwd">println</span><span class="hl opt">(</span><span class="hl str">&quot;SQL exception occured&quot;</span> <span class="hl opt">+</span> e<span class="hl opt">);</span>
<span class="hl opt">}</span>
<span class="hl opt">}</span>
<span class="hl opt">}</span>
</pre>
iand
Sr. Propeller Head
 
Posts: 131
Joined: Thu Dec 18, 2008 5:46 am
Location: London, England

Re: Syntax Highlighting / Code Highlighting for Pdf output

Postby Dave Lee on Thu May 01, 2014 8:13 am

Flare's PDF output can't seem to handle tags that have multiple classes, so where you have <span class="hl kwa">, it won't apply both the hl and kwa classes.

You could probably change the code to use single class names (with a search and replace), otherwise investigate some other code highlighting tools.
Dave Lee
Master Propellus Maximus
 
Posts: 5582
Joined: Mon Mar 05, 2007 8:33 am
Location: UK

Re: Syntax Highlighting / Code Highlighting for Pdf output

Postby Msquared on Thu May 01, 2014 1:43 pm

Here's a post in this very forum about another tool.

http://forums.madcapsoftware.com/viewtopic.php?f=6&t=18837
Marjorie

My goal in life is to be as good a person as my dogs already think I am.
Msquared
Propellus Maximus
 
Posts: 848
Joined: Mon Aug 06, 2012 10:19 am
Location: Southampton, UK

Re: Syntax Highlighting / Code Highlighting for Pdf output

Postby Dave Lee on Fri May 02, 2014 12:48 am

Msquared wrote:Here's a post in this very forum about another tool.

http://forums.madcapsoftware.com/viewtopic.php?f=6&t=18837


Yep, I use Google prettify myself, but iand was looking for a tool that could be used (easily) for PDFs.

Prettify (and many others) use scripting to dynamically highlight the code in a web page; but that's not much help for PDFs, where ideally you need a tool that generates the HTML/CSS that you can then put into a topic.
Dave Lee
Master Propellus Maximus
 
Posts: 5582
Joined: Mon Mar 05, 2007 8:33 am
Location: UK

Re: Syntax Highlighting / Code Highlighting for Pdf output

Postby Msquared on Fri May 02, 2014 2:25 am

Aha, Sorry for the misunderstanding. I'm actively watching this and similar threads because I'd like to do the same for PDFs (and for HTML output too).

However, in the absence of an obvious way to do this for PDFs, and even less time to investigate, what I do at present when I have indigestible chunks of source code is bold the relevant lines or elements.

For example, if I have a SOAP example that shows how to call an API and set up the required parameters, I'll bold the parameter values and the API calls where they appear in the SOAP, and bold anything else I mention when I discuss the example.

If I have a code fragment showing a series of API calls to achieve some action, I'll bold the API calls where they appear in the code. Again, anything I mention in the descriptive text will be bolded in the example.

This is surprisingly effective at reducing the noise and drawing the reader's attention to the relevant bit. Sometimes this can be more helpful than colouring every element, as the colouring itself can introduce noise or emphasis that you don't want. And also, many developers have their own colour preferences now, so colouring may not be as helpful as you think.
Marjorie

My goal in life is to be as good a person as my dogs already think I am.
Msquared
Propellus Maximus
 
Posts: 848
Joined: Mon Aug 06, 2012 10:19 am
Location: Southampton, UK

Re: Syntax Highlighting / Code Highlighting for Pdf output

Postby iand on Fri May 02, 2014 9:35 am

I've managed to get a working solution although it's a bit of effort. It might not be worth it for small code blocks

Generate an svg file from the source code using the gui version of the highlight tool downloaded from http://www.andre-simon.de/doku/highligh ... hlight.php.
Set the highlight tool options to generate an svg file. Make sure that you check the option to include css in the generated file
Open the generated svg file in notepad ++
Copy all text blocks beginning in <text> ending in </text> from the svg file to a new scratchpad file
In the scratchpad file, replace <text[^>]+>with <pre class="code" xml:space="preserve"> in notepad++ using the regular expression mode search/replace mode. (replace all <text> tags with <pre> tags with xml:space preserve to keep spaces)
Replace all </text> with </pre> (change all end </text> tags to </pre> tags)
Replace all tspan with span (svg uses tspan, xhtml uses span)
Copy and paste all lines in the scratchpad into the flare topic file xml

Copy all lines beginning .tspan. and ending in } from the svg file to a new scratchpad file
Replace all fill with color (svg uses fill, css uses color)
Replace all tspan. with nothing to trim tspan from the front of each line
Copy and paste all lines in the scratchpad to your flare stylesheet css file in internal editor mode
You should now have highlighted code that will display in html and pdf

Let me know how you get on
iand
Sr. Propeller Head
 
Posts: 131
Joined: Thu Dec 18, 2008 5:46 am
Location: London, England

Re: Syntax Highlighting / Code Highlighting for Pdf output

Postby sereshk on Mon Jun 15, 2015 8:28 am

iand wrote:I've managed to get a working solution although it's a bit of effort. It might not be worth it for small code blocks

Generate an svg file from the source code using the gui version of the highlight tool downloaded from http://www.andre-simon.de/doku/highligh ... hlight.php.
Set the highlight tool options to generate an svg file. Make sure that you check the option to include css in the generated file
Open the generated svg file in notepad ++
Copy all text blocks beginning in <text> ending in </text> from the svg file to a new scratchpad file
In the scratchpad file, replace <text[^>]+>with <pre class="code" xml:space="preserve"> in notepad++ using the regular expression mode search/replace mode. (replace all <text> tags with <pre> tags with xml:space preserve to keep spaces)
Replace all </text> with </pre> (change all end </text> tags to </pre> tags)
Replace all tspan with span (svg uses tspan, xhtml uses span)
Copy and paste all lines in the scratchpad into the flare topic file xml

Copy all lines beginning .tspan. and ending in } from the svg file to a new scratchpad file
Replace all fill with color (svg uses fill, css uses color)
Replace all tspan. with nothing to trim tspan from the front of each line
Copy and paste all lines in the scratchpad to your flare stylesheet css file in internal editor mode
You should now have highlighted code that will display in html and pdf

Let me know how you get on

Hello iand,
thanks! I tried it and it worked with html and pdf.
But a small alteration seems to be necessary at the point, where you replace all tspan. from lines ending with } . I had to actually just to remove the leading "t", because otherwise the pasted line in the .css files won't be recognized as new classes by Flare.
Local output works like a charm!
Absolutely made my day! :lol: 8)
sereshk
Jr. Propeller Head
 
Posts: 3
Joined: Mon Jun 15, 2015 8:16 am


Return to Printed Documentation Targets

Who is online

Users browsing this forum: No registered users and 1 guest