[TW5] BJ's VisualEditor Plugin - Syntax Highlighting in Code Snippets Created by CKEditor

[Altug Ozcelikkale]

Dear All,

I have been using BJ's wonderful Visual Editor Plugin (http://bjtools.tiddlyspot.com/#VisualEditor) to put down my notes in a WYSIWYG manner and I finally managed to get things work to my liking except for the appearance of the code snippets.

My aim is to get a form of syntax highlighting in the resulting tiddler similar to the way done by highlight.js plugin in TW5 but using the CKEditor. I am using a custom build of CKeditor with the codesnippet add-on and also have thehighlight.js plugin installed on TW5 (5.1.13). Unfortunately I couldn't get it to work so far. I wonder whether anyone has tackled with this problem before or has suggestions on the direction to proceed.

I attached two screenshots, one with ckeditor 'editor view' and one with the rendered view of the resulting tiddler. Here are my observations:

1. Using ckeditor's codesnippet add-on: Syntax highlighting works in edit view, but doesn't show up in the resulting tiddler.

2. Code snippet with Wikitext markup and TW5 highlight.js plugin: The result is verbatim text with some html markup.

Here is the html source generated by case 1 i.e. using ckeditor and its codesnippet add-on:

<pre class="python hljs"><code><span class="hljs-keyword">import</span> base64

 

<span class="hljs-keyword">with</span> open(<span class="hljs-string">"t.png"</span>, <span class="hljs-string">"rb"</span>) <span class="hljs-keyword">as</span> imageFile:

    str = base64.b64encode(imageFile.read())

    <span class="hljs-keyword">print</span> str</code></pre>

in comparison to what is generated using TW5 highlight.js plugin (in a separate tiddler where syntax highlighting works):

<pre><code class="language-python">import base64

 

with open("t.png", "rb") as imageFile:

    str = base64.b64encode(imageFile.read())

    print str</code></pre>

I am very new to html and js but those look quite different to me. Is there a way to reconcile the way CKEditor does syntax highlighting with the 'default' way TW5 does using the highlight.js plugin?

I need to add that I have only found out about Tiddlywiki a few months ago but it has revolutionized the way I take and organize my notes! Plus the wonderful community that is active, creative and always willing to help.

Thank you!

Altug 

 

[BJ]

Hi Altug,

If I go to http://tiddlywiki.com/plugins/tiddlywiki/highlight/ and paste this html (i.e. your example) into a new tiddler it shows correctly. So I guess that you have not got the tiddlywiki highlight plugin setup correctly.

all the best

BJ

<pre class="python hljs"><code><span class="hljs-keyword">import</span> base64
 
<span class="hljs-keyword">with</span> open(<span class="hljs-string">"t.png"</span>, <span class="hljs-string">"rb"</span>) <span class="hljs-keyword">as</span> imageFile:
    str = base64.b64encode(imageFile.read())
    <span class="hljs-keyword">print</span> str</code></pre>

[AltugOz]

Hi BJ,

Thanks and you are right! That code snippet works. However, this is because I made a mistake in my original post and somehow got the two code examples switch places. Sorry, this must have caused a lot of confusion. The html generated by ckeditor is the other one:

<pre><code class="language-python">import base64

with open("t.png", "rb") as imageFile:

   str = base64.b64encode(imageFile.read())

   print str</code></pre>

The code snippet you tested was the one generated by highlight.js, which works as expected. 

So, the issue remains. There is currently no way that I am aware of, in which one can edit text in ckeditor that will also show up with syntax highlighting in the rendered tiddler. 

I understand that this is inherently due to the way ckeditor generates the html using its codesnippet add-on and has nothing to do with VisualEditor plugin. So, maybe we are out of luck in this case. 

Still I am very interested to know if there is another way to markup text in ckeditor (i.e. not using its code snippet add-on) that will show up as a syntax highlighted code snippet in Tiddlywiki, hopefully without jumping through too many hoops.

Best,

Altug

P.S. For completeness, I fix the description of problem in my original post as follows:

---

... I attached two screenshots, one with ckeditor 'editor view' and one with the rendered view of the resulting tiddler. Here are my observations:

1. Using ckeditor's codesnippet add-on: Syntax highlighting works in edit view, but doesn't show up in the resulting tiddler.

2. Code snippet with Wikitext markup and TW5 highlight.js plugin: The result is verbatim text with some html markup.

Here is the html source generated by case 1 i.e. using ckeditor and its codesnippet add-on:

<pre><code class="language-python">import base64

with open("t.png", "rb") as imageFile:

   str = base64.b64encode(imageFile.read())

   print str</code></pre>

in comparison to what is generated using TW5 highlight.js plugin (in a separate tiddler where syntax highlighting works):

<span class="hljs-keyword">with</span> open(<span class="hljs-string">"t.png"</span>, <span class="hljs-string">"rb"</span>) <span class="hljs-keyword">as</span> imageFile:

   str = base64.b64encode(imageFile.read())

   <span class="hljs-keyword">print</span> str</code></pre>

...

---

[BJ]

ah!
The markup produced by ckeditor is correct, the problem is that the hightlight plugin does not support the standard way of interacting with hightlight.js.

If you know how to use github you can add a feature request (to support <pre><code class="language-python">), or I could it.

all the best

BJ

[AltugOz]

Yes, that makes sense! Thanks for all the help. I submitted a feature request on github.

Best,

Altug