I have now managed to get the highlighter to work, and it looks absolutely as it should. But there's something strange happening in the edit cycle.

I'm using filtered HTML as my main format, and have added the highlighter filter to it.

When I start a new node write some text, paste in the code and add some more text. The code is marked using the {} "tags" and everything looks fine. But once I save it, the code will turn into one line, which is nicely colored, but in one line. When I go back and edit the node, it still looks nice as when i pasted it -- line breaks and all.

I think I have tried all combinations and sequences of the filters, but it seems that CKedit and the line break filter does a lot of voodoo.

The cure for this is to write the normal text and edit in CKEdit then disable rich text and then paste in the PHP-code in the right place in all the mumble-jumble. Not perfect, but doable. This preserves the line breaks, and the code looks very nice and well styled when I save the node.

But I can't edit the node any further without breaking things. Once I open it again all line breaks in the code are gone both in the editor and without. When I save I get one line, and if I edit and save it a few times it sometimes gets more and more amputated loosing parts of code.

I have tried using a plain text format with highlighter as the only filter and no editor, which will work for, but does make editing a chore when you want nice text formats, images and whatnot.
But maybe editing with HTML-codes is simply the easiest.

Has anybody else experienced something similar?
Any suggestions for a cure that lets me use the editor *and* the highlighter?

Martin

CommentFileSizeAuthor
Dumps showing the convolution66.53 KBvertikal.dk

Comments

dragor42’s picture

dragor42 commented

I'm getting this exact same problem. If I edit the content, then the line breaks are ruined and everything is on one line.

This makes using ckeditor and this module at the same time useless.

mattyoung’s picture

mattyoung commented

The problem is CKEditor actively reformats input text into "proper" HTML markup. What happen is whenever it sees input like this:

<p>A paragraph of text. blah blah blah</p>

{syntaxhighlighter brush: php}
lines of program code 1
lines of program code 1
lines of program code 1
{/syntaxhighlighter}

<p>another paragraph</p>

CKEditor changes it into:

<p>A paragraph of text. blah blah blah</p>

<p>{syntaxhighlighter brush: php}lines of program code 1 lines of program code 1 lines of program code 1{/syntaxhighlighter}</p>

<p>another paragraph</p>

You can see this happening easily by first "Switch to plain text editor", paste the raw input, "Switch to rich text editor", then "Switch to plain text editor" to see the text changed.

TinyMCE is the same way and the wysiwyg_syntaxhl solves this exact same problem. There is a TinyMCE plugin in that module that takes care of the syntaxhighlighter code block in and out of the TinyMCE editor. So you need the same kind of plugin for the CKEditor. Ask the maintainer of wysiwyg_syntaxhl to see if he can create a plugin for CKEditor.

or use Full HTML and the <pre> tag to markup your code (but only for trusted users because of Full HTML).

mattyoung’s picture

mattyoung commented

#1, your highlighted code has <br> string at the end of every line. This is because the "Line break converter" filter is in front of the Syntaxhlighter filter. Reverse that to fix this problem.

Order the filters as follow:

+ HTML filter (or Wysiwyg filter or whatever HTML filter you use)
+ Syntax highlighter
+ Line break converter

mattyoung’s picture

mattyoung commented
Version: 7.x-1.1 » 7.x-2.x-dev

Try the 7.x-2.x-dev version. I've made it rich text editor friendly by just using the pre tag for the filter.

Instead of:

{syntaxhighlighter class="brush: php"}
code...
{/syntaxhighlighter}

Do:

<pre class="brush: php">
code
</pre>

If your code have HTML or entity strings, you have to escape them (this part was automatic handled before but cannot be done with this change).

For example, if you syntax highlight HTML code:

<pre class="brush: xml">
<html>
  <head>
  </head>
  <body> &lt;
  </body>
</html>
</pre>

you must change the code to:

<pre class="brush: xml">
&lt;html>
  &lt;head>
  &lt;/head>
  &lt;body> &amp;lt;
  &lt;/body>
&lt;/html>
</pre>
bleen’s picture

bleen commented

sub

ntigh52’s picture

ntigh52 commented

did I must write the html head body tags like?

&lt;html>
  &lt;head>
  &lt;/head>
  &lt;body>
  &lt;/body>
&lt;/html>

why?!
Thanks in advance.

mattyoung’s picture

mattyoung commented

The reason is because the syntax highlighter uses the <pre> tag to markup code and any HTML tags inside the <pre> tag must be escaped to make it into legal HTML:

This is not legal (HTML tags cannot be nested inside <pre> tag):

<pre class="brush: xml">
<html>
......
</html>
</pre>

But this is:

<pre class="brush: xml">
&lt;html>
......
&lt;/html>
</pre>

This is explained here:

http://alexgorbatchev.com/SyntaxHighlighter/manual/installation.html


<pre /> method

ADVANTAGES: Works everywhere, graceful fallback if there are script problems, shows up in all RSS readers as regular <pre />

PROBLEMS: Major issue with this method is that all right angle brackets must be HTML escaped, eg all < must be replaced with &lt; This will ensure correct rendering.

ntigh52’s picture

ntigh52 commented

Thanks a lot for your replay & explanation.
It is a great module and library.

fizk’s picture

fizk commented
Status: Active » Closed (fixed)