Oxygen XML Forum

Posted: **Thu Feb 16, 2017 8:57 pm**

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

Posted: **Fri Feb 17, 2017 10:25 am**

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

Posted: **Fri Feb 17, 2017 8:11 pm**

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

Posted: **Mon Mar 06, 2017 9:30 pm**

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

Posted: **Tue Mar 07, 2017 10:07 am**

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

Posted: **Tue Mar 07, 2017 8:23 pm**

Thanks!

Oxygen XML Forum

Add javascript to a WYSIWYG pdf transform with Prince?

Add javascript to a WYSIWYG pdf transform with Prince?

Re: Add javascript to a WYSIWYG pdf transform with Prince?

Re: Add javascript to a WYSIWYG pdf transform with Prince?

Re: Add javascript to a WYSIWYG pdf transform with Prince?

Re: Add javascript to a WYSIWYG pdf transform with Prince?

Re: Add javascript to a WYSIWYG pdf transform with Prince?