Displaying code snippets with TYPO3

The other day I made a post about protecting blog comments from spam, in that post I wanted show a code snippet but I had some trouble getting it to show properly. The editor (rthtmlarea) was removing pre and br tags somewhere along the way of saving or displaying the data to or from the database and I couldn't exactly figure out where this was happening.

It seems that manually putting pre tags around my snippets wasn't doing the job. What I had to do was change the following setting:

RTE.default.hidePStyleItems = pre,address


RTE.default.hidePStyleItems = address

So by removing pre from hidePStyleItems I could actually select my code snippet in the editor and select Preformatted from the list of paragraph types (where it was not shown before changing the setting), this way the code snippet is shown perfectly in the front-end.

Now all that was left was to give the pre tag some nice style:

pre {
 font-family: "Lucida Console", "fixedsys", sans-serif;
 font-size: 12px;
 padding: 5px;
 border: 1px solid #dedede;
 background-color: #f9f9f9;
 color: #a22100; 
 overflow: auto;

There you go, code snippets shown properly.

Update Jan 8, 2007:

To make it show almost exactly the same in the back-end as in the front-end, I moved the css code for pre to a different stylesheet called rte.css, I then included this stylesheet in both the PAGE object (page.includeCSS.file002 = fileadmin/rte.css) and the RTE configuration (RTE.default.contentCSS = fileadmin/rte.css).

Leave a Reply

remember my information