Add javascript to a WYSIWYG pdf transform with Prince?

[berkeley]

Hi,
I've been exploring different ways to display codeblocks in pdf. We have some long lines of code that need to wrap but we want to show that the text is still all the same line. One of the more appealing options is adding zebra strips to codeblocks, such that the lines alternate colors.

The instructions I've found online for doing this (http://www.nealgrosskopf.com/tech/thread.php?pid=33) use javascript, and javascript is an option for inputting into the Prince processor, but I can't see a way to do it within Oxygen. Is there a way to do this?

Thanks again for your help,
Justine

[Dan]

Ok, there are two ways of doing that zebra type of codeblock styling:

1. Modify the index-pass2.js file from the "com.oxygenxml.pdf.css" plugin, adding your JavaScript code.
The Prince XML processor is invoked from the build.xml file, in the target with name="prince". You can modfify this target if you need to change further the Prince XML command line. (https://www.princexml.com/doc/8.1/command-line/)

2. You can do it using XSLT:

Create a new XSLT file in "com.oxygenxml.pdf.css/xsl" folder. Name it "post-process-codeblock.xsl".
Create an import for it in "post-process.xsl".
In "post-process-codeblock.xsl", create a template that matches the codeblocks and creates a DIV for the codeblock, then parses the text, wrapping each line in an inner DIV.
The parent DIV element is marked with an class='zebra', so you can match it later from your CSS customisation.
Here is a the XSLT template:

Code: Select all

   <xsl:template match="*[contains(@class, ' pr-d/codeblock ')]">

    	<div class='zebra'>    	

	    	<xsl:analyze-string regex="\n" select=".">

				<xsl:matching-substring/>

				<xsl:non-matching-substring>

					<div><xsl:value-of select="."/></div>

				</xsl:non-matching-substring>

	    	</xsl:analyze-string>

    	</div>

    </xsl:template>

And here is the CSS you can use to create the zebra effect.

Code: Select all

	div[class ~= "zebra"] {

	  display:block;

		border: 2pt solid red;

		font-family:courier, fixed, monospace;

		line-height:1.2em;

	}



	

	div[class ~= "zebra"]> *:nth-of-type(odd){

	  display:block;

		background-color: silver;

	}		

Many regards,
Dan

[berkeley]

Thanks Dan! I'm excited to try this, and glad that it's possible!

[berkeley]

Hi Dan,
Thanks for the code - the XSL method was easiest for me and worked just how I wanted it to with the color banding (I removed the red border). The only problem I'm running into is that the indentation of text within codeblocks is no longer being preserved. How do I get that back?

Thanks,
Justine

[Dan]

Please add a white-space property to the "zebra" div, like:

Code: Select all

div[class ~= "zebra"] {

  ...

  white-space:pre-wrap;

  ...

}

You can read more about this property here:
https://developer.mozilla.org/en/docs/W ... hite-space

Regards,
Dan

[berkeley]

Thanks!