Tuning & highlighting Xoops Code Tag with a little help from .js

Ever wondered if the Xoops code tag could look a bit nicer? Instead of using the ordinairy three (!) sets of elements and classes, we found on the internet a nicer way to display code within Xoops with some help from a small javascript. Ever wondered if the Xoops code tag could look a bit [...]

Ever wondered if the Xoops code tag could look a bit nicer? Instead of using the ordinairy three (!) sets of elements and classes, we found on the internet a nicer way to display code within Xoops with some help from a small javascript.

Ever wondered if the Xoops code tag could look a bit nicer? Instead of using the ordinairy three (!) sets of elements and classes, we found on the internet a nicer way to display code within Xoops with some help from a small javascript.

First we had to make some changes in one of the Xoops core file, namely the module.textsanitizer.php which can be found in the class directory. Go to line 407 and 411 and change it to the same code you find below.

$replacements = "''
''.MyTextSanitizer::codeSanitizer(''$1'').''

''";\r\n//$text =& $this->xoopsCodeDecode($text);\r\n} else {\r\n// image not allowed\r\n$replacements = "''
''.MyTextSanitizer::codeSanitizer(''$1'', 0).''

''";

You might notice the closing of the p element. We use paragraphs to display our news text, using a code element in p is not permitted, so we make sure it closes before the code element is activated. If you look a bit further you”ll see we close the code element and start a new paragraph. Second point of interest is we named the pre element and gave it the class name “prettyprint”. This class will be used as an indentifier for the javascript.

The script:

Go to code.google.com and download the small script. The package beholds two files, one .js and one .css. Copy those files into you theme directory (we use a js directory for scripts and a stylie directory for our stylies) Then make sure you call them in your main theme file (theme.html)

Stylesheet:

Script call:

Thats all, but hey, they still don”t work. Yes, thats true in some cases. Somehow the javascript isn”t doing his job, meaning, isn”t translating the data. We found that if you altering the body element and force the script to load in your theme.html file is more succesfull.

Voila, nice and colorfull code display! Ofcourse you can tweak and style the pre class a bit more. Here”s how our pre class looks like:

pre.prettyprint {
display: block;
padding: 5px;
margin-left: 25px;
background-color: #eee;
border: 1px solid #d3d3d6;
border-left: 5px solid #D6D6D6;
overflow-x: auto;
width: 85%;
font-family: ''lucida console'', ''Courier New'', monospace;
font-size: 1em;
white-space: pre-wrap; /* css-3 */
white-space: -moz-pre-wrap !important; /* Mozilla, since 1999 */
white-space: -pre-wrap; /* Opera 4-6 */
white-space: -o-pre-wrap; /* Opera 7 */
word-wrap: break-word; /* Internet Explorer 5.5+ */

That kinda rounds it up, leaving you and your fantasy behind!