Loading...
 
Features / Usability

Features / Usability


Code Plugin display issue

posts: 9 USA

I am having an issue with the display of text inside a {CODE()} block. While the text appears as I expect in the preview, no scroll bars and the text visible. In the real page display horizontal and vertical scroll bars appear in the page for each block and obscure the code text.

Attached are screen captures of the page as displayed and the wiki source that generates it.

Tiki-12.0
Apache 2.2
Firefox
Chrome

posts: 214

First, I think you may want to remove your screen shots. I think they include more than you expected (scroll to the right).

I can recreate your problem on TW12, but only when I select the same Theme as you have: "Thenews" and only when I also have "Syntax Highlighter (CodeMirror)" selected in the "Editing and Plugins", "General Settings" tab.

Maybe you could turn off the "Syntax Highlighter" option, or try a different Theme (Note: the problem is there in the Thenews for both the "Narrow_left_column" and "None" Theme options).

Tom

posts: 9 USA
Thank you. I was hoping to keep the theme we had benn using in our older Wiki but I guess not.
posts: 214

I have been looking into what causes the problem, and it appears to be the syntax highlighting done by codemirror. It looks like codemirror inserts a new line ahead of the lines of code to be displayed, and that new line isn't taken into account when it sizes the box.

And just padding the lines of code with blank lines before the ending {CODE} does not work.

I tried changing the css but I could not find any setting that didn't get overridden later by codemirror.

But I did come up with a small change to the code plugin that will fix the problem. Since codemirror adds a line break at the top, adding one, or two, line breaks after the code keeps codemirror from collapsing the box over the bottom of the code.

In lib/wiki-plugins/wikiplugin_code.php there is the following code:

Copy to clipboard
if ((isset($prefs['feature_syntax_highlighter']) && $prefs['feature_syntax_highlighter'] == 'y') || $wrap == 1) { $pre_style = 'white-space:pre-wrap;'


Change the code to:

Copy to clipboard
if ((isset($prefs['feature_syntax_highlighter']) && $prefs['feature_syntax_highlighter'] == 'y') || $wrap == 1) { $out = $out . "\n\n"; $pre_style = 'white-space:pre-wrap;'


I added 2 line breaks because then it matches the white space at the top of the box, but a single new line would work fine too.

Since the problem does not appear with all the Themes, making the change to the code base may not be a good idea.

Update: Thenews css has wiki text display at 125%. If that is changed to 100%, then the code box display problem is avoided, but the text displays smaller.

Since it can be fixed in the css, that means you can override it by adding the following code to the Custom CSS under Look and Feel:

Copy to clipboard
.wikitext { font-size: 100%; line-height: 1.5em; }


An alternative to editing the Code plugin.

From a quick check of all the other themes, Thenews appears to be the only one with this problem.

Tom